From a7a7b19aec34a221fce96f33c808c0c0675fd63e Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 22 Oct 2024 16:12:54 -0700
Subject: [PATCH] [dynamicIO] detect metadata boundaries in dev using server
 component stacks (#71666)

Component stacks in dev are sourcemapped and currently there is a bug
that prevents the right function name from showing up which interrupts
our ability to detect incomplete metadata in dev
---
 packages/next/src/lib/metadata/metadata.tsx                 | 6 ++++++
 .../next/src/server/app-render/create-component-tree.tsx    | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/packages/next/src/lib/metadata/metadata.tsx b/packages/next/src/lib/metadata/metadata.tsx
index 91f6f7875b589..a3f755c1036b7 100644
--- a/packages/next/src/lib/metadata/metadata.tsx
+++ b/packages/next/src/lib/metadata/metadata.tsx
@@ -33,6 +33,10 @@ import type {
 import { isNotFoundError } from '../../client/components/not-found'
 import type { MetadataContext } from './types/resolvers'
 import type { WorkStore } from '../../server/app-render/work-async-storage.external'
+import {
+  METADATA_BOUNDARY_NAME,
+  VIEWPORT_BOUNDARY_NAME,
+} from './metadata-constants'
 
 // Use a promise to share the status of the metadata resolving,
 // returning two components `MetadataTree` and `MetadataOutlet`
@@ -110,6 +114,7 @@ export function createMetadataComponents({
       return null
     }
   }
+  Viewport.displayName = VIEWPORT_BOUNDARY_NAME
 
   async function metadata() {
     return getResolvedMetadata(
@@ -146,6 +151,7 @@ export function createMetadataComponents({
       return null
     }
   }
+  Metadata.displayName = METADATA_BOUNDARY_NAME
 
   async function getMetadataAndViewportReady(): Promise<void> {
     await viewport()
diff --git a/packages/next/src/server/app-render/create-component-tree.tsx b/packages/next/src/server/app-render/create-component-tree.tsx
index b6714cccc9d91..d355c052a0a36 100644
--- a/packages/next/src/server/app-render/create-component-tree.tsx
+++ b/packages/next/src/server/app-render/create-component-tree.tsx
@@ -21,6 +21,7 @@ import { StaticGenBailoutError } from '../../client/components/static-generation
 import type { LoadingModuleData } from '../../shared/lib/app-router-context.shared-runtime'
 import type { Params } from '../request/params'
 import { workUnitAsyncStorage } from './work-unit-async-storage.external'
+import { OUTLET_BOUNDARY_NAME } from '../../lib/metadata/metadata-constants'
 
 /**
  * Use the provided loader tree to create the React Component tree.
@@ -736,3 +737,4 @@ async function MetadataOutlet({
   }
   return null
 }
+MetadataOutlet.displayName = OUTLET_BOUNDARY_NAME