You might occasionally see a 404 error in the console log when displaying a YouTube thumbnail. Even though YouTube provides a default image, this error occurs because the img tag's onError event is not triggered. The browser recognizes the 404 status, but the image still displays, and because the image isn't considered entirely broken, the onError function isn’t activated. This creates a problem when trying to handle or log errors properly.
Example of the Error:
Failed to load resource: the server responded with a status of 404 (Not Found)
Why doesn't onError work?
The issue stems from how the browser processes images. Even though the image returns a 404 error, YouTube still serves content (likely a fallback default thumbnail). Because the browser manages to load some form of content, it doesn't consider the image "broken" in the traditional sense, which means onError won’t be triggered.
Solution
One reliable solution is to handle the image fetch on the server side. This allows you to directly check the response's status code and act accordingly. This server-side logic can prevent CORS issues and provide better error handling.
In a Next.js application, the solution can be implemented using getServerSideProps to manage fetching the thumbnail image before sending it to the client.
Steps to fix the 404 error
Server-Side Image Fetching: You can fetch the image on the server using fetch(), check for a 404 response, and then provide a fallback image if the thumbnail isn't available.
Example:
const imageFetch = async (embed) => {
let image;
const src = `https://img.youtube.com/vi/${embed}/sddefault.jpg`;
await fetch(src).then((resp) => {
if (resp.status === 404) {
image = "YOUR_FALLBACK_IMAGE_URL";
} else {
image = src;
}
}).catch((err) => {
image = "YOUR_FALLBACK_IMAGE_URL";
});
return image;
};
export async function getServerSideProps() {
const videos = resp?.data?.videos || [];
for (let video of videos) {
const embed = video.url.split('=')?.[1] || video.url.split('/')?.pop();
video.image = await imageFetch(embed);
}
return { props: { videos } };
}
Client-Side Rendering. Once the image is fetched server-side, you can render it in your Next.js component:
<img
width='326'
height='245'
className={styles.image}
src={video?.image}
alt={video?.title}
/>
The alternative solution is YouTube API
If your project frequently interacts with YouTube videos, consider using the YouTube Data API to retrieve video metadata and thumbnails more robustly. The API can give you greater control over handling errors and accessing more accurate information about the video.
Conclusion
Handling YouTube thumbnail errors in Next.js can be tricky, especially with hidden 404 errors. Shifting the image-fetching logic to the server side allows you to control error handling more effectively and avoid unnecessary console warnings. The solution also avoids CORS issues by handling requests server-side, providing a cleaner and more reliable approach.
