use use-runtime-error hook

Author: devjiwonchoi

packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab.tsx

@@ -1,9 +1,7 @@
-import { Suspense, useMemo, useState } from 'react'
+import { Suspense, useMemo } from 'react'
 import {
   GenericErrorDescription,
-  getErrorTypeLabel,
   HydrationErrorDescription,
-  useErrorDetails,
 } from '../../../../container/errors'
 import { EnvironmentNameLabel } from '../../../errors/environment-name-label/environment-name-label'
 import { ErrorMessage } from '../../../errors/error-message/error-message'
@@ -15,7 +13,6 @@ import {
 } from '../../../../utils/get-error-by-type'
 import type { HydrationErrorState } from '../../../../../shared/hydration-error'
 import type { OverlayState } from '../../../../shared'
-import { extractNextErrorCode } from '../../../../../../lib/error-telemetry-utils'
 import { css } from '../../../../utils/css'
 import { getFrameSource } from '../../../../../shared/stack-frame'
 import { Terminal } from '../../../terminal'
@@ -24,6 +21,7 @@ import { NEXTJS_HYDRATION_ERROR_LINK } from '../../../../../shared/react-19-hydr
 import { PseudoHtmlDiff } from '../../../../container/runtime-error/component-stack-pseudo-html'
 import { CodeFrame } from '../../../code-frame/code-frame'
 import { CallStack } from '../../../call-stack/call-stack'
+import { useRuntimeError } from '../../../../hooks/use-runtime-error'
 
 export function IssuesTab({
   state,
@@ -34,39 +32,31 @@ export function IssuesTab({
   runtimeErrors: ReadyRuntimeError[]
   getSquashedHydrationErrorDetails: (error: Error) => HydrationErrorState | null
 }) {
-  const [activeIdx, setActiveIndex] = useState<number>(0)
-  const activeError = useMemo<ReadyRuntimeError | null>(
-    () =>
-      // TODO: correct fallback
-      runtimeErrors[activeIdx] ?? {
-        error: new Error('No error'),
-        type: 'runtime',
-      },
-    [activeIdx, runtimeErrors]
-  )
+  const {
+    isLoading,
+    errorCode,
+    errorType,
+    notes,
+    hydrationWarning,
+    activeIdx,
+    errorDetails,
+    activeError,
+    setActiveIndex,
+  } = useRuntimeError({ runtimeErrors, getSquashedHydrationErrorDetails })
+
+  if (isLoading) {
+    // TODO: better loading state
+    return null
+  }
 
   if (!activeError) {
     return null
   }
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const errorDetails = useErrorDetails(
-    activeError?.error,
-    getSquashedHydrationErrorDetails
-  )
-
-  const error = activeError?.error
-
-  const errorCode = extractNextErrorCode(error)
-  const errorType = getErrorTypeLabel(error, activeError.type)
-  // TOOD: May be better to always treat everything past the first blank line as notes
-  // We're currently only special casing hydration error messages.
-  const notes = errorDetails.notes
-  const hydrationWarning = errorDetails.hydrationWarning
   const errorMessage = hydrationWarning ? (
     <HydrationErrorDescription message={hydrationWarning} />
   ) : (
-    <GenericErrorDescription error={error} />
+    <GenericErrorDescription error={activeError.error} />
   )
 
   return (
@@ -96,11 +86,16 @@ export function IssuesTab({
           >
             <span data-nextjs-error-label-group>
               <ErrorTypeLabel errorType={errorType} />
-              {error.environmentName && (
-                <EnvironmentNameLabel environmentName={error.environmentName} />
+              {activeError.error.environmentName && (
+                <EnvironmentNameLabel
+                  environmentName={activeError.error.environmentName}
+                />
               )}
             </span>
-            <ErrorOverlayToolbar error={error} debugInfo={state.debugInfo} />
+            <ErrorOverlayToolbar
+              error={activeError.error}
+              debugInfo={state.debugInfo}
+            />
           </div>
           <ErrorMessage errorMessage={errorMessage} />
         </div>
@@ -218,7 +213,7 @@ function Foo({
   setActiveIndex,
 }: {
   runtimeError: ReadyRuntimeError
-  errorType: string
+  errorType: string | null
   idx: number
   activeIdx: number
   setActiveIndex: (idx: number) => void