Track errors where frames are not sourcemapped properly in the Redbox

test/development/acceptance-app/dynamic-error.test.ts

@@ -5,7 +5,7 @@ import path from 'path'
 import { outdent } from 'outdent'
 
 describe('dynamic = "error" in devmode', () => {
-  const { next } = nextTestSetup({
+  const { isTurbopack, next } = nextTestSetup({
     files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
   })
 
@@ -30,7 +30,9 @@ describe('dynamic = "error" in devmode', () => {
       '/server'
     )
     const { session } = sandbox
-    await session.assertHasRedbox()
+    await session.assertHasRedbox({
+      fixmeStackFramesHaveBrokenSourcemaps: isTurbopack,
+    })
     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"`
     )

test/development/acceptance-app/rsc-runtime-errors.test.ts

@@ -9,7 +9,7 @@ import {
 } from 'next-test-utils'
 
 describe('Error overlay - RSC runtime errors', () => {
-  const { next } = nextTestSetup({
+  const { isTurbopack, next } = nextTestSetup({
     files: new FileRef(path.join(__dirname, 'fixtures', 'rsc-runtime-errors')),
   })
 
@@ -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: isTurbopack,
+    })
 
     const errorDescription = await getRedboxDescription(browser)
 
@@ -106,7 +110,9 @@ describe('Error overlay - RSC runtime errors', () => {
     )
     const browser = await next.browser('/server')
 
-    await assertHasRedbox(browser)
+    await assertHasRedbox(browser, {
+      fixmeStackFramesHaveBrokenSourcemaps: isTurbopack,
+    })
     const versionText = await getVersionCheckerText(browser)
     expect(versionText).toMatch(/Next.js \([\w.-]+\)/)
   })
@@ -122,7 +128,9 @@ describe('Error overlay - RSC runtime errors', () => {
     )
     const browser = await next.browser('/server')
 
-    await assertHasRedbox(browser)
+    await assertHasRedbox(browser, {
+      fixmeStackFramesHaveBrokenSourcemaps: isTurbopack,
+    })
     const source = await getRedboxSource(browser)
     expect(source).toContain('app/server/page.js')
     expect(source).not.toContain('//app/server/page.js')

test/development/app-dir/dynamic-error-trace/index.test.ts

@@ -9,7 +9,7 @@ function normalizeStackTrace(trace) {
 }
 
 describe('app dir - dynamic error trace', () => {
-  const { next, skipped } = nextTestSetup({
+  const { isTurbopack, next, skipped } = nextTestSetup({
     files: __dirname,
     skipDeployment: true,
   })
@@ -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: isTurbopack,
+    })
 
     await expect(
       browser.hasElementByCssSelector(

test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts

@@ -47,7 +47,9 @@ describe('Dynamic IO Dev Errors', () => {
     const outputIndex = next.cliOutput.length
     const browser = await next.browser('/no-accessed-data')
 
-    await openRedbox(browser)
+    await openRedbox(browser, {
+      fixmeStackFramesHaveBrokenSourcemaps: isTurbopack,
+    })
 
     expect(stripAnsi(next.cliOutput.slice(outputIndex))).toContain(
       `\nError: Route "/no-accessed-data": ` +
@@ -94,6 +96,7 @@ describe('Dynamic IO Dev Errors', () => {
       ])
     )
     const { browser, session } = sandbox
+    // TODO: How to differentiate build errors which also cause 500
     await assertHasRedbox(browser)
     const redbox = {
       description: await getRedboxDescription(browser),

test/development/app-dir/next-after-app-invalid-usage/index.test.ts

@@ -29,6 +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')
 
+    // TODO: Should succeed
     await assertHasRedbox(session)
     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\./

test/development/app-dir/owner-stack-invalid-element-type/invalid-element-type.test.ts

@@ -15,7 +15,7 @@ const isOwnerStackEnabled =
 ;(isOwnerStackEnabled ? describe.skip : describe)(
   'app-dir - invalid-element-type',
   () => {
-    const { next } = nextTestSetup({
+    const { isTurbopack, next } = nextTestSetup({
       files: __dirname,
     })
 
@@ -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, {
+        fixmeStackFramesHaveBrokenSourcemaps: isTurbopack,
+      })
       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, {
+        fixmeStackFramesHaveBrokenSourcemaps: isTurbopack,
+      })
 
       const stackFramesContent = await getStackFramesContent(browser)
       const source = await getRedboxSource(browser)

test/development/app-dir/owner-stack/owner-stack.test.ts

@@ -166,6 +166,7 @@ describe('app-dir - owner-stack', () => {
   it('should log stitched error for SSR errors', async () => {
     const browser = await next.browser('/ssr')
 
+    // TODO: Should succeed
     await assertHasRedbox(browser)
 
     const stackFramesContent = await getStackFramesContent(browser)

test/development/app-dir/serialize-circular-error/serialize-circular-error.test.ts

@@ -12,6 +12,7 @@ describe('serialize-circular-error', () => {
 
   it('should serialize the object from server component in console correctly', async () => {
     const browser = await next.browser('/')
+    // TODO: false-positive
     await assertHasRedbox(browser)
 
     const description = await getRedboxDescription(browser)

test/development/app-dir/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts

@@ -12,6 +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('/')
+    // TODO: Should succeed
     await assertHasRedbox(browser)
     const redbox = {
       description: await getRedboxDescription(browser),

test/integration/app-dir-export/test/utils.ts

@@ -176,6 +176,7 @@ export async function runTests({
       if (isDev) {
         const url = dynamicPage ? '/another/first' : '/api/json'
         const browser = await webdriver(port, url)
+        // TODO: Should succeed
         await assertHasRedbox(browser)
         const header = await getRedboxHeader(browser)
         const source = await getRedboxSource(browser)

test/integration/config-output-export/test/index.test.ts

@@ -221,6 +221,7 @@ describe('config-output-export', () => {
       await killApp(app).catch(() => {})
       fs.rmSync(blog)
     }
+    // TODO: Should succeed
     await assertHasRedbox(browser)
     expect(await getRedboxHeader(browser)).toContain(
       'ISR cannot be used with "output: export".'
@@ -312,6 +313,7 @@ describe('config-output-export', () => {
       await killApp(app).catch(() => {})
       fs.rmSync(blog)
     }
+    // TODO: Should succeed
     await assertHasRedbox(browser)
     expect(await getRedboxHeader(browser)).toContain(
       'getServerSideProps cannot be used with "output: export".'
@@ -352,6 +354,7 @@ describe('config-output-export', () => {
         output: 'export',
       })
       browser = await webdriver(result.port, '/posts/one')
+      // TODO: Should succeed
       await assertHasRedbox(browser)
       expect(await getRedboxHeader(browser)).toContain(
         'getStaticPaths with "fallback: true" cannot be used with "output: export".'
@@ -396,6 +399,7 @@ describe('config-output-export', () => {
         output: 'export',
       })
       browser = await webdriver(result.port, '/posts/one')
+      // TODO: Should succeed
       await assertHasRedbox(browser)
       expect(await getRedboxHeader(browser)).toContain(
         'getStaticPaths with "fallback: blocking" cannot be used with "output: export".'

test/integration/next-image-legacy/base-path/test/index.test.ts

@@ -61,6 +61,8 @@ function getRatio(width, height) {
 }
 
 function runTests(mode) {
+  const isTurbopack = Boolean(process.env.TURBOPACK)
+
   it('should load the images', async () => {
     let browser = await webdriver(appPort, '/docs')
     try {
@@ -386,7 +388,9 @@ function runTests(mode) {
     it('should show invalid src error', async () => {
       const browser = await webdriver(appPort, '/docs/invalid-src')
 
-      await assertHasRedbox(browser)
+      await assertHasRedbox(browser, {
+        fixmeStackFramesHaveBrokenSourcemaps: isTurbopack,
+      })
       expect(await getRedboxHeader(browser)).toContain(
         'Invalid src prop (https://google.com/test.png) on `next/image`, hostname "google.com" is not configured under images in your `next.config.js`'
       )
@@ -398,7 +402,9 @@ function runTests(mode) {
         '/docs/invalid-src-proto-relative'
       )
 
-      await assertHasRedbox(browser)
+      await assertHasRedbox(browser, {
+        fixmeStackFramesHaveBrokenSourcemaps: isTurbopack,
+      })
       expect(await getRedboxHeader(browser)).toContain(
         'Failed to parse src "//assets.example.com/img.jpg" on `next/image`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)'
       )

test/integration/next-image-legacy/default/test/index.test.ts

@@ -824,6 +824,7 @@ function runTests(mode) {
     it('should show invalid src error', async () => {
       const browser = await webdriver(appPort, '/invalid-src')
 
+      // TODO: Should succeed
       await assertHasRedbox(browser)
       expect(await getRedboxHeader(browser)).toContain(
         'Invalid src prop (https://google.com/test.png) on `next/image`, hostname "google.com" is not configured under images in your `next.config.js`'
@@ -833,6 +834,7 @@ function runTests(mode) {
     it('should show invalid src error when protocol-relative', async () => {
       const browser = await webdriver(appPort, '/invalid-src-proto-relative')
 
+      // TODO: Should succeed
       await assertHasRedbox(browser)
       expect(await getRedboxHeader(browser)).toContain(
         'Failed to parse src "//assets.example.com/img.jpg" on `next/image`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)'
@@ -842,6 +844,7 @@ function runTests(mode) {
     it('should show error when string src and placeholder=blur and blurDataURL is missing', async () => {
       const browser = await webdriver(appPort, '/invalid-placeholder-blur')
 
+      // TODO: Should succeed
       await assertHasRedbox(browser)
       expect(await getRedboxHeader(browser)).toContain(
         `Image with src "/test.png" has "placeholder='blur'" property but is missing the "blurDataURL" property.`
@@ -851,6 +854,7 @@ function runTests(mode) {
     it('should show error when not numeric string width or height', async () => {
       const browser = await webdriver(appPort, '/invalid-width-or-height')
 
+      // TODO: Should succeed
       await assertHasRedbox(browser)
       expect(await getRedboxHeader(browser)).toContain(
         `Image with src "/test.jpg" has invalid "width" or "height" property. These should be numeric values.`
@@ -863,6 +867,7 @@ function runTests(mode) {
         '/invalid-placeholder-blur-static'
       )
 
+      // TODO: Should succeed
       await assertHasRedbox(browser)
       expect(await getRedboxHeader(browser)).toMatch(
         /Image with src "(.*)bmp" has "placeholder='blur'" property but is missing the "blurDataURL" property/

test/integration/next-image-new/base-path/test/index.test.js

@@ -141,6 +141,7 @@ function runTests(mode) {
     it('should show invalid src error', async () => {
       const browser = await webdriver(appPort, '/docs/invalid-src')
 
+      // TODO: Should succeed
       await assertHasRedbox(browser)
       expect(await getRedboxHeader(browser)).toContain(
         'Invalid src prop (https://google.com/test.png) on `next/image`, hostname "google.com" is not configured under images in your `next.config.js`'
@@ -153,6 +154,7 @@ function runTests(mode) {
         '/docs/invalid-src-proto-relative'
       )
 
+      // TODO: Should succeed
       await assertHasRedbox(browser)
       expect(await getRedboxHeader(browser)).toContain(
         'Failed to parse src "//assets.example.com/img.jpg" on `next/image`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)'

test/integration/next-image-new/export-config/test/index.test.ts

@@ -35,7 +35,9 @@ describe('next/image with output export config', () => {
         const browser = await webdriver(appPort, '/')
         const msg =
           "Image Optimization using the default loader is not compatible with `{ output: 'export' }`."
-        await assertHasRedbox(browser)
+        await assertHasRedbox(browser, {
+          fixmeStackFramesHaveBrokenSourcemaps: Boolean(process.env.TUBROPACK),
+        })
         expect(await getRedboxHeader(browser)).toContain(msg)
         expect(stderr).toContain(msg)
       })

test/integration/next-image-new/invalid-image-import/test/index.test.ts

@@ -22,7 +22,9 @@ function runTests({ isDev }) {
   it('should show error', async () => {
     if (isDev) {
       const browser = await webdriver(appPort, '/')
-      await assertHasRedbox(browser)
+      await assertHasRedbox(browser, {
+        fixmeStackFramesHaveBrokenSourcemaps: Boolean(process.env.TUBROPACK),
+      })
       expect(await getRedboxHeader(browser)).toMatch('Failed to compile')
       const source = await getRedboxSource(browser)
       if (process.env.TURBOPACK) {

test/integration/server-side-dev-errors/test/index.test.js

@@ -89,10 +89,12 @@ describe('server-side dev errors', () => {
           '\n> 6 |   missingVar;return {'
       )
 
+      // TODO: Should succeed
       await assertHasRedbox(browser)
 
       expect(await getRedboxSource(browser)).toContain('missingVar')
       await fs.writeFile(gspPage, content, { flush: true })
+      // TODO: Should succeed
       await assertHasRedbox(browser)
     } finally {
       await fs.writeFile(gspPage, content)
@@ -142,10 +144,12 @@ describe('server-side dev errors', () => {
           '\n> 6 |   missingVar;return {'
       )
 
+      // TODO: Should succeed
       await assertHasRedbox(browser)
 
       expect(await getRedboxSource(browser)).toContain('missingVar')
       await fs.writeFile(gsspPage, content)
+      // TODO: Should succeed
       await assertHasRedbox(browser)
     } finally {
       await fs.writeFile(gsspPage, content)
@@ -195,10 +199,12 @@ describe('server-side dev errors', () => {
           '\n> 6 |   missingVar;return {'
       )
 
+      // TODO: Should succeed
       await assertHasRedbox(browser)
 
       expect(await getRedboxSource(browser)).toContain('missingVar')
       await fs.writeFile(dynamicGsspPage, content)
+      // TODO: Should succeed
       await assertHasRedbox(browser)
     } finally {
       await fs.writeFile(dynamicGsspPage, content)
@@ -248,10 +254,12 @@ describe('server-side dev errors', () => {
           "\n> 2 |   missingVar;res.status(200).json({ hello: 'world' })"
       )
 
+      // TODO: Should succeed
       await assertHasRedbox(browser)
 
       expect(await getRedboxSource(browser)).toContain('missingVar')
       await fs.writeFile(apiPage, content)
+      // TODO: Should succeed
       await assertHasRedbox(browser)
     } finally {
       await fs.writeFile(apiPage, content)
@@ -304,10 +312,12 @@ describe('server-side dev errors', () => {
           '\n> 2 |   missingVar;res.status(200).json({ slug: req.query.slug })'
       )
 
+      // TODO: Should succeed
       await assertHasRedbox(browser)
 
       expect(await getRedboxSource(browser)).toContain('missingVar')
       await fs.writeFile(dynamicApiPage, content)
+      // TODO: Should succeed
       await assertHasRedbox(browser)
     } finally {
       await fs.writeFile(dynamicApiPage, content)