Skip to content

Commit 9ffd729

Browse files
ztannerztanner
authored
[DevOverlay]: render indicator in pages router (#75918)
We weren't rendering the new indicator when used in pages router -- `isMounted` was only true when there was an error. This PR keeps the `isMounted` logic for the old overlay but removes it for the new one.
1 parent 281a8b3 commit 9ffd729

File tree

6 files changed

+49
-69
lines changed

6 files changed

+49
-69
lines changed

‎packages/next/src/client/components/react-dev-overlay/_experimental/pages/error-boundary.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import * as React from 'react'
33
type DevOverlayErrorBoundaryProps = {
44
children?: React.ReactNode
55
onError: (error: Error, componentStack: string | null) => void
6-
isMounted?: boolean
76
}
87
type DevOverlayErrorBoundaryState = { error: Error | null }
98

‎packages/next/src/client/components/react-dev-overlay/_experimental/pages/react-dev-overlay.tsx

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,8 @@ interface ReactDevOverlayProps {
2020
}
2121

2222
export default function ReactDevOverlay({ children }: ReactDevOverlayProps) {
23-
const {
24-
isMounted,
25-
state,
26-
onComponentError,
27-
hasRuntimeErrors,
28-
hasBuildError,
29-
} = usePagesReactDevOverlay()
23+
const { state, onComponentError, hasRuntimeErrors, hasBuildError } =
24+
usePagesReactDevOverlay()
3025

3126
const { readyErrors, totalErrorCount } = useErrorHook({
3227
state,
@@ -37,33 +32,31 @@ export default function ReactDevOverlay({ children }: ReactDevOverlayProps) {
3732

3833
return (
3934
<>
40-
<DevOverlayErrorBoundary isMounted={isMounted} onError={onComponentError}>
35+
<DevOverlayErrorBoundary onError={onComponentError}>
4136
{children ?? null}
4237
</DevOverlayErrorBoundary>
4338

44-
{isMounted && (
45-
<ShadowPortal>
46-
<CssReset />
47-
<Base />
48-
<Colors />
49-
<ComponentStyles />
39+
<ShadowPortal>
40+
<CssReset />
41+
<Base />
42+
<Colors />
43+
<ComponentStyles />
44+
45+
<DevToolsIndicator
46+
state={state}
47+
errorCount={totalErrorCount}
48+
setIsErrorOverlayOpen={setIsErrorOverlayOpen}
49+
/>
5050

51-
<DevToolsIndicator
51+
{(hasRuntimeErrors || hasBuildError) && (
52+
<ErrorOverlay
5253
state={state}
53-
errorCount={totalErrorCount}
54+
readyErrors={readyErrors}
55+
isErrorOverlayOpen={isErrorOverlayOpen}
5456
setIsErrorOverlayOpen={setIsErrorOverlayOpen}
5557
/>
56-
57-
{(hasRuntimeErrors || hasBuildError) && (
58-
<ErrorOverlay
59-
state={state}
60-
readyErrors={readyErrors}
61-
isErrorOverlayOpen={isErrorOverlayOpen}
62-
setIsErrorOverlayOpen={setIsErrorOverlayOpen}
63-
/>
64-
)}
65-
</ShadowPortal>
66-
)}
58+
)}
59+
</ShadowPortal>
6760
</>
6861
)
6962
}

‎packages/next/src/client/components/react-dev-overlay/pages/error-boundary.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import * as React from 'react'
33
type ErrorBoundaryProps = {
44
children?: React.ReactNode
55
onError: (error: Error, componentStack: string | null) => void
6-
isMounted?: boolean
76
}
87
type ErrorBoundaryState = { error: Error | null }
98

‎packages/next/src/client/components/react-dev-overlay/pages/hooks.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,8 @@ export const usePagesReactDevOverlay = () => {
2121

2222
const hasBuildError = state.buildError != null
2323
const hasRuntimeErrors = Boolean(state.errors.length)
24-
const errorType = hasBuildError
25-
? 'build'
26-
: hasRuntimeErrors
27-
? 'runtime'
28-
: null
29-
const isMounted = errorType !== null
3024

3125
return {
32-
isMounted,
3326
hasBuildError,
3427
hasRuntimeErrors,
3528
state,

‎packages/next/src/client/components/react-dev-overlay/pages/old-react-dev-overlay.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,13 @@ export default function ReactDevOverlay({
1616
}: {
1717
children?: React.ReactNode
1818
}) {
19-
const {
20-
isMounted,
21-
hasBuildError,
22-
hasRuntimeErrors,
23-
state,
24-
onComponentError,
25-
} = usePagesReactDevOverlay()
19+
const { hasBuildError, hasRuntimeErrors, state, onComponentError } =
20+
usePagesReactDevOverlay()
21+
const isMounted = hasBuildError || hasRuntimeErrors
2622

2723
return (
2824
<>
29-
<ErrorBoundary isMounted={isMounted} onError={onComponentError}>
25+
<ErrorBoundary onError={onComponentError}>
3026
{children ?? null}
3127
</ErrorBoundary>
3228
{isMounted ? (

‎test/development/acceptance/hydration-error.test.ts

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
123123
<AppContainer>
124124
<Container fn={function fn}>
125125
<ReactDevOverlay>
126-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
126+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
127127
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
128128
<App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
129129
<Mismatch>
@@ -192,7 +192,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
192192
<AppContainer>
193193
<Container fn={function fn}>
194194
<ReactDevOverlay>
195-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
195+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
196196
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
197197
<App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
198198
<Mismatch>
@@ -256,7 +256,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
256256
<AppContainer>
257257
<Container fn={function fn}>
258258
<ReactDevOverlay>
259-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
259+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
260260
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
261261
<App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
262262
<Mismatch>
@@ -316,7 +316,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
316316
<AppContainer>
317317
<Container fn={function fn}>
318318
<ReactDevOverlay>
319-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
319+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
320320
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
321321
<App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
322322
<Mismatch>
@@ -382,7 +382,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
382382
<AppContainer>
383383
<Container fn={function fn}>
384384
<ReactDevOverlay>
385-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
385+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
386386
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
387387
<App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
388388
<Mismatch>
@@ -449,7 +449,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
449449
<AppContainer>
450450
<Container fn={function fn}>
451451
<ReactDevOverlay>
452-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
452+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
453453
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
454454
<App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
455455
<Page>
@@ -505,27 +505,27 @@ describe('Error overlay for hydration errors in Pages router', () => {
505505
const pseudoHtml = await session.getRedboxComponentStack()
506506
if (isTurbopack) {
507507
expect(pseudoHtml).toMatchInlineSnapshot(`
508-
"<Root callbacks={[...]}>
509-
<Head>
510-
<AppContainer>
511-
<Container fn={function fn}>
512-
<ReactDevOverlay>
513-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
514-
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
515-
<App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
516-
<Page>
517-
+ <table>
518-
- {" 123"}
519-
..."
520-
`)
508+
"<Root callbacks={[...]}>
509+
<Head>
510+
<AppContainer>
511+
<Container fn={function fn}>
512+
<ReactDevOverlay>
513+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
514+
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
515+
<App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
516+
<Page>
517+
+ <table>
518+
- {" 123"}
519+
..."
520+
`)
521521
} else {
522522
expect(pseudoHtml).toMatchInlineSnapshot(`
523523
"<Root callbacks={[...]}>
524524
<Head>
525525
<AppContainer>
526526
<Container fn={function fn}>
527527
<ReactDevOverlay>
528-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
528+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
529529
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
530530
<App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
531531
<Page>
@@ -576,7 +576,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
576576
expect(pseudoHtml).toMatchInlineSnapshot(`
577577
"...
578578
<ReactDevOverlay>
579-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
579+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
580580
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
581581
<App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
582582
<Mismatch>
@@ -686,7 +686,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
686686
<AppContainer>
687687
<Container fn={function fn}>
688688
<ReactDevOverlay>
689-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
689+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
690690
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
691691
<App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
692692
<Page>
@@ -752,7 +752,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
752752
"...
753753
<Container fn={function fn}>
754754
<ReactDevOverlay>
755-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
755+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
756756
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
757757
<App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
758758
<Page>
@@ -812,7 +812,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
812812
<AppContainer>
813813
<Container fn={function fn}>
814814
<ReactDevOverlay>
815-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
815+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
816816
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
817817
<App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
818818
<Page>
@@ -876,7 +876,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
876876
<AppContainer>
877877
<Container fn={function fn}>
878878
<ReactDevOverlay>
879-
<ErrorBoundary isMounted={false} onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
879+
<ErrorBoundary onError={function usePagesReactDevOverlay.useCallback[onComponentError]}>
880880
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
881881
<App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
882882
<Page>

0 commit comments

Comments
 (0)