From 8c62af4807ec5bc413d72a4116dd257666bd1be4 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 24 Jul 2024 18:56:53 +0200 Subject: [PATCH 1/3] [not for merge] Allow parens in Server stack frames --- .../react-server-dom-turbopack-server.browser.development.js | 2 +- .../cjs/react-server-dom-turbopack-server.edge.development.js | 2 +- .../cjs/react-server-dom-turbopack-server.node.development.js | 2 +- ...ct-server-dom-turbopack-server.node.unbundled.development.js | 2 +- .../react-server-dom-turbopack-server.browser.development.js | 2 +- .../cjs/react-server-dom-turbopack-server.edge.development.js | 2 +- .../cjs/react-server-dom-turbopack-server.node.development.js | 2 +- ...ct-server-dom-turbopack-server.node.unbundled.development.js | 2 +- .../cjs/react-server-dom-webpack-server.browser.development.js | 2 +- .../cjs/react-server-dom-webpack-server.edge.development.js | 2 +- .../cjs/react-server-dom-webpack-server.node.development.js | 2 +- ...eact-server-dom-webpack-server.node.unbundled.development.js | 2 +- .../cjs/react-server-dom-webpack-server.browser.development.js | 2 +- .../cjs/react-server-dom-webpack-server.edge.development.js | 2 +- .../cjs/react-server-dom-webpack-server.node.development.js | 2 +- ...eact-server-dom-webpack-server.node.unbundled.development.js | 2 +- 16 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.development.js index 0330163097709..2565ce74a4044 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.browser.development.js @@ -3483,7 +3483,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, TEMPORARY_REFERENCE_TAG = Symbol.for("react.temporary.reference"), proxyHandlers = { get: function (target, name) { diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.development.js index cd2dd08c0d8eb..845aa36365c9c 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.edge.development.js @@ -3510,7 +3510,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, supportsRequestStorage = "function" === typeof AsyncLocalStorage, requestStorage = supportsRequestStorage ? new AsyncLocalStorage() : null, supportsComponentStorage = supportsRequestStorage, diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.development.js index 4f256de0bc3ea..d9526d6a59d77 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.development.js @@ -3533,7 +3533,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, requestStorage = new async_hooks.AsyncLocalStorage(), componentStorage = new async_hooks.AsyncLocalStorage(), TEMPORARY_REFERENCE_TAG = Symbol.for("react.temporary.reference"), diff --git a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.development.js index 2f90ab20102eb..371124def4b9f 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-server.node.unbundled.development.js @@ -3499,7 +3499,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, requestStorage = new async_hooks.AsyncLocalStorage(), componentStorage = new async_hooks.AsyncLocalStorage(), TEMPORARY_REFERENCE_TAG = Symbol.for("react.temporary.reference"), diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js index b861d63c96044..0f12f60dd6a6c 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js @@ -3115,7 +3115,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, TEMPORARY_REFERENCE_TAG = Symbol.for("react.temporary.reference"), proxyHandlers = { get: function (target, name) { diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js index 21288b169beca..23b7beab7bf57 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js @@ -3127,7 +3127,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, supportsRequestStorage = "function" === typeof AsyncLocalStorage, requestStorage = supportsRequestStorage ? new AsyncLocalStorage() : null, supportsComponentStorage = supportsRequestStorage, diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js index e0de9c93cfb83..f2e5ae09418e0 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js @@ -3159,7 +3159,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, requestStorage = new async_hooks.AsyncLocalStorage(), componentStorage = new async_hooks.AsyncLocalStorage(), TEMPORARY_REFERENCE_TAG = Symbol.for("react.temporary.reference"), diff --git a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js index c138d7c91c8a1..4798357ffddb3 100644 --- a/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +++ b/packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js @@ -3125,7 +3125,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, requestStorage = new async_hooks.AsyncLocalStorage(), componentStorage = new async_hooks.AsyncLocalStorage(), TEMPORARY_REFERENCE_TAG = Symbol.for("react.temporary.reference"), diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.development.js index 150b7b6c0b208..72fff054ddc96 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.browser.development.js @@ -3492,7 +3492,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, TEMPORARY_REFERENCE_TAG = Symbol.for("react.temporary.reference"), proxyHandlers = { get: function (target, name) { diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.development.js index 4cdf1dbcb7108..34ad397723ce3 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.development.js @@ -3515,7 +3515,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, supportsRequestStorage = "function" === typeof AsyncLocalStorage, requestStorage = supportsRequestStorage ? new AsyncLocalStorage() : null, supportsComponentStorage = supportsRequestStorage, diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.development.js index 87e94035db4c9..068ffaef5bc9b 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.development.js @@ -3538,7 +3538,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, requestStorage = new async_hooks.AsyncLocalStorage(), componentStorage = new async_hooks.AsyncLocalStorage(), TEMPORARY_REFERENCE_TAG = Symbol.for("react.temporary.reference"), diff --git a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.development.js index fbb4069a52218..2bbdeb092c70a 100644 --- a/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.node.unbundled.development.js @@ -3503,7 +3503,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, requestStorage = new async_hooks.AsyncLocalStorage(), componentStorage = new async_hooks.AsyncLocalStorage(), TEMPORARY_REFERENCE_TAG = Symbol.for("react.temporary.reference"), diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js index 77e6e86ad6638..e7e381237acd9 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js @@ -3124,7 +3124,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, TEMPORARY_REFERENCE_TAG = Symbol.for("react.temporary.reference"), proxyHandlers = { get: function (target, name) { diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js index 445729892e79d..3d9cfcf07714e 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js @@ -3132,7 +3132,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, supportsRequestStorage = "function" === typeof AsyncLocalStorage, requestStorage = supportsRequestStorage ? new AsyncLocalStorage() : null, supportsComponentStorage = supportsRequestStorage, diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js index 5da194eb55a0c..af97ab714dd25 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js @@ -3164,7 +3164,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, requestStorage = new async_hooks.AsyncLocalStorage(), componentStorage = new async_hooks.AsyncLocalStorage(), TEMPORARY_REFERENCE_TAG = Symbol.for("react.temporary.reference"), diff --git a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js index aad972198379c..063d64cbca6fd 100644 --- a/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +++ b/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js @@ -3129,7 +3129,7 @@ } }; var frameRegExp = - /^ {3} at (?:(.+) \(([^\)]+):(\d+):(\d+)\)|(?:async )?([^\)]+):(\d+):(\d+))$/, + /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/, requestStorage = new async_hooks.AsyncLocalStorage(), componentStorage = new async_hooks.AsyncLocalStorage(), TEMPORARY_REFERENCE_TAG = Symbol.for("react.temporary.reference"), From 4558b958a2a98f7c34639ab860c43d27c4b512cb Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 24 Jul 2024 20:46:11 +0200 Subject: [PATCH 2/3] Update assertions for improve stacks in error overlay --- .../acceptance-app/ReactRefreshLogBox.test.ts | 160 ++++++++++++------ .../app-dir/dynamic-error-trace/index.test.ts | 28 +-- 2 files changed, 123 insertions(+), 65 deletions(-) diff --git a/test/development/acceptance-app/ReactRefreshLogBox.test.ts b/test/development/acceptance-app/ReactRefreshLogBox.test.ts index 61d973e742bb2..36d35380c66d9 100644 --- a/test/development/acceptance-app/ReactRefreshLogBox.test.ts +++ b/test/development/acceptance-app/ReactRefreshLogBox.test.ts @@ -777,39 +777,24 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => { await cleanup() }) - test.each([ - [ - 'client', - new Map([ - [ - 'app/page.js', - outdent` - 'use client' - export default function Page() { - if (typeof window !== 'undefined') { - throw new Error('Client error') - } - return null - } - `, - ], - ]), - ], - [ - 'server', + test('Call stack count for client error', async () => { + const { session, browser, cleanup } = await sandbox( + next, new Map([ [ 'app/page.js', outdent` - export default function Page() { - throw new Error('Server error') - } - `, + 'use client' + export default function Page() { + if (typeof window !== 'undefined') { + throw new Error('Client error') + } + return null + } + `, ], - ]), - ], - ])('Call stack count is correct for %s error', async (_, fixture) => { - const { session, browser, cleanup } = await sandbox(next, fixture) + ]) + ) await session.assertHasRedbox() @@ -832,6 +817,47 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => { await cleanup() }) + test('Call stack for server error', async () => { + const { session, browser, cleanup } = await sandbox( + next, + new Map([ + [ + 'app/page.js', + outdent` + export default function Page() { + throw new Error('Server error') + } + `, + ], + ]) + ) + + try { + await session.assertHasRedbox() + + // Should still show the errored line in source code + const source = await session.getRedboxSource() + expect(source).toContain('app/page.js') + expect(source).toContain(`throw new Error('Server error')`) + + await expect( + browser.hasElementByCssSelector( + '[data-nextjs-data-runtime-error-collapsed-action]' + ) + ).resolves.toEqual(false) + + const stackFrameElements = await browser.elementsByCss( + '[data-nextjs-call-stack-frame]' + ) + const stackFrames = await Promise.all( + stackFrameElements.map((f) => f.innerText()) + ) + expect(stackFrames).toEqual([]) + } finally { + await cleanup() + } + }) + test('should hide unrelated frames in stack trace with unknown anonymous calls', async () => { const { session, browser, cleanup } = await sandbox( next, @@ -852,18 +878,38 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => { ], ]) ) - await session.assertHasRedbox() - await expandCallStack(browser) - let callStackFrames = await browser.elementsByCss( - '[data-nextjs-call-stack-frame]' - ) - const text = ( - await Promise.all(callStackFrames.map((f) => f.innerText())) - ).join('') - expect(text).not.toContain('') - expect(text).toContain('app/page.js') - await cleanup() + try { + await session.assertHasRedbox() + + // Should still show the errored line in source code + const source = await session.getRedboxSource() + expect(source).toContain('app/page.js') + expect(source).toContain( + `throw new Error("This is an error from an anonymous function")` + ) + + await expect( + browser.hasElementByCssSelector( + '[data-nextjs-data-runtime-error-collapsed-action]' + ) + ).resolves.toEqual(false) + + const stackFrameElements = await browser.elementsByCss( + '[data-nextjs-call-stack-frame]' + ) + const stackFrames = await Promise.all( + stackFrameElements.map((f) => f.innerText()) + ) + expect(stackFrames).toEqual([ + outdent` + Page + app/page.js (5:5) + `, + ]) + } finally { + await cleanup() + } }) test('should hide unrelated frames in stack trace with nodejs internal calls', async () => { @@ -881,24 +927,30 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => { ]) ) - await session.assertHasRedbox() - await expandCallStack(browser) - - // Should still show the errored line in source code - const source = await session.getRedboxSource() - expect(source).toContain('app/page.js') - expect(source).toContain(`new URL("/", "invalid")`) + try { + await session.assertHasRedbox() - await expandCallStack(browser) - const callStackFrames = await browser.elementsByCss( - '[data-nextjs-call-stack-frame]' - ) - const texts = await Promise.all(callStackFrames.map((f) => f.innerText())) + // Should still show the errored line in source code + const source = await session.getRedboxSource() + expect(source).toContain('app/page.js') + expect(source).toContain(`new URL("/", "invalid")`) - expect(texts.filter((t) => t.includes('node:internal'))).toHaveLength(0) - expect(texts.filter((t) => t.includes('node:async_hooks'))).toHaveLength(0) + await expect( + browser.hasElementByCssSelector( + '[data-nextjs-data-runtime-error-collapsed-action]' + ) + ).resolves.toEqual(false) - await cleanup() + const stackFrameElements = await browser.elementsByCss( + '[data-nextjs-call-stack-frame]' + ) + const stackFrames = await Promise.all( + stackFrameElements.map((f) => f.innerText()) + ) + expect(stackFrames).toEqual([]) + } finally { + await cleanup() + } }) test('Server component errors should open up in fullscreen', async () => { diff --git a/test/development/app-dir/dynamic-error-trace/index.test.ts b/test/development/app-dir/dynamic-error-trace/index.test.ts index 9a8e414d6b32f..b1ec25d8b3b7e 100644 --- a/test/development/app-dir/dynamic-error-trace/index.test.ts +++ b/test/development/app-dir/dynamic-error-trace/index.test.ts @@ -1,15 +1,10 @@ import { nextTestSetup } from 'e2e-utils' import { assertHasRedbox, - getRedboxCallStack, shouldRunTurboDevTest, - expandCallStack, getRedboxSource, } from 'next-test-utils' -const isPPREnabled = process.env.__NEXT_EXPERIMENTAL_PPR === 'true' -const gateNotReactExperimental = isPPREnabled ? it.failing : it - describe('app dir - dynamic error trace', () => { const { next, skipped } = nextTestSetup({ files: __dirname, @@ -30,17 +25,28 @@ describe('app dir - dynamic error trace', () => { }) if (skipped) return - gateNotReactExperimental('should show the error trace', async () => { + it('should show the error trace', async () => { const browser = await next.browser('/') + await assertHasRedbox(browser) - await expandCallStack(browser) - const callStack = await getRedboxCallStack(browser) - // eslint-disable-next-line jest/no-standalone-expect -- this is a test - expect(callStack).toContain('node_modules/headers-lib/index.mjs') + await expect( + browser.hasElementByCssSelector( + '[data-nextjs-data-runtime-error-collapsed-action]' + ) + ).resolves.toEqual(false) + + const stackFrameElements = await browser.elementsByCss( + '[data-nextjs-call-stack-frame]' + ) + const stackFrames = await Promise.all( + stackFrameElements.map((f) => f.innerText()) + ) + expect(stackFrames).toEqual([]) const source = await getRedboxSource(browser) // eslint-disable-next-line jest/no-standalone-expect -- this is a test - expect(source).toContain('app/lib.js') + expect(source).toContain('app/lib.js (4:13) @ useHeaders') + expect(source).toContain(`useHeaders()`) }) }) From 2223469af095947b99e52f8ce71244b307252a55 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 24 Jul 2024 23:18:23 +0200 Subject: [PATCH 3/3] Update tests with Flight implementation details --- test/e2e/app-dir/app-css/index.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts index 8ea56a4210b39..5cafffe6ccb76 100644 --- a/test/e2e/app-dir/app-css/index.test.ts +++ b/test/e2e/app-dir/app-css/index.test.ts @@ -488,8 +488,8 @@ describe('app dir - css', () => { // And there is one match for the not found style if (isPPREnabledByDefault) { expect(matches).toEqual([ - // string split across chunks. - '/_next/static/css/app/css/css-dupl"])