Skip to content

Commit

Permalink
[DevOverlay]: enable by default
Browse files Browse the repository at this point in the history
  • Loading branch information
@ztanner
ztanner committed Feb 11, 2025
1 parent 2c3562d commit d308155
Show file tree
Hide file tree
Showing 33 changed files with 530 additions and 468 deletions.
6 changes: 3 additions & 3 deletions .github/workflows/build_and_test.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -581,7 +581,7 @@ jobs:
uses: ./.github/workflows/build_reusable.yml
with:
nodeVersion: 18.18.2
afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" node run-tests.js --timings -c ${TEST_CONCURRENCY} --type integration
afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=false NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" node run-tests.js --timings -c ${TEST_CONCURRENCY} --type integration
stepName: 'test-ppr-integration'
secrets: inherit

Expand All @@ -596,7 +596,7 @@ jobs:
group: [1/6, 2/6, 3/6, 4/6, 5/6, 6/6]
uses: ./.github/workflows/build_reusable.yml
with:
afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=dev node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type development
afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=false NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=dev node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type development
stepName: 'test-ppr-dev-${{ matrix.group }}'
secrets: inherit

Expand All @@ -611,7 +611,7 @@ jobs:
group: [1/7, 2/7, 3/7, 4/7, 5/7, 6/7, 7/7]
uses: ./.github/workflows/build_reusable.yml
with:
afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=start node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type production
afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=false NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=start node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type production
stepName: 'test-ppr-prod-${{ matrix.group }}'
secrets: inherit

