From 6a0102a1aed1e08904c448ddb84157dca2310c23 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Thu, 7 Nov 2024 17:04:41 +0100 Subject: [PATCH 1/2] test: snapshot the captured console errors --- .../app/browser/event/page.js | 13 + .../app/browser/render-loop/page.js | 8 + .../app/browser/render/page.js | 6 + .../app/layout.js | 7 + .../app/rsc/page.js | 4 + .../app/ssr-error-instance/page.js | 6 + .../app/ssr/page.js | 8 + .../capture-console-error-owner-stack.test.ts | 314 ++++++++++++++++++ .../next.config.js | 10 + .../app/ssr-error-instance/page.js | 6 + .../capture-console-error/app/ssr/page.js | 2 - .../capture-console-error.test.ts | 90 ++++- test/lib/next-test-utils.ts | 20 ++ 13 files changed, 474 insertions(+), 20 deletions(-) create mode 100644 test/development/app-dir/capture-console-error-owner-stack/app/browser/event/page.js create mode 100644 test/development/app-dir/capture-console-error-owner-stack/app/browser/render-loop/page.js create mode 100644 test/development/app-dir/capture-console-error-owner-stack/app/browser/render/page.js create mode 100644 test/development/app-dir/capture-console-error-owner-stack/app/layout.js create mode 100644 test/development/app-dir/capture-console-error-owner-stack/app/rsc/page.js create mode 100644 test/development/app-dir/capture-console-error-owner-stack/app/ssr-error-instance/page.js create mode 100644 test/development/app-dir/capture-console-error-owner-stack/app/ssr/page.js create mode 100644 test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts create mode 100644 test/development/app-dir/capture-console-error-owner-stack/next.config.js create mode 100644 test/development/app-dir/capture-console-error/app/ssr-error-instance/page.js diff --git a/test/development/app-dir/capture-console-error-owner-stack/app/browser/event/page.js b/test/development/app-dir/capture-console-error-owner-stack/app/browser/event/page.js new file mode 100644 index 0000000000000..17069f0d0ceb4 --- /dev/null +++ b/test/development/app-dir/capture-console-error-owner-stack/app/browser/event/page.js @@ -0,0 +1,13 @@ +'use client' + +export default function Page() { + return ( + + ) +} diff --git a/test/development/app-dir/capture-console-error-owner-stack/app/browser/render-loop/page.js b/test/development/app-dir/capture-console-error-owner-stack/app/browser/render-loop/page.js new file mode 100644 index 0000000000000..52817bb4e8941 --- /dev/null +++ b/test/development/app-dir/capture-console-error-owner-stack/app/browser/render-loop/page.js @@ -0,0 +1,8 @@ +'use client' + +export default function Page() { + for (let i = 0; i < 3; i++) { + console.error('trigger an console.error in loop of render') + } + return

render

+} diff --git a/test/development/app-dir/capture-console-error-owner-stack/app/browser/render/page.js b/test/development/app-dir/capture-console-error-owner-stack/app/browser/render/page.js new file mode 100644 index 0000000000000..79fe51b77f328 --- /dev/null +++ b/test/development/app-dir/capture-console-error-owner-stack/app/browser/render/page.js @@ -0,0 +1,6 @@ +'use client' + +export default function Page() { + console.error('trigger an console.error in render') + return

render

+} diff --git a/test/development/app-dir/capture-console-error-owner-stack/app/layout.js b/test/development/app-dir/capture-console-error-owner-stack/app/layout.js new file mode 100644 index 0000000000000..a3a86a5ca1e12 --- /dev/null +++ b/test/development/app-dir/capture-console-error-owner-stack/app/layout.js @@ -0,0 +1,7 @@ +export default function Root({ children }) { + return ( + + {children} + + ) +} diff --git a/test/development/app-dir/capture-console-error-owner-stack/app/rsc/page.js b/test/development/app-dir/capture-console-error-owner-stack/app/rsc/page.js new file mode 100644 index 0000000000000..b65a92a630b18 --- /dev/null +++ b/test/development/app-dir/capture-console-error-owner-stack/app/rsc/page.js @@ -0,0 +1,4 @@ +export default function Page() { + console.error(new Error('boom')) + return

rsc

+} diff --git a/test/development/app-dir/capture-console-error-owner-stack/app/ssr-error-instance/page.js b/test/development/app-dir/capture-console-error-owner-stack/app/ssr-error-instance/page.js new file mode 100644 index 0000000000000..ad2f042a8e946 --- /dev/null +++ b/test/development/app-dir/capture-console-error-owner-stack/app/ssr-error-instance/page.js @@ -0,0 +1,6 @@ +'use client' + +export default function Page() { + console.error(new Error('page error')) + return

ssr

+} diff --git a/test/development/app-dir/capture-console-error-owner-stack/app/ssr/page.js b/test/development/app-dir/capture-console-error-owner-stack/app/ssr/page.js new file mode 100644 index 0000000000000..7a99c169793f1 --- /dev/null +++ b/test/development/app-dir/capture-console-error-owner-stack/app/ssr/page.js @@ -0,0 +1,8 @@ +'use client' + +export default function Page() { + console.error( + 'ssr console error:' + (typeof window === 'undefined' ? 'server' : 'client') + ) + return

ssr

+} diff --git a/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts b/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts new file mode 100644 index 0000000000000..35434130ff896 --- /dev/null +++ b/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts @@ -0,0 +1,314 @@ +import { nextTestSetup } from 'e2e-utils' +import { + assertHasRedbox, + getRedboxCallStack, + getRedboxDescription, + getRedboxTitle, + getRedboxSource, + getRedboxTotalErrorCount, + waitForAndOpenRuntimeError, +} from 'next-test-utils' + +async function getRedboxResult(browser: any) { + const title = await getRedboxTitle(browser) + const description = await getRedboxDescription(browser) + const callStacks = await getRedboxCallStack(browser) + const count = await getRedboxTotalErrorCount(browser) + const source = await getRedboxSource(browser) + const result = { + title, + count, + source, + description, + callStacks, + } + return result +} +describe('app-dir - capture-console-error-owner-stack', () => { + const { next } = nextTestSetup({ + files: __dirname, + }) + + it('should capture browser console error and format the error message', async () => { + const browser = await next.browser('/browser/event') + await browser.elementByCss('button').click() + + await waitForAndOpenRuntimeError(browser) + await assertHasRedbox(browser) + + const result = await getRedboxResult(browser) + + if (process.env.TURBOPACK) { + expect(result).toMatchInlineSnapshot(` + { + "callStacks": "Page + app/browser/event/page.js (5:5)", + "count": 1, + "description": "trigger an console ", + "source": "app/browser/event/page.js (7:17) @ onClick + + 5 |