CORS error while fetching favicons from external API [duplicate]

Question

I have one frontend only project in which I am using third party api from duckduckgo to fetch favicon for given website URL. Now whenever we try to fetch favicon for fake/non-existing hostname it return 404 error with default fallback icon. now I am unable to catch exact point when it is returning 404 error. In below code catch block never gets executed because API is always returning the fallback favicon.

export const getFaviconLink = (bookmarkLink: string) => {
    try {
        const linkHost = new URL(bookmarkLink).hostname;
        return `https://icons.duckduckgo.com/ip3/${linkHost}.ico`;
    } catch {
        return "https://placehold.co/24/202124/FFF?text=>";
    }
};

Above utility is being used in my code like this

<img src={getFaviconLink(link)} className={styles.favicon} />

I also tried using the fetch with Promise (code below) and tried to subscribe to external API from frontend and it is giving me CORS policy error which is expected from the third party API.

Any solutions for this? or do I have to create a could function for this?

const fetchFavicon = async () => {
  try {
    const linkHost = new URL(link).hostname;
    const faviconUrl = `https://api.faviconkit.com/${linkHost}/64`;

    const response = await fetch(faviconUrl);

    if (response.ok) {
      setFaviconUrl(faviconUrl);
    } else {
      setFaviconUrl('https://placehold.co/24/202124/FFF?text=>');
    }
  } catch (error) {
    console.error('Network error fetching favicon:', error);
    setFaviconUrl('https://placehold.co/24/202124/FFF?text=>');
  }
};

Edit:

Adding code snippets for both the methods, which still does not work 1, onError in image tag: Link 2, fetch method: Link

It looks like your first code snippet is just building up a string for the URL, so no error is likely to be thrown. If you do need to check if the favicon exists, you will need to fetch it as per your second example. If you are just displaying the image, and it may or may not be there, you can use CSS to hide the "error" state of the icon, if that's an easier approach for you. — scunliffe
– scunliffe, Commented Oct 2, 2024 at 17:46
I don't think there should be CORS error since it's a simple request - scroll down for an example with the fetch api. What I don't get: as far as I can tell you're invoking an async method, which indicates it happens on server side, in a React Server Component. But then again, CORS shouldn't be an issue, either, b/c it's not invoked from the browser at all - at other places running requests don't care about CORS. — NotX
– NotX, Commented Oct 2, 2024 at 17:51
@NotX: "you're invoking an async method, which indicates it happens on server side" - Browsers support async/await syntax in JavaScript too. The OP could be executing this function client-side. — David
– David, Commented Oct 2, 2024 at 17:54
@David but it's tagged reactjs, I didn't expect it to be possible there. At least not in the used manner. — NotX
– NotX, Commented Oct 2, 2024 at 17:54
@NotX: React doesn't change the JavaScript language. async/await is supported. — David
– David, Commented Oct 2, 2024 at 17:55

David · Accepted Answer · 2024-10-02 18:01:00Z

2

This certainly won't catch any 404 errors:

try {
    const linkHost = new URL(bookmarkLink).hostname;
    return `https://icons.duckduckgo.com/ip3/${linkHost}.ico`;
} catch {
    return "https://placehold.co/24/202124/FFF?text=>";
}

All this code does is create a URL. It doesn't make any requests to that URL.

But if this is producing an error at runtime when making a request to the resulting URL:

<img src={getFaviconLink(link)} className={styles.favicon} />

Then you should be able to observe that error with an onError event handler. For example:

<img src={getFaviconLink(link)} className={styles.favicon} onError={handleError} />

And create a function to handle that error:

const handleError = (e) => {
  // do whatever you need here to handle the error
};

answered Oct 2, 2024 at 18:01

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Meet Bhalodi Over a year ago

I have already tried above code an it is calling handleError, but still let me attach a snippet here. you can tell me what I am doing wrong there: Link stackblitz.com/edit/react-f99qnu

David Over a year ago

@MeetBhalodi: It looks like this may be relevant as well. It seems that the functionality also depends on whether or not the target site still returns something to be displayed, with or without a 404. The API being used may make this difficult for you, and if this functionality is necessary then it's possible you may need to proxy through your own server to modify the response.

Collectives™ on Stack Overflow

CORS error while fetching favicons from external API [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related