feat: favicon api always return an image

When the api cannot fetch the remote favicon, we return a placeholder image

next.config.js

@@ -23,7 +23,10 @@ const config = {
   experimental: {
     webpackBuildWorker: true
   },
-  output: "standalone"
+  output: "standalone",
+  env: {
+    baseUrl: process.env.NEXTAUTH_URL
+  }
 };
 
 module.exports = config;

src/components/Links/LinkFavicon.tsx

@@ -13,6 +13,8 @@ interface LinkFaviconProps {
   noMargin?: boolean;
 }
 
+// The Favicon API should always return an image, so it's not really useful to keep the loader nor placeholder icon,
+// but for slow connections and other random stuff, I'll keep this
 export default function LinkFavicon({
   url,
   size = 32,

src/pages/api/favicon.ts

@@ -1,5 +1,7 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import { parse } from "node-html-parser";
+import { createReadStream } from "node:fs";
+import { resolve } from "node:path";
 
 const USER_AGENT =
   "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0";
@@ -62,7 +64,10 @@ export default async function handler(
   } catch (error) {
     const errorMessage = error?.message || "Unable to retrieve favicon";
     console.log("[Favicon]", `[second: ${faviconRequestUrl}]`, errorMessage);
-    res.status(404).send({ error: errorMessage, text: documentAsText });
+
+    const readStream = createReadStream(resolve(process.cwd(), "./public/empty-image.png"));
+    res.writeHead(206);
+    readStream.pipe(res);
   }
 }
 

src/utils/link.ts

@@ -1,3 +1,3 @@
 export function faviconLinkBuilder(origin: string) {
-  return `http://localhost:3000/api/favicon?url=${origin}`;
+  return `${process.env.baseUrl}/api/favicon?url=${origin}`;
 }