[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

Author: gnoff

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()

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