Track errors where frames are not sourcemapped properly in the Redbox

vercel · Nov 24, 2024 · f8ee886 · f8ee886
1 parent f3b06b9
commit f8ee886
Show file tree

Hide file tree

Showing 49 changed files with 400 additions and 158 deletions.
diff --git a/test/development/acceptance-app/ReactRefreshLogBox-builtins.test.ts b/test/development/acceptance-app/ReactRefreshLogBox-builtins.test.ts
@@ -194,7 +194,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
       ])
     )
     const { session } = sandbox
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({ pageResponseCode: 500 })
 
     const source = await session.getRedboxSource()
     if (process.env.TURBOPACK) {

diff --git a/test/development/acceptance-app/ReactRefreshRegression.test.ts b/test/development/acceptance-app/ReactRefreshRegression.test.ts
@@ -277,7 +277,7 @@ describe('ReactRefreshRegression app', () => {
       `export default function () { throw new Error('boom'); }`
     )
 
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({ pageResponseCode: 500 })
 
     const source = await session.getRedboxSource()
     expect(source.split(/\r?\n/g).slice(2).join('\n')).toMatchInlineSnapshot(`
@@ -295,7 +295,7 @@ describe('ReactRefreshRegression app', () => {
       `export default function Page() { throw new Error('boom'); }`
     )
 
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({ pageResponseCode: 500 })
 
     const source = await session.getRedboxSource()
     expect(source.split(/\r?\n/g).slice(2).join('\n')).toMatchInlineSnapshot(`

diff --git a/test/development/acceptance-app/app-hmr-changes.test.ts b/test/development/acceptance-app/app-hmr-changes.test.ts
@@ -51,6 +51,8 @@ describe('Error overlay - RSC build errors', () => {
           await session.patch(pagePath, break2.replace('break 3', '<Hello />'))
 
           await session.patch(pagePath, break2)
+          // TODO: remove
+          console.log({ i })
           await session.assertHasRedbox()
 
           await session.patch(pagePath, break1)

diff --git a/test/development/acceptance-app/dynamic-error.test.ts b/test/development/acceptance-app/dynamic-error.test.ts
@@ -30,7 +30,9 @@ describe('dynamic = "error" in devmode', () => {
       '/server'
     )
     const { session } = sandbox
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({
+      fixmeStackFramesHaveBrokenSourcemaps: true,
+    })
     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
       `"[ Server ] Error: Route /server with \`dynamic = "error"\` couldn't be rendered statically because it used \`cookies\`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering"`
     )

diff --git a/test/development/acceptance-app/rsc-runtime-errors.test.ts b/test/development/acceptance-app/rsc-runtime-errors.test.ts
@@ -27,7 +27,9 @@ describe('Error overlay - RSC runtime errors', () => {
 
     const browser = await next.browser('/server')
 
-    await assertHasRedbox(browser)
+    await assertHasRedbox(browser, {
+      fixmeStackFramesHaveBrokenSourcemaps: true,
+    })
     const errorDescription = await getRedboxDescription(browser)
 
     expect(errorDescription).toContain(
@@ -69,7 +71,9 @@ describe('Error overlay - RSC runtime errors', () => {
     )
 
     const browser = await next.browser('/server')
-    await assertHasRedbox(browser)
+    await assertHasRedbox(browser, {
+      fixmeStackFramesHaveBrokenSourcemaps: true,
+    })
 
     const errorDescription = await getRedboxDescription(browser)
 
@@ -87,7 +91,9 @@ describe('Error overlay - RSC runtime errors', () => {
         `
     )
     const browser = await next.browser('/server')
-    await assertHasRedbox(browser)
+    await assertHasRedbox(browser, {
+      fixmeStackFramesHaveBrokenSourcemaps: true,
+    })
 
     const source = await getRedboxSource(browser)
     // Can show the original source code
@@ -106,7 +112,9 @@ describe('Error overlay - RSC runtime errors', () => {
     )
     const browser = await next.browser('/server')
 
-    await assertHasRedbox(browser)
+    await assertHasRedbox(browser, {
+      fixmeStackFramesHaveBrokenSourcemaps: true,
+    })
     const versionText = await getVersionCheckerText(browser)
     expect(versionText).toMatch(/Next.js \([\w.-]+\)/)
   })
@@ -122,7 +130,9 @@ describe('Error overlay - RSC runtime errors', () => {
     )
     const browser = await next.browser('/server')
 
-    await assertHasRedbox(browser)
+    await assertHasRedbox(browser, {
+      fixmeStackFramesHaveBrokenSourcemaps: true,
+    })
     const source = await getRedboxSource(browser)
     expect(source).toContain('app/server/page.js')
     expect(source).not.toContain('//app/server/page.js')

diff --git a/test/development/acceptance-app/server-components.test.ts b/test/development/acceptance-app/server-components.test.ts
@@ -520,7 +520,7 @@ describe('Error Overlay for server components', () => {
         ])
       )
       const { session } = sandbox
-      await session.assertHasRedbox()
+      await session.assertHasRedbox({ pageResponseCode: 500 })
       // In webpack when the message too long it gets truncated with `  | ` with new lines.
       // So we need to check for the first part of the message.
       const normalizedSource = await session.getRedboxSource()

diff --git a/test/development/acceptance-app/undefined-default-export.test.ts b/test/development/acceptance-app/undefined-default-export.test.ts
@@ -17,7 +17,10 @@ describe('Undefined default export', () => {
       '/specific-path/server'
     )
     const { session } = sandbox
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({
+      // TODO: Unclear why the test is navigating to the page twice
+      pageResponseCode: [500, 500],
+    })
     expect(await session.getRedboxDescription()).toInclude(
       'The default export is not a React Component in "/specific-path/server/page"'
     )
@@ -39,7 +42,9 @@ describe('Undefined default export', () => {
       '/will-not-found'
     )
     const { session } = sandbox
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({
+      pageResponseCode: 500,
+    })
     expect(await session.getRedboxDescription()).toInclude(
       'The default export is not a React Component in "/will-not-found/not-found"'
     )
@@ -55,7 +60,10 @@ describe('Undefined default export', () => {
     // Wait for the DOM node #__next to be present
     await browser.waitForElementByCss('#__next')
 
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({
+      // TODO: really?
+      fixmeStackFramesHaveBrokenSourcemaps: true,
+    })
     expect(await session.getRedboxDescription()).toInclude(
       'The default export is not a React Component in "/page"'
     )
@@ -73,7 +81,9 @@ describe('Undefined default export', () => {
       '/server-with-errors/page-export-initial-error'
     )
     const { session } = sandbox
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({
+      pageResponseCode: 500,
+    })
     expect(await session.getRedboxDescription()).toInclude(
       'The default export is not a React Component in "/server-with-errors/page-export-initial-error/page"'
     )

diff --git a/test/development/acceptance/ReactRefreshLogBox-app-doc.test.ts b/test/development/acceptance/ReactRefreshLogBox-app-doc.test.ts
@@ -18,7 +18,9 @@ describe.each(['default', 'turbo'])(
         new Map([['pages/_app.js', ``]])
       )
       const { session } = sandbox
-      await session.assertHasRedbox()
+      await session.assertHasRedbox({
+        pageResponseCode: 500,
+      })
       expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
         `"Error: The default export is not a React Component in page: "/_app""`
       )
@@ -41,7 +43,9 @@ describe.each(['default', 'turbo'])(
         new Map([['pages/_document.js', ``]])
       )
       const { session } = sandbox
-      await session.assertHasRedbox()
+      await session.assertHasRedbox({
+        pageResponseCode: 500,
+      })
       expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
         `"Error: The default export is not a React Component in page: "/_document""`
       )
@@ -92,7 +96,9 @@ describe.each(['default', 'turbo'])(
         ])
       )
       const { session } = sandbox
-      await session.assertHasRedbox()
+      await session.assertHasRedbox({
+        pageResponseCode: 500,
+      })
       const content = await session.getRedboxSource()
       const source = next.normalizeTestDirContent(content)
       if (process.env.TURBOPACK) {
@@ -178,7 +184,9 @@ describe.each(['default', 'turbo'])(
         ])
       )
       const { session } = sandbox
-      await session.assertHasRedbox()
+      await session.assertHasRedbox({
+        pageResponseCode: 500,
+      })
       const source = next.normalizeTestDirContent(
         await session.getRedboxSource()
       )

diff --git a/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts b/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts
@@ -198,7 +198,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => {
       ])
     )
     const { session } = sandbox
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({ pageResponseCode: 500 })
 
     const source = await session.getRedboxSource()
     if (process.env.TURBOPACK) {

diff --git a/test/development/acceptance/ReactRefreshLogBox.test.ts b/test/development/acceptance/ReactRefreshLogBox.test.ts
@@ -80,7 +80,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => {
       `
     )
 
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({ pageResponseCode: 500 })
     expect(await session.getRedboxSource()).toMatchSnapshot()
   })
 
@@ -644,7 +644,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => {
       `
     )
 
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({ pageResponseCode: 500 })
     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
       `"Error: {"a":1,"b":"x"}"`
     )
@@ -792,7 +792,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => {
       ])
     )
     const { session, browser } = sandbox
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({ pageResponseCode: 500 })
     let callStackFrames = await browser.elementsByCss(
       '[data-nextjs-call-stack-frame]'
     )
@@ -820,7 +820,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => {
       ])
     )
     const { session, browser } = sandbox
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({ pageResponseCode: 500 })
 
     // Should still show the errored line in source code
     const source = await session.getRedboxSource()

diff --git a/test/development/acceptance/ReactRefreshRegression.test.ts b/test/development/acceptance/ReactRefreshRegression.test.ts
@@ -281,7 +281,11 @@ describe('ReactRefreshRegression', () => {
     )
     expect(didNotReload).toBe(false)
 
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({
+      pageResponseCode:
+        // TODO: Unclear why the test is navigating to the page twice
+        [500, 500],
+    })
 
     const source = await session.getRedboxSource()
     expect(source.split(/\r?\n/g).slice(2).join('\n')).toMatchInlineSnapshot(`

diff --git a/test/development/app-dir/dynamic-error-trace/index.test.ts b/test/development/app-dir/dynamic-error-trace/index.test.ts
@@ -18,7 +18,9 @@ describe('app dir - dynamic error trace', () => {
   it('should show the error trace', async () => {
     const browser = await next.browser('/')
 
-    await assertHasRedbox(browser)
+    await assertHasRedbox(browser, {
+      fixmeStackFramesHaveBrokenSourcemaps: true,
+    })
 
     await expect(
       browser.hasElementByCssSelector(

diff --git a/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts b/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts
@@ -94,7 +94,7 @@ describe('Dynamic IO Dev Errors', () => {
       ])
     )
     const { browser, session } = sandbox
-    await assertHasRedbox(browser)
+    await assertHasRedbox(browser, { pageResponseCode: 500 })
     const redbox = {
       description: await getRedboxDescription(browser),
       source: await getRedboxSource(browser),

diff --git a/test/development/app-dir/next-after-app-invalid-usage/index.test.ts b/test/development/app-dir/next-after-app-invalid-usage/index.test.ts
@@ -29,7 +29,7 @@ describe('unstable_after() - invalid usages', () => {
   it('errors at compile time when used in a client module', async () => {
     const session = await next.browser('/invalid-in-client')
 
-    await assertHasRedbox(session)
+    await assertHasRedbox(session, { pageResponseCode: 500 })
     expect(await getRedboxSource(session)).toMatch(
       /You're importing a component that needs "?unstable_after"?\. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component\./
     )

diff --git a/test/development/app-dir/owner-stack-invalid-element-type/invalid-element-type.test.ts b/test/development/app-dir/owner-stack-invalid-element-type/invalid-element-type.test.ts
@@ -59,7 +59,9 @@ const isOwnerStackEnabled =
     it('should catch invalid element from a rsc component', async () => {
       const browser = await next.browser('/rsc')
 
-      await assertHasRedbox(browser)
+      await assertHasRedbox(browser, {
+        pageResponseCode: 500,
+      })
       const stackFramesContent = await getStackFramesContent(browser)
       const source = await getRedboxSource(browser)
 
@@ -96,7 +98,9 @@ const isOwnerStackEnabled =
     it('should catch invalid element from on ssr client component', async () => {
       const browser = await next.browser('/ssr')
 
-      await assertHasRedbox(browser)
+      await assertHasRedbox(browser, {
+        pageResponseCode: 500,
+      })
 
       const stackFramesContent = await getStackFramesContent(browser)
       const source = await getRedboxSource(browser)

diff --git a/...lopment/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts b/...lopment/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts
@@ -64,7 +64,9 @@ const isOwnerStackEnabled =
     it('should catch invalid element from a rsc component', async () => {
       const browser = await next.browser('/rsc')
 
-      await assertHasRedbox(browser)
+      await assertHasRedbox(browser, {
+        fixmeStackFramesHaveBrokenSourcemaps: true,
+      })
       const stackFramesContent = await getStackFramesContent(browser)
       const source = await getRedboxSource(browser)
 
@@ -106,7 +108,9 @@ const isOwnerStackEnabled =
     it('should catch invalid element from on ssr client component', async () => {
       const browser = await next.browser('/ssr')
 
-      await assertHasRedbox(browser)
+      await assertHasRedbox(browser, {
+        fixmeStackFramesHaveBrokenSourcemaps: true,
+      })
 
       const stackFramesContent = await getStackFramesContent(browser)
       const source = await getRedboxSource(browser)

diff --git a/test/development/app-dir/owner-stack/owner-stack.test.ts b/test/development/app-dir/owner-stack/owner-stack.test.ts
@@ -166,7 +166,7 @@ describe('app-dir - owner-stack', () => {
   it('should log stitched error for SSR errors', async () => {
     const browser = await next.browser('/ssr')
 
-    await assertHasRedbox(browser)
+    await assertHasRedbox(browser, { pageResponseCode: 500 })
 
     const stackFramesContent = await getStackFramesContent(browser)
     if (process.env.TURBOPACK) {

diff --git a/test/development/app-dir/serialize-circular-error/serialize-circular-error.test.ts b/test/development/app-dir/serialize-circular-error/serialize-circular-error.test.ts
@@ -12,7 +12,7 @@ describe('serialize-circular-error', () => {
 
   it('should serialize the object from server component in console correctly', async () => {
     const browser = await next.browser('/')
-    await assertHasRedbox(browser)
+    await assertHasRedbox(browser, { pageResponseCode: 500 })
 
     const description = await getRedboxDescription(browser)
     // React cannot serialize thrown objects with circular references

diff --git a/...r/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts b/...r/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts
@@ -12,7 +12,7 @@ describe('app-dir - server-component-next-dynamic-ssr-false', () => {
 
   it('should error when use dynamic ssr:false in server component', async () => {
     const browser = await next.browser('/')
-    await assertHasRedbox(browser)
+    await assertHasRedbox(browser, { pageResponseCode: 500 })
     const redbox = {
       description: await getRedboxDescription(browser),
       source: await getRedboxSource(browser),