fix: work around a couple tiny Netlify CDN bugs

Author: serhalp

app/components/CacheAnalysis.vue

@@ -12,7 +12,7 @@ const { servedBy, cacheStatus } = getCacheAnalysis(props.cacheHeaders);
       Served by: <strong>{{ servedBy.source }}</strong>
     </div>
     <div>
-      CDN node: <code>{{ servedBy.cdnNode }}</code>
+      CDN node(s): <code>{{ servedBy.cdnNodes }}</code>
     </div>
 
     <hr />

app/utils/getCacheAnalysis.ts

@@ -26,55 +26,82 @@ interface ParsedCacheStatusEntry {
     detail?: string;
   };
 }
+
+const CACHE_NAMES_SORTED_BY_RFC_9211 = [
+  "Next.js",
+  "Netlify Durable",
+  "Netlify Edge",
+];
+
+/**
+ * Per the spec, these should be sorted from "the cache closest to the origin server" to "the cache
+ * closest to the user", but there appear to be scenarios where this is not the case. This fixes
+ * these for now as a stopgap.
+ */
+const fixNonconformingUnsortedEntries = (
+  unsortedEntries: readonly ParsedCacheStatusEntry[],
+): ParsedCacheStatusEntry[] => {
+  return unsortedEntries.toSorted((a, b) => {
+    // If either or both of these is not in the array (i.e. index is -1), we wouldn't be able to
+    // know where it should "go" so don't even bother explicitly handling it.
+    return (
+      CACHE_NAMES_SORTED_BY_RFC_9211.indexOf(a.cacheName) -
+      CACHE_NAMES_SORTED_BY_RFC_9211.indexOf(b.cacheName)
+    );
+  });
+};
+
 export const parseCacheStatus = (
   // See https://httpwg.org/specs/rfc9211.html
   // example string:
   // "\"Next.js\"; hit, \"Netlify Durable\"; fwd=miss; stored, \"Netlify Edge\"; fwd=miss"
   cacheStatus: string,
 ): ParsedCacheStatusEntry[] => {
-  return (
-    cacheStatus
-      .split(", ")
-      .map((entry): null | ParsedCacheStatusEntry => {
-        const [cacheName, ...parameters] = entry.split("; ");
-        if (!cacheName || parameters.length === 0) {
-          console.warn("Ignoring invalid cache status entry", { entry });
-          return null;
-        }
-
-        const parametersByKey = new Map(
-          parameters
-            .map((parameter) => {
-              const [key, value] = parameter.split("=");
-              if (!key) {
-                console.warn("Ignoring invalid cache status entry", { entry });
-                return null;
-              }
-              return [key, value];
-            })
-            .filter((kv): kv is [string, string | undefined] => kv != null),
-        );
-        return {
-          cacheName: cacheName.slice(1, -1), // "Netlify Edge" -> Netlify Edge
-          parameters: {
-            hit: parametersByKey.has("hit"),
-            fwd: parametersByKey.get(
-              "fwd",
-            ) as ParsedCacheStatusEntry["parameters"]["fwd"],
-            "fwd-status": Number(parametersByKey.get("fwd-status")),
-            ttl: Number(parametersByKey.get("ttl")),
-            stored: parametersByKey.has("stored"),
-            collapsed: parametersByKey.has("collapsed"),
-            key: parametersByKey.get("key"),
-            detail: parametersByKey.get("detail"),
-          },
-        };
-      })
-      .filter((e): e is ParsedCacheStatusEntry => e != null)
-      // Per the spec, these are sorted from "the cache closest to the origin server" to "the cache closest to the user".
-      // As a user interpreting what happened, you want these to start from yourself.
-      .toReversed()
-  );
+  const unfixedEntries = cacheStatus
+    .split(", ")
+    .map((entry): null | ParsedCacheStatusEntry => {
+      const [cacheName, ...parameters] = entry.split("; ");
+      if (!cacheName || parameters.length === 0) {
+        console.warn("Ignoring invalid cache status entry", { entry });
+        return null;
+      }
+
+      const parametersByKey = new Map(
+        parameters
+          .map((parameter) => {
+            const [key, value] = parameter.split("=");
+            if (!key) {
+              console.warn("Ignoring invalid cache status entry", { entry });
+              return null;
+            }
+            return [key, value];
+          })
+          .filter((kv): kv is [string, string | undefined] => kv != null),
+      );
+      return {
+        cacheName: cacheName.slice(1, -1), // "Netlify Edge" -> Netlify Edge
+        parameters: {
+          hit: parametersByKey.has("hit"),
+          fwd: parametersByKey.get(
+            "fwd",
+          ) as ParsedCacheStatusEntry["parameters"]["fwd"],
+          "fwd-status": Number(parametersByKey.get("fwd-status")),
+          ttl: Number(parametersByKey.get("ttl")),
+          stored: parametersByKey.has("stored"),
+          collapsed: parametersByKey.has("collapsed"),
+          key: parametersByKey.get("key"),
+          detail: parametersByKey.get("detail"),
+        },
+      };
+    })
+    .filter((e): e is ParsedCacheStatusEntry => e != null);
+
+  const sortedEntries = fixNonconformingUnsortedEntries(unfixedEntries);
+
+  // Per the spec, these should be sorted from "the cache closest to the origin server" to "the cache closest to the user".
+  // As a user interpreting what happened, you want these to start from yourself.
+  // TODO(serhalp) More of a presentation layer concern? Move to the component?
+  return sortedEntries.toReversed();
 };
 
 const getServedBySource = (
@@ -107,18 +134,30 @@ const getServedBySource = (
   );
 };
 
+/**
+ * There is a bug where sometimes duplicate hosts are returned in the `X-BB-Host-Id` header. This is
+ * doubly confusing because there are legitimate cases where the same node could be involved more
+ * than once in the handling of a given request, but we can't distinguish those from dupes. So just dedupe.
+ */
+const fixDuplicatedCdnNodes = (unfixedCdnNodes: string): string => {
+  return Array.from(new Set(unfixedCdnNodes.split(", "))).join(", ");
+};
+
 interface ServedBy {
   source: ServedBySource;
-  cdnNode: string;
+  cdnNodes: string;
 }
 
 const getServedBy = (
   cacheHeaders: Headers,
   cacheStatus: ParsedCacheStatusEntry[],
 ): ServedBy => {
+  const source = getServedBySource(cacheHeaders, cacheStatus);
+  const unfixedCdnNodes =
+    cacheHeaders.get("X-BB-Host-Id") ?? "unknown CDN node";
   return {
-    source: getServedBySource(cacheHeaders, cacheStatus),
-    cdnNode: cacheHeaders.get("X-BB-Host-Id") ?? "unknown CDN node",
+    source,
+    cdnNodes: fixDuplicatedCdnNodes(unfixedCdnNodes),
   };
 };