fix: fix cache analysis not rendering when edge cache miss occurs

app/utils/getCacheAnalysis.test.ts

@@ -16,7 +16,7 @@ describe('getCacheAnalysis', () => {
     expect(result).toHaveProperty('servedBy')
     expect(result).toHaveProperty('cacheStatus')
     expect(result).toHaveProperty('cacheControl')
-    expect(result.servedBy.source).toBe(ServedBySource.CDN)
+    expect(result.servedBy.source).toBe(ServedBySource.CdnEdge)
   })
 
   it('integrates Cache-Status parsing correctly', () => {
@@ -66,6 +66,23 @@ describe('getCacheAnalysis', () => {
 
     expect(() => getCacheAnalysis(headers, now)).toThrow('Could not determine who served the request')
   })
+
+  it('returns CdnOrigin when Netlify Edge has a cache miss', () => {
+    const headers = {
+      'cache-status': '"Netlify Edge"; fwd=miss',
+      'debug-x-bb-host-id': 'cdn-glo-aws-cmh-57',
+    }
+    const now = Date.now()
+
+    const result = getCacheAnalysis(headers, now)
+
+    expect(result.servedBy.source).toBe(ServedBySource.CdnOrigin)
+    expect(result.servedBy.cdnNodes).toBe('cdn-glo-aws-cmh-57')
+    expect(result.cacheStatus).toHaveLength(1)
+    expect(result.cacheStatus[0]?.cacheName).toBe('Netlify Edge')
+    expect(result.cacheStatus[0]?.parameters.hit).toBe(false)
+    expect(result.cacheStatus[0]?.parameters.fwd).toBe('miss')
+  })
 })
 
 describe('parseCacheStatus', () => {

app/utils/getServedBy.test.ts

@@ -3,7 +3,7 @@ import { describe, it, expect } from 'vitest'
 import { getServedBy, ServedBySource, type ParsedCacheStatusEntry } from './getServedBy'
 
 describe('getServedBy', () => {
-  it('returns CDN when Netlify Edge cache has a hit', () => {
+  it('returns CdnEdge when Netlify Edge cache has a hit', () => {
     const headers = new Headers({
       'Debug-X-BB-Host-Id': 'node1.example.com',
     })
@@ -20,11 +20,11 @@ describe('getServedBy', () => {
 
     const result = getServedBy(headers, cacheStatus)
 
-    expect(result.source).toBe(ServedBySource.CDN)
+    expect(result.source).toBe(ServedBySource.CdnEdge)
     expect(result.cdnNodes).toBe('node1.example.com')
   })
 
-  it('prioritizes CDN hit over durable cache hit when both are present', () => {
+  it('prioritizes CdnEdge hit over durable cache hit when both are present', () => {
     const headers = new Headers({
       'Debug-X-BB-Host-Id': 'node1.example.com',
     })
@@ -49,7 +49,7 @@ describe('getServedBy', () => {
 
     const result = getServedBy(headers, cacheStatus)
 
-    expect(result.source).toBe(ServedBySource.CDN)
+    expect(result.source).toBe(ServedBySource.CdnEdge)
   })
 
   it('returns DurableCache when Netlify Durable cache has a hit', () => {
@@ -156,7 +156,29 @@ describe('getServedBy', () => {
     )
   })
 
-  it('ignores cache entries without hits', () => {
+  it('returns CdnOrigin when Netlify Edge cache has a miss', () => {
+    const headers = new Headers({
+      'Debug-X-BB-Host-Id': 'node1.example.com',
+    })
+    const cacheStatus: ParsedCacheStatusEntry[] = [
+      {
+        cacheName: 'Netlify Edge',
+        parameters: {
+          hit: false,
+          fwd: 'miss',
+          stored: false,
+          collapsed: false,
+        },
+      },
+    ]
+
+    const result = getServedBy(headers, cacheStatus)
+
+    expect(result.source).toBe(ServedBySource.CdnOrigin)
+    expect(result.cdnNodes).toBe('node1.example.com')
+  })
+
+  it('ignores cache entries without hits and picks first with hit', () => {
     const headers = new Headers({
       'Debug-X-BB-Host-Id': 'node1.example.com',
     })

app/utils/getServedBy.ts

@@ -1,5 +1,6 @@
 export enum ServedBySource {
-  CDN = 'CDN',
+  CdnEdge = 'CDN edge',
+  CdnOrigin = 'CDN origin',
   DurableCache = 'Durable Cache',
   Function = 'Function',
   EdgeFunction = 'Edge Function',
@@ -40,16 +41,28 @@ const getServedBySource = (
   // So, the first cache hit (starting from the user) is the one that served the request.
   // But we don't quite want to return exactly the same concept of "caches" as in `Cache-Status`, so
   // we need a bit of extra logic to map to other sources.
+
+  // First, check for cache hits
   for (const {
     cacheName,
     parameters: { hit },
   } of cacheStatus) {
     if (!hit) continue
 
-    if (cacheName === 'Netlify Edge') return ServedBySource.CDN
+    if (cacheName === 'Netlify Edge') return ServedBySource.CdnEdge
     if (cacheName === 'Netlify Durable') return ServedBySource.DurableCache
   }
 
+  // Check for the specific case of a single Netlify Edge miss - this handles the weird
+  // Netlify Cache-Status behavior where a miss on the CDN edge means the request was
+  // forwarded to CDN origin. According to Netlify's cache behavior, when there's a miss
+  // on "Netlify Edge", the request gets forwarded to the CDN origin to fetch the static asset.
+  if (cacheStatus.length === 1
+    && cacheStatus[0]?.cacheName === 'Netlify Edge'
+    && !cacheStatus[0]?.parameters.hit) {
+    return ServedBySource.CdnOrigin
+  }
+
   // NOTE: the order is important here, since a response can be served by a Function even
   // though one or more Edge Functions are also invoked (as middleware).
   if (cacheHeaders.has('Debug-X-NF-Function-Type'))