From 4a3b2cdfc73bf2cd34b9d0a8dcaa6b4c29d8de88 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Mon, 5 Dec 2022 23:25:18 +0100 Subject: [PATCH 1/4] Display error digest if presented --- .../next/client/components/error-boundary.tsx | 15 +++++++++------ .../app/app/error/global-error-boundary/page.js | 4 +++- test/e2e/app-dir/index.test.ts | 8 ++++---- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/next/client/components/error-boundary.tsx b/packages/next/client/components/error-boundary.tsx index 2cb34ef2af63a23..dcd86964f393a45 100644 --- a/packages/next/client/components/error-boundary.tsx +++ b/packages/next/client/components/error-boundary.tsx @@ -70,7 +70,7 @@ export function ErrorBoundary({ return <>{children} } -const styles: { [k: string]: React.CSSProperties } = { +const styles = { error: { fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif', @@ -81,7 +81,6 @@ const styles: { [k: string]: React.CSSProperties } = { alignItems: 'center', justifyContent: 'center', }, - desc: { display: 'inline-block', textAlign: 'left', @@ -89,25 +88,29 @@ const styles: { [k: string]: React.CSSProperties } = { height: '49px', verticalAlign: 'middle', }, - h2: { + text: { fontSize: '14px', fontWeight: 'normal', lineHeight: '49px', margin: 0, padding: 0, }, -} +} as const -export function GlobalErrorComponent() { +export function GlobalErrorComponent({ error }: { error: any }) { return ( +
-

+

Application error: a client-side exception has occurred (see the browser console for more information).

+ {error?.digest && ( +

{`Error digest: ${error.digest}`}

+ )}
diff --git a/test/e2e/app-dir/app/app/error/global-error-boundary/page.js b/test/e2e/app-dir/app/app/error/global-error-boundary/page.js index a7801e4f117bef0..1c636a6edc16ac2 100644 --- a/test/e2e/app-dir/app/app/error/global-error-boundary/page.js +++ b/test/e2e/app-dir/app/app/error/global-error-boundary/page.js @@ -5,7 +5,9 @@ import { useState } from 'react' export default function Page() { const [clicked, setClicked] = useState(false) if (clicked) { - throw new Error('this is a test') + const e = new Error('this is a test') + e.digest = 'CUSTOM_DIGEST' + throw e } return (