Expand Down
1 change: 1 addition & 0 deletions ...rlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,7 @@ function DevToolsPopover({

<div className="footer">
<MenuItem
data-hide-dev-tools
label="Hide Dev Tools"
value={<HideShortcut />}
onClick={hide}
Expand Down
2 changes: 1 addition & 1 deletion packages/next/src/server/config-shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1253,7 +1253,7 @@ export const defaultConfig: NextConfig = {
staticGenerationMinPagesPerWorker: 25,
dynamicIO: false,
inlineCss: false,
newDevOverlay: false,
newDevOverlay: true,
streamingMetadata: false,
htmlLimitedBots: undefined,
useCache: undefined,
Expand Down
4 changes: 2 additions & 2 deletions packages/next/src/server/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -923,8 +923,8 @@ function assignDefaults(
// TODO(jiwon): remove once we've made new UI default
// Enable reactOwnerStack when newDevOverlay is enabled to have
// better call stack output in the new UI.
if (process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY === 'true') {
result.experimental.newDevOverlay = true
if (process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY === 'false') {
result.experimental.newDevOverlay = false
}
if (result.experimental.newDevOverlay) {
result.experimental.reactOwnerStack = true
Expand Down
14 changes: 13 additions & 1 deletion run-tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,25 @@ const ENDGROUP = process.env.CI ? '##[endgroup]' : ''

const externalTestsFilter = getTestFilter()

// TODO(new-dev-overlay): Remove this once old dev overlay fork is removed
if (!process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY) {
console.log('Setting __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY to true')
process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY = 'true'
} else {
console.log(
'__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY is already set to',
process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY
)
}

const timings = []
const DEFAULT_NUM_RETRIES = 2
const DEFAULT_CONCURRENCY = 2
const RESULTS_EXT = `.results.json`
const isTestJob = !!process.env.NEXT_TEST_JOB
// Check env to see if test should continue even if some of test fails
const shouldContinueTestsOnError = !!process.env.NEXT_TEST_CONTINUE_ON_ERROR
// const shouldContinueTestsOnError = !!process.env.NEXT_TEST_CONTINUE_ON_ERROR
const shouldContinueTestsOnError = true
// Check env to load a list of test paths to skip retry. This is to be used in conjunction with NEXT_TEST_CONTINUE_ON_ERROR,
// When try to run all of the tests regardless of pass / fail and want to skip retrying `known` failed tests.
// manifest should be a json file with an array of test paths.
Expand Down
152 changes: 76 additions & 76 deletions test/development/acceptance-app/ReactRefreshLogBox-builtins.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,27 +50,27 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
await session.assertHasRedbox()
if (process.env.TURBOPACK) {
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
"./node_modules/my-package/index.js:1:13
Module not found: Can't resolve 'dns'
> 1 | const dns = require('dns')
| ^^^^^^^^^^^^^^
2 | module.exports = dns
"./node_modules/my-package/index.js (1:13)
Module not found: Can't resolve 'dns'
> 1 | const dns = require('dns')
| ^^^^^^^^^^^^^^
2 | module.exports = dns
https://nextjs.org/docs/messages/module-not-found"
https://nextjs.org/docs/messages/module-not-found"
`)
} else {
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
"./node_modules/my-package/index.js:1:1
Module not found: Can't resolve 'dns'
> 1 | const dns = require('dns')
| ^
2 | module.exports = dns
"./node_modules/my-package/index.js (1:1)
Module not found: Can't resolve 'dns'
> 1 | const dns = require('dns')
| ^
2 | module.exports = dns
https://nextjs.org/docs/messages/module-not-found
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./index.js
./app/page.js"
Import trace for requested module:
./index.js
./app/page.js"
`)
}
})
Expand Down Expand Up @@ -98,30 +98,30 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
const source = await session.getRedboxSource()
if (process.env.TURBOPACK) {
expect(source).toMatchInlineSnapshot(`
"./index.js:1:1
Module not found: Can't resolve 'b'
> 1 | import Comp from 'b'
| ^^^^^^^^^^^^^^^^^^^^
2 | export default function Oops() {
3 | return (
4 | <div>
https://nextjs.org/docs/messages/module-not-found"
"./index.js (1:1)
Module not found: Can't resolve 'b'
> 1 | import Comp from 'b'
| ^^^^^^^^^^^^^^^^^^^^
2 | export default function Oops() {
3 | return (
4 | <div>
https://nextjs.org/docs/messages/module-not-found"
`)
} else {
expect(source).toMatchInlineSnapshot(`
"./index.js:1:1
Module not found: Can't resolve 'b'
> 1 | import Comp from 'b'
| ^
2 | export default function Oops() {
3 | return (
4 | <div>
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./app/page.js"
"./index.js (1:1)
Module not found: Can't resolve 'b'
> 1 | import Comp from 'b'
| ^
2 | export default function Oops() {
3 | return (
4 | <div>
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./app/page.js"
`)
}
})
Expand Down Expand Up @@ -150,29 +150,29 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
const source = await session.getRedboxSource()
if (process.env.TURBOPACK) {
expect(source).toMatchInlineSnapshot(`
"./app/page.js:2:1
Module not found: Can't resolve 'b'
1 | 'use client'
> 2 | import Comp from 'b'
| ^^^^^^^^^^^^^^^^^^^^
3 | export default function Oops() {
4 | return (
5 | <div>
https://nextjs.org/docs/messages/module-not-found"
"./app/page.js (2:1)
Module not found: Can't resolve 'b'
1 | 'use client'
> 2 | import Comp from 'b'
| ^^^^^^^^^^^^^^^^^^^^
3 | export default function Oops() {
4 | return (
5 | <div>
https://nextjs.org/docs/messages/module-not-found"
`)
} else {
expect(source).toMatchInlineSnapshot(`
"./app/page.js:2:1
Module not found: Can't resolve 'b'
1 | 'use client'
> 2 | import Comp from 'b'
| ^
3 | export default function Oops() {
4 | return (
5 | <div>
https://nextjs.org/docs/messages/module-not-found"
"./app/page.js (2:1)
Module not found: Can't resolve 'b'
1 | 'use client'
> 2 | import Comp from 'b'
| ^
3 | export default function Oops() {
4 | return (
5 | <div>
https://nextjs.org/docs/messages/module-not-found"
`)
}
})
Expand All @@ -199,29 +199,29 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
const source = await session.getRedboxSource()
if (process.env.TURBOPACK) {
expect(source).toMatchInlineSnapshot(`
"./app/page.js:2:1
Module not found: Can't resolve './non-existent.css'
1 | 'use client'
> 2 | import './non-existent.css'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 | export default function Page(props) {
4 | return <p>index page</p>
5 | }
https://nextjs.org/docs/messages/module-not-found"
"./app/page.js (2:1)
Module not found: Can't resolve './non-existent.css'
1 | 'use client'
> 2 | import './non-existent.css'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 | export default function Page(props) {
4 | return <p>index page</p>
5 | }
https://nextjs.org/docs/messages/module-not-found"
`)
} else {
expect(source).toMatchInlineSnapshot(`
"./app/page.js:2:1
Module not found: Can't resolve './non-existent.css'
1 | 'use client'
> 2 | import './non-existent.css'
| ^
3 | export default function Page(props) {
4 | return <p>index page</p>
5 | }
https://nextjs.org/docs/messages/module-not-found"
"./app/page.js (2:1)
Module not found: Can't resolve './non-existent.css'
1 | 'use client'
> 2 | import './non-existent.css'
| ^
3 | export default function Page(props) {
4 | return <p>index page</p>
5 | }
https://nextjs.org/docs/messages/module-not-found"
`)
}
await session.patch(
Expand Down
42 changes: 17 additions & 25 deletions test/development/acceptance-app/ReactRefreshLogBox.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
import { createSandbox } from 'development-sandbox'
import { FileRef, nextTestSetup } from 'e2e-utils'
import {
check,
describeVariants as describe,
getStackFramesContent,
retry,
getRedboxCallStack,
getToastErrorCount,
} from 'next-test-utils'
import path from 'path'
import { outdent } from 'outdent'
Expand Down Expand Up @@ -220,7 +220,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
const source = next.normalizeTestDirContent(await session.getRedboxSource())
if (isTurbopack) {
expect(source).toEqual(outdent`
./index.js:7:1
./index.js (7:1)
Parsing ecmascript source code failed
5 | div
6 | )
Expand Down Expand Up @@ -351,7 +351,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
await session.assertHasRedbox()
const source = await session.getRedboxSource()
expect(source).toMatch(
isTurbopack ? './index.module.css:1:9' : './index.module.css:1:1'
isTurbopack ? './index.module.css (1:9)' : './index.module.css (1:1)'
)
if (!isTurbopack) {
expect(source).toMatch('Syntax error: ')
Expand Down Expand Up @@ -735,23 +735,15 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
await session.patch('index.js', file)

// Unhandled error and rejection in setTimeout
expect(
await browser.waitForElementByCss('.nextjs-toast-errors').text()
).toBe('2 issues')
expect(await getToastErrorCount(browser)).toBe(2)

// Unhandled error in event handler
await browser.elementById('unhandled-error').click()
await check(
() => browser.elementByCss('.nextjs-toast-errors').text(),
/3 issues/
)
expect(await getToastErrorCount(browser)).toBe(3)

// Unhandled rejection in event handler
await browser.elementById('unhandled-rejection').click()
await check(
() => browser.elementByCss('.nextjs-toast-errors').text(),
/4 issues/
)
expect(await getToastErrorCount(browser)).toBe(4)
await session.assertNoRedbox()

// Add Component error
Expand Down Expand Up @@ -1059,7 +1051,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
await session.assertHasRedbox()
if (isTurbopack) {
expect(await session.getRedboxSource()).toEqual(outdent`
./app/styles2.css:1:2
./app/styles2.css (1:2)
Module not found: Can't resolve './boom.css'
> 1 | @import "./boom.css"
| ^
Expand Down Expand Up @@ -1245,16 +1237,16 @@ export default function Home() {
} else {
// FIXME: Webpack stack frames are not source mapped
expect(stackFrames).toMatchInlineSnapshot(`
"at eval (app/utils.ts (1:7))
at ./app/utils.ts ()
at options.factory ()
at __webpack_require__ ()
at fn ()
at eval ()
at ./app/page.js ()
at options.factory ()
at __webpack_require__ ()
at fn ()"
"at eval (app/utils.ts (1:7))
at ./app/utils.ts (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/app/page.js (39:1))
at options.factory (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/webpack.js (700:31))
at __webpack_require__ (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/webpack.js (37:33))
at fn (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/webpack.js (357:21))
at eval (./app/page.js)
at ./app/page.js (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/app/page.js (28:1))
at options.factory (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/webpack.js (700:31))
at __webpack_require__ (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/webpack.js (37:33))
at fn (file:///private/var/folders/58/nhbh7xmd0s99w53vj614rpt80000gn/T/next-install-618ab2996b9b531cc9bc4602cbbc55437ef557242f823c6aaaa412e9e9f6e155/.next/static/chunks/webpack.js (357:21))"
`)
}
})
Expand Down
7 changes: 4 additions & 3 deletions test/development/acceptance-app/__snapshots__/ReactRefreshLogBox.test.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ReactRefreshLogBox app default Import trace when module not found in layout 1`] = `
"./app/module.js:1:1
"./app/module.js (1:1)
Module not found: Can't resolve 'non-existing-module'
> 1 | import "non-existing-module"
| ^
Expand Down Expand Up @@ -110,7 +110,7 @@ exports[`ReactRefreshLogBox app default should strip whitespace correctly with n
`;
exports[`ReactRefreshLogBox app turbo Import trace when module not found in layout 1`] = `
"./app/module.js:1:1
"./app/module.js (1:1)
Module not found: Can't resolve 'non-existing-module'
> 1 | import "non-existing-module"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Expand All @@ -119,7 +119,8 @@ https://nextjs.org/docs/messages/module-not-found"
`;
exports[`ReactRefreshLogBox app turbo Should not show __webpack_exports__ when exporting anonymous arrow function 1`] = `
"index.js (3:11) @ {default export}
"index.js (3:11) @
{default export}
1 | export default () => {
2 | if (typeof window !== 'undefined') {
Expand Down
Loading

0 comments on commit d308155

Please sign in to comment.