[devtools] Make state read-only in types (#82396)

Author: eps1lon

packages/next/src/next-devtools/dev-overlay/components/call-stack/call-stack.tsx

@@ -10,7 +10,7 @@ export function CallStack({
   ignoredFramesTally,
   onToggleIgnoreList,
 }: {
-  frames: OriginalStackFrame[]
+  frames: readonly OriginalStackFrame[]
   isIgnoreListOpen: boolean
   ignoredFramesTally: number
   onToggleIgnoreList: () => void

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-call-stack/error-overlay-call-stack.tsx

@@ -3,7 +3,7 @@ import { useMemo, useState, useRef } from 'react'
 import { CallStack } from '../../call-stack/call-stack'
 
 interface CallStackProps {
-  frames: OriginalStackFrame[]
+  frames: readonly OriginalStackFrame[]
   dialogResizerRef: React.RefObject<HTMLDivElement | null>
 }
 

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-nav/error-overlay-nav.stories.tsx

@@ -21,20 +21,23 @@ export const Default: Story = {
         runtime: true,
         error: new Error('First error message'),
         frames: () => Promise.resolve([]),
+        componentStackFrames: undefined,
         type: 'runtime',
       },
       {
         id: 1,
         runtime: true,
         error: new Error('Second error message'),
         frames: () => Promise.resolve([]),
+        componentStackFrames: undefined,
         type: 'runtime',
       },
       {
         id: 2,
         runtime: true,
         error: new Error('Third error message'),
         frames: () => Promise.resolve([]),
+        componentStackFrames: undefined,
         type: 'runtime',
       },
     ],

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-pagination/error-overlay-pagination.stories.tsx

@@ -22,20 +22,23 @@ const mockErrors: ReadyRuntimeError[] = [
     runtime: true as const,
     error: new Error('First error'),
     frames: () => Promise.resolve([]),
+    componentStackFrames: undefined,
     type: 'runtime',
   },
   {
     id: 2,
     runtime: true as const,
     error: new Error('Second error'),
     frames: () => Promise.resolve([]),
+    componentStackFrames: undefined,
     type: 'runtime',
   },
   {
     id: 3,
     runtime: true as const,
     error: new Error('Third error'),
     frames: () => Promise.resolve([]),
+    componentStackFrames: undefined,
     type: 'runtime',
   },
 ]

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/restart-server-button.tsx

@@ -51,7 +51,7 @@ export function usePersistentCacheErrorDetection({
   errors,
   dispatch,
 }: {
-  errors: SupportedErrorEvent[]
+  errors: readonly SupportedErrorEvent[]
   dispatch: OverlayDispatch
 }) {
   useEffect(() => {

packages/next/src/next-devtools/dev-overlay/container/errors.stories.tsx

@@ -70,20 +70,6 @@ export const WithHydrationWarning: Story = {
 -     <p> hello world and welcome to my amazing website with lots of content hello world and welcome to my amazing website with lots of content </p>
 +     <div> hello world and welcome to my amazing website with lots of content hello world and welcome to my amazing website with lots of content </div>`,
           },
-          componentStackFrames: [
-            {
-              component: 'MyComponent',
-              file: 'app/page.tsx',
-              lineNumber: 10,
-              columnNumber: 5,
-            },
-            {
-              component: 'ParentComponent',
-              file: 'app/layout.tsx',
-              lineNumber: 20,
-              columnNumber: 3,
-            },
-          ],
         }),
         frames: () =>
           Promise.resolve([
@@ -103,6 +89,22 @@ export const WithHydrationWarning: Story = {
               },
             },
           ]),
+        componentStackFrames: [
+          {
+            component: 'MyComponent',
+            file: 'app/page.tsx',
+            line1: 10,
+            column1: 5,
+            canOpenInEditor: true,
+          },
+          {
+            component: 'ParentComponent',
+            file: 'app/layout.tsx',
+            line1: 20,
+            column1: 3,
+            canOpenInEditor: true,
+          },
+        ],
         type: 'runtime',
       },
     ],

packages/next/src/next-devtools/dev-overlay/container/runtime-error/render-error.tsx

@@ -12,8 +12,8 @@ import { usePersistentCacheErrorDetection } from '../../components/errors/error-
 export type SupportedErrorEvent = {
   id: number
   error: Error
-  frames: StackFrame[]
-  componentStackFrames?: ComponentStackFrame[]
+  frames: readonly StackFrame[]
+  componentStackFrames?: readonly ComponentStackFrame[]
   type: 'runtime' | 'recoverable' | 'console'
 }
 

packages/next/src/next-devtools/dev-overlay/shared.ts

@@ -39,41 +39,40 @@ type FastRefreshState =
   /** No refresh in progress. */
   | { type: 'idle' }
   /** The refresh process has been triggered, but the new code has not been executed yet. */
-  | { type: 'pending'; errors: SupportedErrorEvent[] }
+  | { type: 'pending'; errors: readonly SupportedErrorEvent[] }
 
 export interface OverlayState {
-  nextId: number
-  buildError: string | null
-  errors: SupportedErrorEvent[]
-  refreshState: FastRefreshState
-  versionInfo: VersionInfo
-  notFound: boolean
-  buildingIndicator: boolean
-  renderingIndicator: boolean
-  staticIndicator: boolean
-  showIndicator: boolean
-  disableDevIndicator: boolean
+  readonly nextId: number
+  readonly buildError: string | null
+  readonly errors: readonly SupportedErrorEvent[]
+  readonly refreshState: FastRefreshState
+  readonly versionInfo: VersionInfo
+  readonly notFound: boolean
+  readonly buildingIndicator: boolean
+  readonly renderingIndicator: boolean
+  readonly staticIndicator: boolean
+  readonly showIndicator: boolean
+  readonly disableDevIndicator: boolean
   /** Whether to show the restart server button in the panel UI. Currently
    *  only used when Turbopack + Persistent Cache is enabled.
    */
-  showRestartServerButton: boolean
-  debugInfo: DebugInfo
-  routerType: 'pages' | 'app'
+  readonly showRestartServerButton: boolean
+  readonly debugInfo: DebugInfo
+  readonly routerType: 'pages' | 'app'
   /** This flag is used to handle the Error Overlay state in the "old" overlay.
    *  In the DevTools panel, this value will used for the "Error Overlay Mode"
    *  which is viewing the "Issues Tab" as a fullscreen.
    */
-  isErrorOverlayOpen: boolean
-  devToolsPosition: Corners
-  devToolsPanelPosition: Record<DevtoolsPanelName, Corners>
-  devToolsPanelSize: Record<
-    DevtoolsPanelName,
-    { width: number; height: number }
+  readonly isErrorOverlayOpen: boolean
+  readonly devToolsPosition: Corners
+  readonly devToolsPanelPosition: Readonly<Record<DevtoolsPanelName, Corners>>
+  readonly devToolsPanelSize: Readonly<
+    Record<DevtoolsPanelName, { width: number; height: number }>
   >
-  scale: number
-  page: string
-  theme: 'light' | 'dark' | 'system'
-  hideShortcut: string | null
+  readonly scale: number
+  readonly page: string
+  readonly theme: 'light' | 'dark' | 'system'
+  readonly hideShortcut: string | null
 }
 type DevtoolsPanelName = string
 export type OverlayDispatch = React.Dispatch<DispatcherEvent>
@@ -325,10 +324,10 @@ export function useErrorOverlayReducer(
   isRecoverableError: (error: Error) => boolean
 ) {
   function pushErrorFilterDuplicates(
-    events: SupportedErrorEvent[],
+    events: readonly SupportedErrorEvent[],
     id: number,
     error: Error
-  ): SupportedErrorEvent[] {
+  ): readonly SupportedErrorEvent[] {
     const componentStack = getComponentStack(error)
     const componentStackFrames =
       componentStack === undefined

packages/next/src/next-devtools/dev-overlay/storybook/errors.ts

@@ -126,6 +126,7 @@ export const runtimeErrors: ReadyRuntimeError[] = [
         },
         ...Array(20).fill(ignoredFrame),
       ]),
+    componentStackFrames: undefined,
     type: 'runtime',
   },
   {
@@ -144,6 +145,7 @@ export const runtimeErrors: ReadyRuntimeError[] = [
           originalCodeFrame: originalCodeFrame('Second error message'),
         },
       ]),
+    componentStackFrames: undefined,
     type: 'console',
   },
   {
@@ -162,6 +164,7 @@ export const runtimeErrors: ReadyRuntimeError[] = [
           originalCodeFrame: originalCodeFrame('Third error message'),
         },
       ]),
+    componentStackFrames: undefined,
     type: 'recoverable',
   },
   {
@@ -180,6 +183,7 @@ export const runtimeErrors: ReadyRuntimeError[] = [
           originalCodeFrame: originalCodeFrame('typeof window !== undefined'),
         },
       ]),
+    componentStackFrames: undefined,
     type: 'runtime',
   },
   {
@@ -204,6 +208,7 @@ export const runtimeErrors: ReadyRuntimeError[] = [
           originalCodeFrame: originalCodeFrame('Fifth error message'),
         },
       ]),
+    componentStackFrames: undefined,
     type: 'console',
   },
   {
@@ -222,6 +227,7 @@ export const runtimeErrors: ReadyRuntimeError[] = [
           originalCodeFrame: originalCodeFrame('Sixth error message'),
         },
       ]),
+    componentStackFrames: undefined,
     type: 'recoverable',
   },
   {
@@ -240,6 +246,7 @@ export const runtimeErrors: ReadyRuntimeError[] = [
           originalCodeFrame: originalCodeFrame('Sixth error message'),
         },
       ]),
+    componentStackFrames: undefined,
     type: 'runtime',
   },
   {
@@ -258,6 +265,7 @@ export const runtimeErrors: ReadyRuntimeError[] = [
           originalCodeFrame: originalCodeFrame('Eighth error message'),
         },
       ]),
+    componentStackFrames: undefined,
     type: 'runtime',
   },
   {
@@ -276,6 +284,7 @@ export const runtimeErrors: ReadyRuntimeError[] = [
           originalCodeFrame: originalCodeFrame('Ninth error message'),
         },
       ]),
+    componentStackFrames: undefined,
     type: 'runtime',
   },
   {
@@ -294,6 +303,7 @@ export const runtimeErrors: ReadyRuntimeError[] = [
           originalCodeFrame: originalCodeFrame('Tenth error message'),
         },
       ]),
+    componentStackFrames: undefined,
     type: 'runtime',
   },
 ]

packages/next/src/next-devtools/dev-overlay/utils/get-error-by-type.ts

@@ -9,14 +9,16 @@ export type ReadyRuntimeError = {
   id: number
   runtime: true
   error: Error & { environmentName?: string }
-  frames: OriginalStackFrame[] | (() => Promise<OriginalStackFrame[]>)
-  componentStackFrames?: ComponentStackFrame[]
+  frames:
+    | readonly OriginalStackFrame[]
+    | (() => Promise<readonly OriginalStackFrame[]>)
+  componentStackFrames: readonly ComponentStackFrame[] | undefined
   type: 'runtime' | 'console' | 'recoverable'
 }
 
 export const useFrames = (
   error: ReadyRuntimeError | null
-): OriginalStackFrame[] => {
+): readonly OriginalStackFrame[] => {
   if (!error) return []
 
   if ('use' in React) {
@@ -28,7 +30,7 @@ export const useFrames = (
       )
     }
 
-    return React.use((frames as () => Promise<OriginalStackFrame[]>)())
+    return React.use((frames as () => Promise<readonly OriginalStackFrame[]>)())
   } else {
     if (!Array.isArray(error.frames)) {
       throw new Error(
@@ -49,6 +51,7 @@ export async function getErrorByType(
     runtime: true,
     error: event.error,
     type: event.type,
+    componentStackFrames: event.componentStackFrames,
   } as const
 
   if ('use' in React) {
@@ -63,9 +66,6 @@ export async function getErrorByType(
         )
       }),
     }
-    if (event.componentStackFrames !== undefined) {
-      readyRuntimeError.componentStackFrames = event.componentStackFrames
-    }
     return readyRuntimeError
   } else {
     const readyRuntimeError: ReadyRuntimeError = {
@@ -77,9 +77,6 @@ export async function getErrorByType(
         isAppDir
       ),
     }
-    if (event.componentStackFrames !== undefined) {
-      readyRuntimeError.componentStackFrames = event.componentStackFrames
-    }
     return readyRuntimeError
   }
 }