cmd .

vercel · Jan 17, 2025 · 83a4ba0 · 83a4ba0
1 parent 53e27b9
commit 83a4ba0
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 69 deletions.
diff --git a/...ages/next/src/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.tsx b/...ages/next/src/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.tsx
@@ -17,8 +17,9 @@ export default function ReactDevOverlay({
   state: OverlayState
   children: React.ReactNode
 }) {
-  const { readyErrors } = useErrorHook({ errors: state.errors, isAppDir: true })
   const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(true)
+  const { readyErrors } = useErrorHook({ errors: state.errors, isAppDir: true })
+
   return (
     <>
       <ErrorBoundary>{children}</ErrorBoundary>

diff --git a/...eact-dev-overlay/_experimental/internal/components/Errors/error-overlay/error-overlay.tsx b/...eact-dev-overlay/_experimental/internal/components/Errors/error-overlay/error-overlay.tsx
@@ -55,7 +55,6 @@ export function ErrorOverlay({
       errors={state.errors}
       readyErrors={readyErrors}
       versionInfo={state.versionInfo}
-      isErrorOverlayOpen={isErrorOverlayOpen}
       onClose={() => {
         setIsErrorOverlayOpen(false)
       }}

diff --git a/...rlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx b/...rlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
@@ -26,8 +26,8 @@ export function DevToolsIndicator({
     key: '.',
     modifiers: [MODIFIERS.CTRL_CMD],
     callback: () => {
-      setIsErrorOverlayOpen((prev: boolean) => !prev)
-      setIsDevToolsIndicatorOpen((prev: boolean) => !prev)
+      setIsDevToolsIndicatorOpen(!isDevToolsIndicatorOpen)
+      setIsErrorOverlayOpen(!isDevToolsIndicatorOpen)
     },
   })
 

diff --git a/...eact-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx b/...eact-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx
@@ -55,7 +55,6 @@ export function ErrorOverlay({
       errors={state.errors}
       readyErrors={readyErrors}
       versionInfo={state.versionInfo}
-      isErrorOverlayOpen={isErrorOverlayOpen}
       onClose={() => {
         setIsErrorOverlayOpen(false)
       }}

diff --git a/...c/client/components/react-dev-overlay/_experimental/internal/container/errors.stories.tsx b/...c/client/components/react-dev-overlay/_experimental/internal/container/errors.stories.tsx
@@ -1,4 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import type { SupportedErrorEvent } from '../../../internal/container/Errors'
+import type { ReadyRuntimeError } from '../helpers/get-error-by-type'
+
 import { Errors } from './errors'
 import { withShadowPortal } from '../storybook/with-shadow-portal'
 import { ACTION_UNHANDLED_ERROR } from '../../../shared'
@@ -14,76 +17,87 @@ const meta: Meta<typeof Errors> = {
 export default meta
 type Story = StoryObj<typeof Errors>
 
-export const Default: Story = {
-  args: {
-    isAppDir: true,
-    errors: [
-      {
-        id: 1,
-        event: {
-          type: ACTION_UNHANDLED_ERROR,
-          reason: Object.assign(new Error('First error message'), {
-            __NEXT_ERROR_CODE: 'E001',
-          }),
-          componentStackFrames: [
-            {
-              file: 'app/page.tsx',
-              component: 'Home',
-              lineNumber: 10,
-              column: 5,
-              canOpenInEditor: true,
-            },
-          ],
-          frames: [
-            {
-              file: 'app/page.tsx',
-              methodName: 'Home',
-              arguments: [],
-              lineNumber: 10,
-              column: 5,
-            },
-          ],
-        },
-      },
-      {
-        id: 2,
-        event: {
-          type: ACTION_UNHANDLED_ERROR,
-          reason: Object.assign(new Error('Second error message'), {
-            __NEXT_ERROR_CODE: 'E002',
-          }),
-          frames: [],
+const errors: SupportedErrorEvent[] = [
+  {
+    id: 1,
+    event: {
+      type: ACTION_UNHANDLED_ERROR,
+      reason: Object.assign(new Error('First error message'), {
+        __NEXT_ERROR_CODE: 'E001',
+      }),
+      componentStackFrames: [
+        {
+          file: 'app/page.tsx',
+          component: 'Home',
+          lineNumber: 10,
+          column: 5,
+          canOpenInEditor: true,
         },
-      },
-      {
-        id: 3,
-        event: {
-          type: ACTION_UNHANDLED_ERROR,
-          reason: Object.assign(new Error('Third error message'), {
-            __NEXT_ERROR_CODE: 'E003',
-          }),
-          frames: [],
+      ],
+      frames: [
+        {
+          file: 'app/page.tsx',
+          methodName: 'Home',
+          arguments: [],
+          lineNumber: 10,
+          column: 5,
         },
-      },
-      {
-        id: 4,
-        event: {
-          type: ACTION_UNHANDLED_ERROR,
-          reason: Object.assign(new Error('Fourth error message'), {
-            __NEXT_ERROR_CODE: 'E004',
-          }),
-          frames: [],
-        },
-      },
-    ],
+      ],
+    },
+  },
+  {
+    id: 2,
+    event: {
+      type: ACTION_UNHANDLED_ERROR,
+      reason: Object.assign(new Error('Second error message'), {
+        __NEXT_ERROR_CODE: 'E002',
+      }),
+      frames: [],
+    },
+  },
+  {
+    id: 3,
+    event: {
+      type: ACTION_UNHANDLED_ERROR,
+      reason: Object.assign(new Error('Third error message'), {
+        __NEXT_ERROR_CODE: 'E003',
+      }),
+      frames: [],
+    },
+  },
+  {
+    id: 4,
+    event: {
+      type: ACTION_UNHANDLED_ERROR,
+      reason: Object.assign(new Error('Fourth error message'), {
+        __NEXT_ERROR_CODE: 'E004',
+      }),
+      frames: [],
+    },
+  },
+]
+
+const readyErrors: ReadyRuntimeError[] = [
+  {
+    id: 1,
+    runtime: true,
+    error: errors[0].event.reason,
+    frames: [],
+  },
+]
+
+export const Default: Story = {
+  args: {
+    errors,
+    readyErrors,
     versionInfo: {
       installed: '15.0.0',
       staleness: 'fresh',
     },
     hasStaticIndicator: true,
     isTurbopack: true,
+    debugInfo: { devtoolsFrontendUrl: undefined },
     onClose: () => {},
-    setReadyErrorsLength: () => {},
   },
 }
 
@@ -102,7 +116,6 @@ export const Minimized: Story = {
 
 export const WithHydrationWarning: Story = {
   args: {
-    isAppDir: true,
     errors: [
       {
         id: 1,
@@ -140,5 +153,8 @@ export const WithHydrationWarning: Story = {
         },
       },
     ],
+    readyErrors: [],
+    debugInfo: { devtoolsFrontendUrl: undefined },
+    onClose: () => {},
   },
 }
diff --git a/.../next/src/client/components/react-dev-overlay/_experimental/internal/container/errors.tsx b/.../next/src/client/components/react-dev-overlay/_experimental/internal/container/errors.tsx
@@ -27,7 +27,6 @@ export type ErrorsProps = {
   versionInfo: VersionInfo
   hasStaticIndicator: boolean
   debugInfo: DebugInfo
-  isErrorOverlayOpen: boolean
   onClose: () => void
 }
 
@@ -81,7 +80,6 @@ export function Errors({
   debugInfo,
   versionInfo,
   isTurbopack,
-  isErrorOverlayOpen: _,
   onClose,
 }: ErrorsProps) {
   useEffect(() => {