Repository: vercel/next.js
Pull request: [devtool] enable segment explorer by default

Enable `experimental.devtoolSegmentExplorer` on canary by default and update snapshots

Changed files:
filename: packages/next/src/server/config-shared.ts
patch: @@ -1463,7 +1463,7 @@ export const defaultConfig = Object.freeze({
     useCache: undefined,
     slowModuleDetection: undefined,
     globalNotFound: false,
-    devtoolSegmentExplorer: false,
+    devtoolSegmentExplorer: true,
     browserDebugInfoInTerminal: false,
     optimizeRouterScrolling: false,
     strictNextHead: true,

filename: test/development/acceptance-app/hydration-error.test.ts
patch: @@ -73,23 +73,26 @@ describe('Error overlay for hydration errors in App router', () => {
     await expect(browser).toDisplayCollapsedRedbox(`
      {
        "componentStack": "...
-         <RenderFromTemplateContext>
-           <ScrollAndFocusHandler segmentPath={[...]}>
-             <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
-               <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
-                 <LoadingBoundary loading={null}>
-                   <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
-                       <RedirectBoundary>
-                         <RedirectErrorBoundary router={{...}}>
-                           <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
+         <ScrollAndFocusHandler segmentPath={[...]}>
+           <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
+             <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
+               <LoadingBoundary loading={null}>
+                 <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                   <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
+                     <RedirectBoundary>
+                       <RedirectErrorBoundary router={{...}}>
+                         <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
+                           <SegmentViewNode type="page" pagePath="page.js">
+                             <SegmentTrieNode>
                              <ClientPageRoot Component={function Mismatch} searchParams={{}} params={{}}>
                                <Mismatch params={Promise} searchParams={Promise}>
                                  <div className="parent">
                                    <main className="child">
      +                               client
      -                               server
-                             ...",
+                           ...
+                         ...
+             ...",
        "description": "Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
        "environmentLabel": null,
        "label": "Recoverable Error",
@@ -150,21 +153,24 @@ describe('Error overlay for hydration errors in App router', () => {
     await expect(browser).toDisplayCollapsedRedbox(`
      {
        "componentStack": "...
-         <RenderFromTemplateContext>
-           <ScrollAndFocusHandler segmentPath={[...]}>
-             <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
-               <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
-                 <LoadingBoundary loading={null}>
-                   <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
-                       <RedirectBoundary>
-                         <RedirectErrorBoundary router={{...}}>
-                           <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
+         <ScrollAndFocusHandler segmentPath={[...]}>
+           <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
+             <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
+               <LoadingBoundary loading={null}>
+                 <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                   <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
+                     <RedirectBoundary>
+                       <RedirectErrorBoundary router={{...}}>
+                         <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
+                           <SegmentViewNode type="page" pagePath="page.js">
+                             <SegmentTrieNode>
                              <ClientPageRoot Component={function Mismatch} searchParams={{}} params={{}}>
                                <Mismatch params={Promise} searchParams={Promise}>
                                  <div className="parent">
      +                             <main className="only">
-                             ...",
+                           ...
+                         ...
+             ...",
        "description": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
        "environmentLabel": null,
        "label": "Recoverable Error",
@@ -217,14 +223,16 @@ describe('Error overlay for hydration errors in App router', () => {
                      <RedirectBoundary>
                        <RedirectErrorBoundary router={{...}}>
                          <Head>
-                         <script>
-                         <script>
-                         <script>
-                         <ClientSegmentRoot Component={function Root} slots={{...}} params={{}}>
-                           <Root params={Promise}>
-                             <html
-       -                       className="server-html"
-                             >
+                         <SegmentViewNode type="layout" pagePath="layout.js">
+                           <SegmentTrieNode>
+                           <script>
+                           <script>
+                           <script>
+                           <ClientSegmentRoot Component={function Root} slots={{...}} params={{}}>
+                             <Root params={Promise}>
+                               <html
+       -                         className="server-html"
+                               >
                          ...",
          "description": "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:",
          "environmentLabel": null,
@@ -251,11 +259,13 @@ describe('Error overlay for hydration errors in App router', () => {
                      <RedirectBoundary>
                        <RedirectErrorBoundary router={{...}}>
                          <Head>
-                         <ClientSegmentRoot Component={function Root} slots={{...}} params={{}}>
-                           <Root params={Promise}>
-                             <html
-       -                       className="server-html"
-                             >
+                         <SegmentViewNode type="layout" pagePath="layout.js">
+                           <SegmentTrieNode>
+                           <ClientSegmentRoot Component={function Root} slots={{...}} params={{}}>
+                             <Root params={Promise}>
+                               <html
+       -                         className="server-html"
+                               >
                          ...",
          "description": "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:",
          "environmentLabel": null,
@@ -299,24 +309,27 @@ describe('Error overlay for hydration errors in App router', () => {
     await expect(browser).toDisplayCollapsedRedbox(`
      {
        "componentStack": "...
-         <RenderFromTemplateContext>
-           <ScrollAndFocusHandler segmentPath={[...]}>
-             <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
-               <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
-                 <LoadingBoundary loading={null}>
-                   <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
-                       <RedirectBoundary>
-                         <RedirectErrorBoundary router={{...}}>
-                           <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
+         <ScrollAndFocusHandler segmentPath={[...]}>
+           <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
+             <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
+               <LoadingBoundary loading={null}>
+                 <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                   <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
+                     <RedirectBoundary>
+                       <RedirectErrorBoundary router={{...}}>
+                         <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
+                           <SegmentViewNode type="page" pagePath="page.js">
+                             <SegmentTrieNode>
                              <ClientPageRoot Component={function Mismatch} searchParams={{}} params={{}}>
                                <Mismatch params={Promise} searchParams={Promise}>
                                  <div className="parent">
                                    <header>
      +                             second
      -                             <footer className="3">
                                    ...
-                             ...",
+                           ...
+                         ...
+             ...",
        "description": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
        "environmentLabel": null,
        "label": "Recoverable Error",
@@ -361,16 +374,20 @@ describe('Error overlay for hydration errors in App router', () => {
              <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
                <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
                  <LoadingBoundary loading={null}>
-                   <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
+                   <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
                        <RedirectBoundary>
                          <RedirectErrorBoundary router={{...}}>
                            <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
-                             <ClientPageRoot Component={function Mismatch} searchParams={{}} params={{}}>
-                               <Mismatch params={Promise} searchParams={Promise}>
-                                 <div className="parent">
-     -                             <main className="only">
-                             ...",
+                             <SegmentViewNode type="page" pagePath="page.js">
+                               <SegmentTrieNode>
+                               <ClientPageRoot Component={function Mismatch} searchParams={{}} params={{}}>
+                                 <Mismatch params={Promise} searchParams={Promise}>
+                                   <div className="parent">
+     -                               <main className="only">
+                             ...
+                           ...
+               ...",
        "description": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
        "environmentLabel": null,
        "label": "Recoverable Error",
@@ -411,16 +428,20 @@ describe('Error overlay for hydration errors in App router', () => {
              <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
                <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
                  <LoadingBoundary loading={null}>
-                   <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
+                   <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
                        <RedirectBoundary>
                          <RedirectErrorBoundary router={{...}}>
                            <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
-                             <ClientPageRoot Component={function Mismatch} searchParams={{}} params={{}}>
-                               <Mismatch params={Promise} searchParams={Promise}>
-                                 <div className="parent">
-     -                             only
-                             ...",
+                             <SegmentViewNode type="page" pagePath="page.js">
+                               <SegmentTrieNode>
+                               <ClientPageRoot Component={function Mismatch} searchParams={{}} params={{}}>
+                                 <Mismatch params={Promise} searchParams={Promise}>
+                                   <div className="parent">
+     -                               only
+                             ...
+                           ...
+               ...",
        "description": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
        "environmentLabel": null,
        "label": "Recoverable Error",
@@ -466,22 +487,25 @@ describe('Error overlay for hydration errors in App router', () => {
      [
        {
          "componentStack": "...
-         <ScrollAndFocusHandler segmentPath={[...]}>
-           <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
-             <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
-               <LoadingBoundary loading={null}>
-                 <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                   <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
-                     <RedirectBoundary>
-                       <RedirectErrorBoundary router={{...}}>
-                         <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
+         <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
+           <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
+             <LoadingBoundary loading={null}>
+               <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                 <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
+                   <RedirectBoundary>
+                     <RedirectErrorBoundary router={{...}}>
+                       <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
+                         <SegmentViewNode type="page" pagePath="page.js">
+                           <SegmentTrieNode>
                            <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
                              <Page params={Promise} searchParams={Promise}>
                                <table>
                                  <tbody>
                                    <tr>
      >                               test
-                           ...",
+                         ...
+                       ...
+           ...",
          "description": "In HTML, text nodes cannot be a child of <tr>.
      This will cause a hydration error.",
          "environmentLabel": null,
@@ -501,16 +525,20 @@ describe('Error overlay for hydration errors in App router', () => {
              <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
                <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
                  <LoadingBoundary loading={null}>
-                   <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
+                   <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
                        <RedirectBoundary>
                          <RedirectErrorBoundary router={{...}}>
                            <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
-                             <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
-                               <Page params={Promise} searchParams={Promise}>
-     +                           <table>
-     -                           test
-                             ...",
+                             <SegmentViewNode type="page" pagePath="page.js">
+                               <SegmentTrieNode>
+                               <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
+                                 <Page params={Promise} searchParams={Promise}>
+     +                             <table>
+     -                             test
+                             ...
+                           ...
+               ...",
          "description": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
          "environmentLabel": null,
          "label": "Recoverable Error",
@@ -556,17 +584,21 @@ describe('Error overlay for hydration errors in App router', () => {
              <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
                <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
                  <LoadingBoundary loading={null}>
-                   <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
+                   <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
                        <RedirectBoundary>
                          <RedirectErrorBoundary router={{...}}>
                            <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
-                             <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
-                               <Page params={Promise} searchParams={Promise}>
-     >                           <table>
-     >                             {" "}
-                                   ...
-                             ...",
+                             <SegmentViewNode type="page" pagePath="page.js">
+                               <SegmentTrieNode>
+                               <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
+                                 <Page params={Promise} searchParams={Promise}>
+     >                             <table>
+     >                               {" "}
+                                     ...
+                             ...
+                           ...
+               ...",
        "description": "In HTML, whitespace text nodes cannot be a child of <table>. Make sure you don't have any extra whitespace between tags on each line of your source code.
      This will cause a hydration error.",
        "environmentLabel": null,
@@ -612,14 +644,15 @@ describe('Error overlay for hydration errors in App router', () => {
     await expect(browser).toDisplayCollapsedRedbox(`
      {
        "componentStack": "...
-         <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
-           <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
-             <LoadingBoundary loading={null}>
-               <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                 <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} unauthorized={undefined} ...>
-                   <RedirectBoundary>
-                     <RedirectErrorBoundary router={{...}}>
-                       <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
+         <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
+           <LoadingBoundary loading={null}>
+             <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+               <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
+                 <RedirectBoundary>
+                   <RedirectErrorBoundary router={{...}}>
+                     <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
+                       <SegmentViewNode type="page" pagePath="page.js">
+                         <SegmentTrieNode>
                          <ClientPageRoot Component={function Mismatch} searchParams={{}} params={{}}>
                            <Mismatch params={Promise} searchParams={Promise}>
                              <div className="parent">
@@ -628,7 +661,8 @@ describe('Error overlay for hydration errors in App router', () => {
      +                           <main className="second">
      -                           <footer className="3">
                                  ...
-                         ...",
+                       ...
+                     ...",
        "description": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
        "environmentLabel": null,
        "label": "Recoverable Error",
@@ -709,16 +743,20 @@ describe('Error overlay for hydration errors in App router', () => {
              <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
                <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
                  <LoadingBoundary loading={null}>
-                   <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
+                   <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
                        <RedirectBoundary>
                          <RedirectErrorBoundary router={{...}}>
                            <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
-                             <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
-                               <Page params={Promise} searchParams={Promise}>
-     >                           <p>
+                             <SegmentViewNode type="page" pagePath="page.js">
+                               <SegmentTrieNode>
+                               <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
+                                 <Page params={Promise} searchParams={Promise}>
      >                             <p>
-                             ...",
+     >                               <p>
+                             ...
+                           ...
+               ...",
          "description": "In HTML, <p> cannot be a descendant of <p>.
      This will cause a hydration error.",
          "environmentLabel": null,
@@ -782,22 +820,25 @@ describe('Error overlay for hydration errors in App router', () => {
      [
        {
          "componentStack": "...
-         <ScrollAndFocusHandler segmentPath={[...]}>
-           <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
-             <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
-               <LoadingBoundary loading={null}>
-                 <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                   <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
-                     <RedirectBoundary>
-                       <RedirectErrorBoundary router={{...}}>
-                         <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
+         <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
+           <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
+             <LoadingBoundary loading={null}>
+               <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                 <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
+                   <RedirectBoundary>
+                     <RedirectErrorBoundary router={{...}}>
+                       <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
+                         <SegmentViewNode type="page" pagePath="page.js">
+                           <SegmentTrieNode>
                            <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
                              <Page params={Promise} searchParams={Promise}>
                                <div>
                                  <div>
      >                             <p>
      >                               <div>
-                           ...",
+                         ...
+                       ...
+           ...",
          "description": "In HTML, <div> cannot be a descendant of <p>.
      This will cause a hydration error.",
          "environmentLabel": null,
@@ -857,16 +898,20 @@ describe('Error overlay for hydration errors in App router', () => {
              <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
                <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
                  <LoadingBoundary loading={null}>
-                   <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
+                   <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
                        <RedirectBoundary>
                          <RedirectErrorBoundary router={{...}}>
                            <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
-                             <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
-                               <Page params={Promise} searchParams={Promise}>
-     >                           <div>
-     >                             <tr>
-                             ...",
+                             <SegmentViewNode type="page" pagePath="page.js">
+                               <SegmentTrieNode>
+                               <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
+                                 <Page params={Promise} searchParams={Promise}>
+     >                             <div>
+     >                               <tr>
+                             ...
+                           ...
+               ...",
          "description": "In HTML, <tr> cannot be a child of <div>.
      This will cause a hydration error.",
          "environmentLabel": null,
@@ -929,20 +974,24 @@ describe('Error overlay for hydration errors in App router', () => {
              <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
                <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
                  <LoadingBoundary loading={null}>
-                   <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
-                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
+                   <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                     <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...>
                        <RedirectBoundary>
                          <RedirectErrorBoundary router={{...}}>
                            <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
-                             <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
-                               <Page params={Promise} searchParams={Promise}>
-     >                           <p>
-                                   <span>
+                             <SegmentViewNode type="page" pagePath="page.js">
+                               <SegmentTrieNode>
+                               <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
+                                 <Page params={Promise} searchParams={Promise}>
+     >                             <p>
                                      <span>
                                        <span>
                                          <span>
-     >                                     <p>
-                             ...",
+                                           <span>
+     >                                       <p>
+                             ...
+                           ...
+               ...",
          "description": "In HTML, <p> cannot be a descendant of <p>.
      This will cause a hydration error.",
          "environmentLabel": null,
@@ -1025,24 +1074,22 @@ describe('Error overlay for hydration errors in App router', () => {
       )
     })
 
-    await expect(browser).toDisplayCollapsedRedbox(`
-     [
-       {
-         "description": "Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag.",
-         "environmentLabel": null,
-         "label": "Console Error",
-         "source": "app/layout.js (7:7) @ Layout
-     >  7 |       <Script
-          |       ^",
-         "stack": [
-           "Layout app/layout.js (7:7)",
-         ],
-       },
-       {
-         "componentStack": "...
-         <Router actionQueue={{state:{...}, ...}} assetPrefix="" globalError={[...]} gracefullyDegrade={false}>
-           <HistoryUpdater>
-           <RuntimeStyles>
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       [
+         {
+           "description": "Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag.",
+           "environmentLabel": null,
+           "label": "Console Error",
+           "source": "app/layout.js (7:7) @ Layout
+       >  7 |       <Script
+            |       ^",
+           "stack": [
+             "Layout app/layout.js (7:7)",
+           ],
+         },
+         {
+           "componentStack": "...
            <HotReload assetPrefix="" globalError={[...]}>
              <AppDevOverlayErrorBoundary globalError={[...]}>
                <ReplaySsrOnlyErrors>
@@ -1051,39 +1098,104 @@ describe('Error overlay for hydration errors in App router', () => {
                    <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
                      <RedirectBoundary>
                        <RedirectErrorBoundary router={{...}}>
-                         <Head>${isTurbopack ? '\n                         <script>\n                         <script>' : ''}
-                         <Layout>
-     >                     <html>
-                             <body>
-                             <Script src="https://ex..." strategy="beforeInte...">
-     >                         <script nonce={undefined} dangerouslySetInnerHTML={{__html:"(self.__ne..."}}>
+                         <Head>
+                         <SegmentViewNode type="layout" pagePath="layout.js">
+                           <SegmentTrieNode>
+                           <script>
+                           <script>
+                           <Layout>
+       >                     <html>
+                               <body>
+                               <Script src="https://ex..." strategy="beforeInte...">
+       >                         <script nonce={undefined} dangerouslySetInnerHTML={{__html:"(self.__ne..."}}>
                          ...",
-         "description": "In HTML, <script> cannot be a child of <html>.
-     This will cause a hydration error.",
-         "environmentLabel": null,
-         "label": "Console Error",
-         "source": "app/layout.js (7:7) @ Layout
-     >  7 |       <Script
-          |       ^",
-         "stack": [
-           "script <anonymous>",
-           "Layout app/layout.js (7:7)",
-         ],
-       },
-       {
-         "description": "<html> cannot contain a nested <script>.
-     See this log for the ancestor stack trace.",
-         "environmentLabel": null,
-         "label": "Console Error",
-         "source": "app/layout.js (5:5) @ Layout
-     > 5 |     <html>
-         |     ^",
-         "stack": [
-           "html <anonymous>",
-           "Layout app/layout.js (5:5)",
-         ],
-       },
-     ]
-    `)
+           "description": "In HTML, <script> cannot be a child of <html>.
+       This will cause a hydration error.",
+           "environmentLabel": null,
+           "label": "Console Error",
+           "source": "app/layout.js (7:7) @ Layout
+       >  7 |       <Script
+            |       ^",
+           "stack": [
+             "script <anonymous>",
+             "Layout app/layout.js (7:7)",
+           ],
+         },
+         {
+           "description": "<html> cannot contain a nested <script>.
+       See this log for the ancestor stack trace.",
+           "environmentLabel": null,
+           "label": "Console Error",
+           "source": "app/layout.js (5:5) @ Layout
+       > 5 |     <html>
+           |     ^",
+           "stack": [
+             "html <anonymous>",
+             "Layout app/layout.js (5:5)",
+           ],
+         },
+       ]
+      `)
+    } else {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       [
+         {
+           "description": "Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag.",
+           "environmentLabel": null,
+           "label": "Console Error",
+           "source": "app/layout.js (7:7) @ Layout
+       >  7 |       <Script
+            |       ^",
+           "stack": [
+             "Layout app/layout.js (7:7)",
+           ],
+         },
+         {
+           "componentStack": "...
+           <HotReload assetPrefix="" globalError={[...]}>
+             <AppDevOverlayErrorBoundary globalError={[...]}>
+               <ReplaySsrOnlyErrors>
+               <DevRootHTTPAccessFallbackBoundary>
+                 <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+                   <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+                     <RedirectBoundary>
+                       <RedirectErrorBoundary router={{...}}>
+                         <Head>
+                         <SegmentViewNode type="layout" pagePath="layout.js">
+                           <SegmentTrieNode>
+                           <Layout>
+       >                     <html>
+                               <body>
+                               <Script src="https://ex..." strategy="beforeInte...">
+       >                         <script nonce={undefined} dangerouslySetInnerHTML={{__html:"(self.__ne..."}}>
+                         ...",
+           "description": "In HTML, <script> cannot be a child of <html>.
+       This will cause a hydration error.",
+           "environmentLabel": null,
+           "label": "Console Error",
+           "source": "app/layout.js (7:7) @ Layout
+       >  7 |       <Script
+            |       ^",
+           "stack": [
+             "script <anonymous>",
+             "Layout app/layout.js (7:7)",
+           ],
+         },
+         {
+           "description": "<html> cannot contain a nested <script>.
+       See this log for the ancestor stack trace.",
+           "environmentLabel": null,
+           "label": "Console Error",
+           "source": "app/layout.js (5:5) @ Layout
+       > 5 |     <html>
+           |     ^",
+           "stack": [
+             "html <anonymous>",
+             "Layout app/layout.js (5:5)",
+           ],
+         },
+       ]
+      `)
+    }
   })
 })

filename: test/development/app-dir/hydration-error-count/hydration-error-count.test.ts
patch: @@ -21,11 +21,15 @@ describe('hydration-error-count', () => {
                      <RedirectBoundary>
                        <RedirectErrorBoundary router={{...}}>
                          <InnerLayoutRouter url="/bad-nesting" tree={[...]} cacheNode={{lazyData:null, ...}} ...>
-                           <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
-                             <Page params={Promise} searchParams={Promise}>
-     >                         <p>
+                           <SegmentViewNode type="page" pagePath="bad-nestin...">
+                             <SegmentTrieNode>
+                             <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
+                               <Page params={Promise} searchParams={Promise}>
      >                           <p>
-                           ...",
+     >                             <p>
+                           ...
+                         ...
+               ...",
          "description": "In HTML, <p> cannot be a descendant of <p>.
      This will cause a hydration error.",
          "environmentLabel": null,
@@ -69,12 +73,16 @@ describe('hydration-error-count', () => {
                      <RedirectBoundary>
                        <RedirectErrorBoundary router={{...}}>
                          <InnerLayoutRouter url="/html-diff" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
-                           <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
-                             <Page params={Promise} searchParams={Promise}>
-                               <p>
-     +                           client
-     -                           server
-                           ...",
+                           <SegmentViewNode type="page" pagePath="html-diff/...">
+                             <SegmentTrieNode>
+                             <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
+                               <Page params={Promise} searchParams={Promise}>
+                                 <p>
+     +                             client
+     -                             server
+                           ...
+                         ...
+               ...",
        "description": "Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
        "environmentLabel": null,
        "label": "Recoverable Error",
@@ -105,11 +113,15 @@ describe('hydration-error-count', () => {
                      <RedirectBoundary>
                        <RedirectErrorBoundary router={{...}}>
                          <InnerLayoutRouter url="/two-issues" tree={[...]} cacheNode={{lazyData:null, ...}} ...>
-                           <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
-                             <Page params={Promise} searchParams={Promise}>
-     >                         <p className="client">
-     >                           <p>
-                           ...",
+                           <SegmentViewNode type="page" pagePath="two-issues...">
+                             <SegmentTrieNode>
+                             <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
+                               <Page params={Promise} searchParams={Promise}>
+     >                           <p className="client">
+     >                             <p>
+                           ...
+                         ...
+               ...",
          "description": "In HTML, <p> cannot be a descendant of <p>.
      This will cause a hydration error.",
          "environmentLabel": null,
@@ -133,13 +145,17 @@ describe('hydration-error-count', () => {
                      <RedirectBoundary>
                        <RedirectErrorBoundary router={{...}}>
                          <InnerLayoutRouter url="/two-issues" tree={[...]} cacheNode={{lazyData:null, ...}} ...>
-                           <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
-                             <Page params={Promise} searchParams={Promise}>
-                               <p
-     +                           className="client"
-     -                           className="server"
-                               >
-                           ...",
+                           <SegmentViewNode type="page" pagePath="two-issues...">
+                             <SegmentTrieNode>
+                             <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
+                               <Page params={Promise} searchParams={Promise}>
+                                 <p
+     +                             className="client"
+     -                             className="server"
+                                 >
+                           ...
+                         ...
+               ...",
          "description": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
          "environmentLabel": null,
          "label": "Recoverable Error",
@@ -171,11 +187,15 @@ describe('hydration-error-count', () => {
                      <RedirectBoundary>
                        <RedirectErrorBoundary router={{...}}>
                          <InnerLayoutRouter url="/hydration..." tree={[...]} cacheNode={{lazyData:null, ...}} ...>
-                           <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
-                             <Page params={Promise} searchParams={Promise}>
-     >                         <p>
+                           <SegmentViewNode type="page" pagePath="hydration-...">
+                             <SegmentTrieNode>
+                             <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
+                               <Page params={Promise} searchParams={Promise}>
      >                           <p>
-                           ...",
+     >                             <p>
+                           ...
+                         ...
+               ...",
          "description": "In HTML, <p> cannot be a descendant of <p>.
      This will cause a hydration error.",
          "environmentLabel": null,

filename: test/development/client-dev-overlay/index.test.ts
patch: @@ -142,6 +142,7 @@ describe('client-dev-overlay', () => {
        Static
        Turbopack
        Enabled
+       Route Info
        Preferences"
       `)
     } else {
@@ -151,6 +152,7 @@ describe('client-dev-overlay', () => {
        Route
        Static
        Try Turbopack
+       Route Info
        Preferences"
       `)
     }

filename: test/e2e/opentelemetry/instrumentation/opentelemetry.test.ts
patch: @@ -13,7 +13,7 @@ const EXTERNAL = {
 const COLLECTOR_PORT = 9001
 
 describe('opentelemetry', () => {
-  const { next, skipped } = nextTestSetup({
+  const { next, skipped, isNextDev } = nextTestSetup({
     files: __dirname,
     skipDeployment: true,
     dependencies: require('./package.json').dependencies,
@@ -170,7 +170,7 @@ describe('opentelemetry', () => {
                       },
                       {
                         attributes: {
-                          'next.clientComponentLoadCount': 7,
+                          'next.clientComponentLoadCount': isNextDev ? 8 : 7,
                           'next.span_type':
                             'NextNodeServer.clientComponentLoading',
                         },