Better error handling in Favicon component

OlegWock · Apr 28, 2023 · 74b0606 · 74b0606
1 parent 57fd1d6
commit 74b0606
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, RefAttributes, useLayoutEffect, useMemo } from 'react';
+import { ComponentPropsWithoutRef, RefAttributes, useLayoutEffect, useMemo, useState } from 'react';
 import browser from 'webextension-polyfill';
 import { allSets } from './icons/all-sets';
 import { IconifyJSON, Icon as OfflineIcon, addCollection } from '@iconify/react/dist/offline';
@@ -122,15 +122,18 @@ export const Icon = forwardRef<RefAttributes<SVGSVGElement>, IconProps>((props,
 type FaviconProps = {
     url: string,
     fallback?: string,
+    useFaviconApiIfPossible?: boolean,
 } & BaseIconProps;
 
 export const Favicon = forwardRef<HTMLElement, FaviconProps>((props, ref) => {
     const permissions = useAtomValue(availablePermissionsAtom);
     // @ts-expect-error new permission not yet in types
     const hasPermission = permissions?.permissions.includes('favicon');
+    const [imageError, setImageError] = useState(false);
+
     const iconUrl = useMemo(() => {
         const size = (props.width || props.height || 64).toString();
-        if (hasPermission) {
+        if (hasPermission && props.useFaviconApiIfPossible) {
             const resUrl = new URL(browser.runtime.getURL("/_favicon/"));
             resUrl.searchParams.set("pageUrl", props.url);
             resUrl.searchParams.set("size", size);
@@ -148,9 +151,9 @@ export const Favicon = forwardRef<HTMLElement, FaviconProps>((props, ref) => {
 
 
 
-    if (iconUrl) {
+    if (iconUrl && !imageError) {
         // @ts-ignore incorrect ref typing
-        return (<img src={iconUrl} {...props} ref={ref} />);
+        return (<img src={iconUrl} onError={() => setImageError(true)} {...props} ref={ref} />);
     }
 
     // @ts-ignore incorrect ref typing

diff --git a/src/plugins/bookmark/styles.scss b/src/plugins/bookmark/styles.scss
@@ -3,6 +3,7 @@
     align-items: center;
     text-decoration: none;
     flex-grow: 1;
+    max-height: 100%;
 
     &.size-s {
         flex-direction: column;