|
| 1 | +import type { OverlayState } from '../../../../shared' |
| 2 | +import type { DebugInfo } from '../../../../../shared/types' |
| 3 | +import type { ReadyRuntimeError } from '../../../../utils/get-error-by-type' |
| 4 | +import type { ErrorType } from '../../../errors/error-type-label/error-type-label' |
| 5 | + |
| 6 | +import { Suspense, useMemo, useState } from 'react' |
| 7 | + |
| 8 | +import { |
| 9 | + GenericErrorDescription, |
| 10 | + HydrationErrorDescription, |
| 11 | +} from '../../../../container/errors' |
| 12 | +import { EnvironmentNameLabel } from '../../../errors/environment-name-label/environment-name-label' |
| 13 | +import { ErrorMessage } from '../../../errors/error-message/error-message' |
| 14 | +import { ErrorOverlayToolbar } from '../../../errors/error-overlay-toolbar/error-overlay-toolbar' |
| 15 | +import { ErrorTypeLabel } from '../../../errors/error-type-label/error-type-label' |
| 16 | +import { IssueFeedbackButton } from '../../../errors/error-overlay-toolbar/issue-feedback-button' |
| 17 | +import { Terminal } from '../../../terminal' |
| 18 | +import { HotlinkedText } from '../../../hot-linked-text' |
| 19 | +import { PseudoHtmlDiff } from '../../../../container/runtime-error/component-stack-pseudo-html' |
| 20 | +import { useFrames } from '../../../../utils/get-error-by-type' |
| 21 | +import { CodeFrame } from '../../../code-frame/code-frame' |
| 22 | +import { CallStack } from '../../../call-stack/call-stack' |
| 23 | +import { NEXTJS_HYDRATION_ERROR_LINK } from '../../../../../shared/react-19-hydration-error' |
| 24 | +import { ErrorContentSkeleton } from '../../../../container/runtime-error/error-content-skeleton' |
| 25 | +import { css } from '../../../../utils/css' |
| 26 | + |
| 27 | +export function IssuesTabContent({ |
| 28 | + notes, |
| 29 | + buildError, |
| 30 | + hydrationWarning, |
| 31 | + errorDetails, |
| 32 | + activeError, |
| 33 | + errorCode, |
| 34 | + errorType, |
| 35 | + debugInfo, |
| 36 | +}: { |
| 37 | + notes: string | null |
| 38 | + buildError: OverlayState['buildError'] |
| 39 | + hydrationWarning: string | null |
| 40 | + errorDetails: { |
| 41 | + hydrationWarning: string | null |
| 42 | + notes: string | null |
| 43 | + reactOutputComponentDiff: string | null |
| 44 | + } |
| 45 | + activeError: ReadyRuntimeError |
| 46 | + errorCode: string | undefined |
| 47 | + errorType: ErrorType |
| 48 | + debugInfo: DebugInfo |
| 49 | +}) { |
| 50 | + if (buildError) { |
| 51 | + return <Terminal content={buildError} /> |
| 52 | + } |
| 53 | + |
| 54 | + const errorMessage = hydrationWarning ? ( |
| 55 | + <HydrationErrorDescription message={hydrationWarning} /> |
| 56 | + ) : ( |
| 57 | + <GenericErrorDescription error={activeError.error} /> |
| 58 | + ) |
| 59 | + |
| 60 | + return ( |
| 61 | + <div data-nextjs-devtools-panel-tab-issues-content-container> |
| 62 | + <div className="nextjs-container-errors-header"> |
| 63 | + <div |
| 64 | + className="nextjs__container_errors__error_title" |
| 65 | + // allow assertion in tests before error rating is implemented |
| 66 | + data-nextjs-error-code={errorCode} |
| 67 | + > |
| 68 | + <span data-nextjs-error-label-group> |
| 69 | + <ErrorTypeLabel errorType={errorType} /> |
| 70 | + {activeError.error.environmentName && ( |
| 71 | + <EnvironmentNameLabel |
| 72 | + environmentName={activeError.error.environmentName} |
| 73 | + /> |
| 74 | + )} |
| 75 | + </span> |
| 76 | + <ErrorOverlayToolbar |
| 77 | + error={activeError.error} |
| 78 | + debugInfo={debugInfo} |
| 79 | + // TODO: Move the button inside and remove the feedback on the footer of the error overlay. |
| 80 | + feedbackButton={ |
| 81 | + errorCode && <IssueFeedbackButton errorCode={errorCode} /> |
| 82 | + } |
| 83 | + /> |
| 84 | + </div> |
| 85 | + <ErrorMessage errorMessage={errorMessage} /> |
| 86 | + </div> |
| 87 | + <div className="error-overlay-notes-container"> |
| 88 | + {notes ? ( |
| 89 | + <> |
| 90 | + <p |
| 91 | + id="nextjs__container_errors__notes" |
| 92 | + className="nextjs__container_errors__notes" |
| 93 | + > |
| 94 | + {notes} |
| 95 | + </p> |
| 96 | + </> |
| 97 | + ) : null} |
| 98 | + {hydrationWarning ? ( |
| 99 | + <p |
| 100 | + id="nextjs__container_errors__link" |
| 101 | + className="nextjs__container_errors__link" |
| 102 | + > |
| 103 | + <HotlinkedText |
| 104 | + text={`See more info here: ${NEXTJS_HYDRATION_ERROR_LINK}`} |
| 105 | + /> |
| 106 | + </p> |
| 107 | + ) : null} |
| 108 | + </div> |
| 109 | + {errorDetails.reactOutputComponentDiff ? ( |
| 110 | + <PseudoHtmlDiff |
| 111 | + reactOutputComponentDiff={errorDetails.reactOutputComponentDiff || ''} |
| 112 | + /> |
| 113 | + ) : null} |
| 114 | + <Suspense fallback={<ErrorContentSkeleton />}> |
| 115 | + <RuntimeError key={activeError.id.toString()} error={activeError} /> |
| 116 | + </Suspense> |
| 117 | + </div> |
| 118 | + ) |
| 119 | +} |
| 120 | + |
| 121 | +/* Ported the content from container/runtime-error/index.tsx */ |
| 122 | +function RuntimeError({ error }: { error: ReadyRuntimeError }) { |
| 123 | + const [isIgnoreListOpen, setIsIgnoreListOpen] = useState(false) |
| 124 | + const frames = useFrames(error) |
| 125 | + |
| 126 | + const ignoredFramesTally = useMemo(() => { |
| 127 | + return frames.reduce((tally, frame) => tally + (frame.ignored ? 1 : 0), 0) |
| 128 | + }, [frames]) |
| 129 | + |
| 130 | + const firstFrame = useMemo(() => { |
| 131 | + const firstFirstPartyFrameIndex = frames.findIndex( |
| 132 | + (entry) => |
| 133 | + !entry.ignored && |
| 134 | + Boolean(entry.originalCodeFrame) && |
| 135 | + Boolean(entry.originalStackFrame) |
| 136 | + ) |
| 137 | + |
| 138 | + return frames[firstFirstPartyFrameIndex] ?? null |
| 139 | + }, [frames]) |
| 140 | + |
| 141 | + return ( |
| 142 | + <> |
| 143 | + {firstFrame && |
| 144 | + firstFrame.originalStackFrame && |
| 145 | + firstFrame.originalCodeFrame && ( |
| 146 | + <CodeFrame |
| 147 | + stackFrame={firstFrame.originalStackFrame} |
| 148 | + codeFrame={firstFrame.originalCodeFrame} |
| 149 | + /> |
| 150 | + )} |
| 151 | + |
| 152 | + {frames.length > 0 && ( |
| 153 | + <CallStack |
| 154 | + frames={frames} |
| 155 | + isIgnoreListOpen={isIgnoreListOpen} |
| 156 | + onToggleIgnoreList={() => setIsIgnoreListOpen(!isIgnoreListOpen)} |
| 157 | + ignoredFramesTally={ignoredFramesTally} |
| 158 | + /> |
| 159 | + )} |
| 160 | + </> |
| 161 | + ) |
| 162 | +} |
| 163 | + |
| 164 | +// The components in this file shares the style with the Error Overlay. |
| 165 | +export const DEVTOOLS_PANEL_TAB_ISSUES_CONTENT_STYLES = css` |
| 166 | + [data-nextjs-devtools-panel-tab-issues-content-container] { |
| 167 | + flex: 1; |
| 168 | + display: flex; |
| 169 | + flex-direction: column; |
| 170 | + overflow-y: auto; |
| 171 | + min-height: 0; |
| 172 | + padding: 14px; |
| 173 | + } |
| 174 | +` |
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?v=4&size=40){kind=avatar}
0 commit comments