fix: add debug information around potential html/rsc response mismatches (#2816)

Author: pieh

src/run/handlers/cache.cts

@@ -332,6 +332,11 @@ export class NetlifyCacheHandler implements CacheHandlerForMultipleVersions {
           }
         }
         case 'APP_PAGE': {
+          const requestContext = getRequestContext()
+          if (requestContext && blob.value?.kind === 'APP_PAGE') {
+            requestContext.isCacheableAppPage = true
+          }
+
           const { revalidate, rscData, ...restOfPageValue } = blob.value
 
           span.addEvent(blob.value?.kind, { lastModified: blob.lastModified, revalidate, ttl })
@@ -410,6 +415,13 @@ export class NetlifyCacheHandler implements CacheHandlerForMultipleVersions {
 
       await this.cacheStore.set(key, { lastModified, value }, 'blobStore.set')
 
+      if (data?.kind === 'APP_PAGE') {
+        const requestContext = getRequestContext()
+        if (requestContext) {
+          requestContext.isCacheableAppPage = true
+        }
+      }
+
       if ((!data && !isDataReq) || data?.kind === 'PAGE' || data?.kind === 'PAGES') {
         const requestContext = getRequestContext()
         if (requestContext?.didPagesRouterOnDemandRevalidate) {

src/run/handlers/request-context.cts

@@ -35,6 +35,7 @@ export type RequestContext = {
   backgroundWorkPromise: Promise<unknown>
   logger: SystemLogger
   requestID: string
+  isCacheableAppPage?: boolean
 }
 
 type RequestContextAsyncLocalStorage = AsyncLocalStorage<RequestContext>

src/run/handlers/server.ts

@@ -17,7 +17,7 @@ import { nextResponseProxy } from '../revalidate.js'
 import { setFetchBeforeNextPatchedIt } from '../storage/storage.cjs'
 
 import { getLogger, type RequestContext } from './request-context.cjs'
-import { getTracer } from './tracer.cjs'
+import { getTracer, recordWarning } from './tracer.cjs'
 import { setupWaitUntil } from './wait-until.cjs'
 
 setFetchBeforeNextPatchedIt(globalThis.fetch)
@@ -117,11 +117,6 @@ export default async (
     const nextCache = response.headers.get('x-nextjs-cache')
     const isServedFromNextCache = nextCache === 'HIT' || nextCache === 'STALE'
 
-    topLevelSpan.setAttributes({
-      'x-nextjs-cache': nextCache ?? undefined,
-      isServedFromNextCache,
-    })
-
     if (isServedFromNextCache) {
       await adjustDateHeader({
         headers: response.headers,
@@ -136,6 +131,41 @@ export default async (
     setVaryHeaders(response.headers, request, nextConfig)
     setCacheStatusHeader(response.headers, nextCache)
 
+    const netlifyVary = response.headers.get('netlify-vary') ?? undefined
+    const netlifyCdnCacheControl = response.headers.get('netlify-cdn-cache-control') ?? undefined
+    topLevelSpan.setAttributes({
+      'x-nextjs-cache': nextCache ?? undefined,
+      isServedFromNextCache,
+      netlifyVary,
+      netlifyCdnCacheControl,
+    })
+
+    if (requestContext.isCacheableAppPage) {
+      const isRSCRequest = request.headers.get('rsc') === '1'
+      const contentType = response.headers.get('content-type') ?? undefined
+
+      const isExpectedContentType =
+        ((isRSCRequest && contentType?.includes('text/x-component')) ||
+          (!isRSCRequest && contentType?.includes('text/html'))) ??
+        false
+
+      topLevelSpan.setAttributes({
+        isRSCRequest,
+        isCacheableAppPage: true,
+        contentType,
+        isExpectedContentType,
+      })
+
+      if (!isExpectedContentType) {
+        recordWarning(
+          new Error(
+            `Unexpected content type was produced for App Router page response (isRSCRequest: ${isRSCRequest}, contentType: ${contentType})`,
+          ),
+          topLevelSpan,
+        )
+      }
+    }
+
     async function waitForBackgroundWork() {
       // it's important to keep the stream open until the next handler has finished
       await nextHandlerPromise