[segment explorer] display navigation error boundaries

Author: huozhi

packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx

@@ -251,4 +251,10 @@ export const DEV_TOOLS_INFO_RENDER_FILES_STYLES = css`
     background-color: var(--color-blue-300);
     color: var(--color-blue-800);
   }
+  .segment-explorer-file-label--not-found,
+  .segment-explorer-file-label--forbidden,
+  .segment-explorer-file-label--unauthorized {
+    background-color: var(--color-amber-300);
+    color: var(--color-amber-900);
+  }
 `

packages/next/src/server/app-render/create-component-tree.tsx

@@ -392,6 +392,13 @@ async function createComponentTreeInternal({
 
   // Resolve the segment param
   const actualSegment = segmentParam ? segmentParam.treeSegment : segment
+  const isSegmentViewEnabled =
+    process.env.NODE_ENV === 'development' &&
+    ctx.renderOpts.devtoolSegmentExplorer
+  const dir =
+    process.env.NEXT_RUNTIME === 'edge'
+      ? process.env.__NEXT_EDGE_PROJECT_DIR!
+      : ctx.renderOpts.dir || ''
 
   // Use the same condition to render metadataOutlet as metadata
   const metadataOutlet = StreamingMetadataOutlet ? (
@@ -400,35 +407,30 @@ async function createComponentTreeInternal({
     <MetadataOutlet ready={getMetadataReady} />
   )
 
-  const notFoundElement = NotFound ? (
-    <>
-      <NotFound />
-      {notFoundStyles}
-    </>
-  ) : undefined
-
-  const forbiddenElement = Forbidden ? (
-    <>
-      <Forbidden />
-      {forbiddenStyles}
-    </>
-  ) : undefined
+  const notFoundElement = await createBoundaryConventionElement({
+    ctx,
+    conventionName: 'not-found',
+    Component: NotFound,
+    styles: notFoundStyles,
+    tree,
+  })
 
-  const unauthorizedElement = Unauthorized ? (
-    <>
-      <Unauthorized />
-      {unauthorizedStyles}
-    </>
-  ) : undefined
+  const forbiddenElement = await createBoundaryConventionElement({
+    ctx,
+    conventionName: 'forbidden',
+    Component: Forbidden,
+    styles: forbiddenStyles,
+    tree,
+  })
 
-  const dir =
-    process.env.NEXT_RUNTIME === 'edge'
-      ? process.env.__NEXT_EDGE_PROJECT_DIR!
-      : ctx.renderOpts.dir || ''
+  const unauthorizedElement = await createBoundaryConventionElement({
+    ctx,
+    conventionName: 'unauthorized',
+    Component: Unauthorized,
+    styles: unauthorizedStyles,
+    tree,
+  })
 
-  const isSegmentViewEnabled =
-    process.env.NODE_ENV === 'development' &&
-    ctx.renderOpts.devtoolSegmentExplorer
   const nodeName = modType ?? 'page'
 
   // TODO: Combine this `map` traversal with the loop below that turns the array
@@ -881,12 +883,12 @@ async function createComponentTreeInternal({
           <HTTPAccessFallbackBoundary
             key={cacheNodeKey}
             notFound={
-              NotFound ? (
+              notFoundElement ? (
                 <>
                   {layerAssets}
                   <SegmentComponent params={params}>
                     {notFoundStyles}
-                    <NotFound />
+                    {notFoundElement}
                   </SegmentComponent>
                 </>
               ) : undefined
@@ -1028,6 +1030,54 @@ function getRootParamsImpl(
   }
 }
 
+async function createBoundaryConventionElement({
+  ctx,
+  conventionName,
+  Component,
+  styles,
+  tree,
+}: {
+  ctx: AppRenderContext
+  conventionName:
+    | 'not-found'
+    | 'error'
+    | 'loading'
+    | 'forbidden'
+    | 'unauthorized'
+  Component: React.ComponentType<any> | undefined
+  styles: React.ReactNode | undefined
+  tree: LoaderTree
+}) {
+  const isSegmentViewEnabled =
+    process.env.NODE_ENV === 'development' &&
+    ctx.renderOpts.devtoolSegmentExplorer
+  const dir =
+    process.env.NEXT_RUNTIME === 'edge'
+      ? process.env.__NEXT_EDGE_PROJECT_DIR!
+      : ctx.renderOpts.dir || ''
+  const { SegmentViewNode } = ctx.componentMod
+  const element = Component ? (
+    <>
+      <Component />
+      {styles}
+    </>
+  ) : undefined
+
+  const wrappedElement =
+    isSegmentViewEnabled && element ? (
+      <SegmentViewNode
+        type={conventionName}
+        pagePath={getConventionPathByType(tree, dir, conventionName)!}
+      >
+        {element}
+      </SegmentViewNode>
+    ) : (
+      element
+    )
+
+  return wrappedElement
+}
+
 function normalizeConventionFilePath(
   projectDir: string,
   conventionPath: string | undefined
@@ -1057,7 +1107,15 @@ function normalizeConventionFilePath(
 function getConventionPathByType(
   tree: LoaderTree,
   dir: string,
-  conventionType: 'layout' | 'template' | 'page'
+  conventionType:
+    | 'layout'
+    | 'template'
+    | 'page'
+    | 'not-found'
+    | 'error'
+    | 'loading'
+    | 'forbidden'
+    | 'unauthorized'
 ) {
   const modules = tree[2]
   const conventionPath = modules[conventionType]

test/development/app-dir/segment-explorer/app/boundary/forbidden.tsx

@@ -0,0 +1,3 @@
+export default function Forbidden() {
+  return <h2>Custom Forbidden</h2>
+}

test/development/app-dir/segment-explorer/app/boundary/layout.tsx

@@ -0,0 +1,8 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div>
+      <h1>Boundary Layout</h1>
+      {children}
+    </div>
+  )
+}

test/development/app-dir/segment-explorer/app/boundary/not-found.tsx

@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <h2>Custom Not Found</h2>
+}

test/development/app-dir/segment-explorer/app/boundary/page.tsx

@@ -0,0 +1,20 @@
+import { forbidden, notFound, unauthorized } from 'next/navigation'
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string }>
+}) {
+  const search = await searchParams
+  switch (search.name) {
+    case 'not-found':
+      return notFound()
+    case 'forbidden':
+      return forbidden()
+    case 'unauthorized':
+      return unauthorized()
+    default:
+      break
+  }
+  return <p>{'Visit /boundary?name=<boundary>'}</p>
+}

test/development/app-dir/segment-explorer/app/boundary/unauthorized.tsx

@@ -0,0 +1,3 @@
+export default function Unauthorized() {
+  return <h2>Custom Unauthorized</h2>
+}

test/development/app-dir/segment-explorer/next.config.js

@@ -4,6 +4,7 @@
 const nextConfig = {
   experimental: {
     devtoolSegmentExplorer: true,
+    authInterrupts: true,
   },
 }
 

test/development/app-dir/segment-explorer/segment-explorer.test.ts

@@ -131,4 +131,33 @@ describe('segment-explorer', () => {
      global-error.js"
     `)
   })
+
+  it('should show navigation boundaries of the segment', async () => {
+    const browser = await next.browser('/boundary?name=not-found')
+    expect(await getSegmentExplorerContent(browser)).toMatchInlineSnapshot(`
+     "app/
+     layout.tsx
+     boundary/
+     layout.tsx
+     not-found.tsx"
+    `)
+
+    await browser.loadPage(`${next.url}/boundary?name=forbidden`)
+    expect(await getSegmentExplorerContent(browser)).toMatchInlineSnapshot(`
+     "app/
+     layout.tsx
+     boundary/
+     layout.tsx
+     forbidden.tsx"
+    `)
+
+    await browser.loadPage(`${next.url}/boundary?name=unauthorized`)
+    expect(await getSegmentExplorerContent(browser)).toMatchInlineSnapshot(`
+     "app/
+     layout.tsx
+     boundary/
+     layout.tsx
+     unauthorized.tsx"
+    `)
+  })
 })