Repository: vercel/next.js
Pull request: Disable React debug channel by default

While dogfooding the debug channel in internal applications, we found bugs (most likely in React) that trigger runtime errors, when the debug channel is used to transport debug information. Those need to be investigated and fixed first, before we can enable the feature by default.

Changed files:
filename: packages/next/src/server/config-shared.ts
patch: @@ -852,8 +852,6 @@ export interface ExperimentalConfig {
   /**
    * When enabled, in dev mode, Next.js will send React's debug info through the
    * WebSocket connection, instead of including it in the main RSC payload.
-   *
-   * @default true
    */
   reactDebugChannel?: boolean
 
@@ -1634,7 +1632,7 @@ export const defaultConfig = Object.freeze({
     },
     allowDevelopmentBuild: undefined,
     reactCompiler: undefined,
-    reactDebugChannel: true,
+    reactDebugChannel: false,
     staticGenerationRetryCount: undefined,
     serverComponentsHmrCache: true,
     staticGenerationMaxConcurrency: 8,

filename: test/development/acceptance-app/hydration-error.test.ts
patch: @@ -147,16 +147,16 @@ 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="/extra-att..." notFound={{...}} forbidden={undefined} ...>
+                     <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                       <HTTPAccessFallbackErrorBoundary pathname="/extra-att..." notFound={<SegmentViewNode>} ...>
                          <RedirectBoundary>
                            <RedirectErrorBoundary router={{...}}>
                              <InnerLayoutRouter url="/extra-att..." tree={[...]} cacheNode={{lazyData:null, ...}} ...>
                                <SegmentViewNode type="layout" pagePath="(extra-att...">
                                  <SegmentTrieNode>
                                  <script>
                                  <script>
-                                 <ClientSegmentRoot Component={function Root} slots={{children:{...}}} params={{}}>
+                                 <ClientSegmentRoot Component={function Root} slots={{...}} params={{}}>
                                    <Root params={Promise}>
                                      <html
        -                               className="server-html"
@@ -184,14 +184,14 @@ 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="/extra-att..." notFound={{...}} forbidden={undefined} ...>
+                     <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                       <HTTPAccessFallbackErrorBoundary pathname="/extra-att..." notFound={<SegmentViewNode>} ...>
                          <RedirectBoundary>
                            <RedirectErrorBoundary router={{...}}>
                              <InnerLayoutRouter url="/extra-att..." tree={[...]} cacheNode={{lazyData:null, ...}} ...>
                                <SegmentViewNode type="layout" pagePath="(extra-att...">
                                  <SegmentTrieNode>
-                                 <ClientSegmentRoot Component={function Root} slots={{children:{...}}} params={{}}>
+                                 <ClientSegmentRoot Component={function Root} slots={{...}} params={{}}>
                                    <Root params={Promise}>
                                      <html
        -                               className="server-html"
@@ -775,19 +775,33 @@ 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="/script-un..." notFound={{...}} forbidden={undefined} ...>
+                       <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                         <HTTPAccessFallbackErrorBoundary pathname="/script-un..." notFound={<SegmentViewNode>} ...>
                            <RedirectBoundary>
                              <RedirectErrorBoundary router={{...}}>
                                <InnerLayoutRouter url="/script-un..." tree={[...]} cacheNode={{lazyData:null, ...}} ...>
                                  <SegmentViewNode type="layout" pagePath="(script-un...">
                                    <SegmentTrieNode>
                                    <script>
                                    <script>
-         >                         <html>
-                                     <body>
-                                     <Script src="https://ex..." strategy="beforeInte...">
-         >                             <script nonce={undefined} dangerouslySetInnerHTML={{__html:"(self.__ne..."}}>
+                                   <Root>
+                                     <NotFound>
+                                       <HTTPAccessErrorFallback>
+                                         <NotFound>
+                                           <HTTPAccessErrorFallback>
+                                             <NotFound>
+                                               <HTTPAccessErrorFallback>
+                                                 <NotFound>
+                                                   <HTTPAccessErrorFallback>
+                                                     <NotFound>
+                                                       <HTTPAccessErrorFallback>
+         >                                               <html>
+                                                           <body>
+                                                           <Script src="https://ex..." strategy="beforeInte...">
+         >                                                   <script
+         >                                                     nonce={undefined}
+         >                                                     dangerouslySetInnerHTML={{__html:"(self.__ne..."}}
+         >                                                   >
                                ...
                    ...
              ...",
@@ -839,17 +853,31 @@ 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="/script-un..." notFound={{...}} forbidden={undefined} ...>
+                       <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                         <HTTPAccessFallbackErrorBoundary pathname="/script-un..." notFound={<SegmentViewNode>} ...>
                            <RedirectBoundary>
                              <RedirectErrorBoundary router={{...}}>
                                <InnerLayoutRouter url="/script-un..." tree={[...]} cacheNode={{lazyData:null, ...}} ...>
                                  <SegmentViewNode type="layout" pagePath="(script-un...">
                                    <SegmentTrieNode>
-         >                         <html>
-                                     <body>
-                                     <Script src="https://ex..." strategy="beforeInte...">
-         >                             <script nonce={undefined} dangerouslySetInnerHTML={{__html:"(self.__ne..."}}>
+                                   <Root>
+                                     <NotFound>
+                                       <HTTPAccessErrorFallback>
+                                         <NotFound>
+                                           <HTTPAccessErrorFallback>
+                                             <NotFound>
+                                               <HTTPAccessErrorFallback>
+                                                 <NotFound>
+                                                   <HTTPAccessErrorFallback>
+                                                     <NotFound>
+                                                       <HTTPAccessErrorFallback>
+         >                                               <html>
+                                                           <body>
+                                                           <Script src="https://ex..." strategy="beforeInte...">
+         >                                                   <script
+         >                                                     nonce={undefined}
+         >                                                     dangerouslySetInnerHTML={{__html:"(self.__ne..."}}
+         >                                                   >
                                ...
                    ...
              ...",
@@ -903,20 +931,33 @@ 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="/script-un..." notFound={{...}} forbidden={undefined} ...>
+                       <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                         <HTTPAccessFallbackErrorBoundary pathname="/script-un..." notFound={<SegmentViewNode>} ...>
                            <RedirectBoundary>
                              <RedirectErrorBoundary router={{...}}>
                                <InnerLayoutRouter url="/script-un..." tree={[...]} cacheNode={{lazyData:null, ...}} ...>
                                  <SegmentViewNode type="layout" pagePath="(script-un...">
                                    <SegmentTrieNode>
+                                   <script>
+                                   <script>
                                    <Root>
-                                     <script>
-                                     <script>
-         >                           <html>
-                                       <body>
-                                       <Script src="https://ex..." strategy="beforeInte...">
-         >                               <script nonce={undefined} dangerouslySetInnerHTML={{__html:"(self.__ne..."}}>
+                                     <NotFound>
+                                       <HTTPAccessErrorFallback>
+                                         <NotFound>
+                                           <HTTPAccessErrorFallback>
+                                             <NotFound>
+                                               <HTTPAccessErrorFallback>
+                                                 <NotFound>
+                                                   <HTTPAccessErrorFallback>
+                                                     <NotFound>
+                                                       <HTTPAccessErrorFallback>
+         >                                               <html>
+                                                           <body>
+                                                           <Script src="https://ex..." strategy="beforeInte...">
+         >                                                   <script
+         >                                                     nonce={undefined}
+         >                                                     dangerouslySetInnerHTML={{__html:"(self.__ne..."}}
+         >                                                   >
                                ...
                    ...
              ...",
@@ -968,18 +1009,31 @@ 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="/script-un..." notFound={{...}} forbidden={undefined} ...>
+                       <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
+                         <HTTPAccessFallbackErrorBoundary pathname="/script-un..." notFound={<SegmentViewNode>} ...>
                            <RedirectBoundary>
                              <RedirectErrorBoundary router={{...}}>
                                <InnerLayoutRouter url="/script-un..." tree={[...]} cacheNode={{lazyData:null, ...}} ...>
                                  <SegmentViewNode type="layout" pagePath="(script-un...">
                                    <SegmentTrieNode>
                                    <Root>
-         >                           <html>
-                                       <body>
-                                       <Script src="https://ex..." strategy="beforeInte...">
-         >                               <script nonce={undefined} dangerouslySetInnerHTML={{__html:"(self.__ne..."}}>
+                                     <NotFound>
+                                       <HTTPAccessErrorFallback>
+                                         <NotFound>
+                                           <HTTPAccessErrorFallback>
+                                             <NotFound>
+                                               <HTTPAccessErrorFallback>
+                                                 <NotFound>
+                                                   <HTTPAccessErrorFallback>
+                                                     <NotFound>
+                                                       <HTTPAccessErrorFallback>
+         >                                               <html>
+                                                           <body>
+                                                           <Script src="https://ex..." strategy="beforeInte...">
+         >                                                   <script
+         >                                                     nonce={undefined}
+         >                                                     dangerouslySetInnerHTML={{__html:"(self.__ne..."}}
+         >                                                   >
                                ...
                    ...
              ...",