Skip to content

Commit 8a51398

Browse files
acdliteacdlite
committed
Fix Activity boundary names
Follow-up to #85155. Made a mistake in the context-passing logic.
1 parent f50c769 commit 8a51398

File tree

4 files changed

+50
-51
lines changed

4 files changed

+50
-51
lines changed

‎packages/next/src/client/components/layout-router.tsx‎

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ import { hasInterceptionRouteInCurrentTree } from './router-reducer/reducers/has
4444
import { dispatchAppRouterAction } from './use-action-queue'
4545
import { useRouterBFCache, type RouterBFCacheEntry } from './bfcache'
4646
import { normalizeAppPath } from '../../shared/lib/router/utils/app-paths'
47-
import { PAGE_SEGMENT_KEY } from '../../shared/lib/segment'
4847
import {
4948
NavigationPromisesContext,
5049
type NavigationPromises,
@@ -348,7 +347,7 @@ function InnerLayoutRouter({
348347
}: {
349348
tree: FlightRouterState
350349
segmentPath: FlightSegmentPath
351-
debugNameContext: ActivityProps['name']
350+
debugNameContext: string
352351
cacheNode: CacheNode
353352
params: Params
354353
url: string
@@ -584,7 +583,7 @@ export default function OuterLayoutRouter({
584583
parentParams,
585584
url,
586585
isActive,
587-
debugNameContext: parentDebugNameContext,
586+
debugNameContext,
588587
} = context
589588

590589
// Get the CacheNode for this segment by reading it from the parent segment's
@@ -706,9 +705,20 @@ export default function OuterLayoutRouter({
706705

707706
const debugName = getBoundaryDebugNameFromSegment(segment)
708707
// `debugNameContext` represents the nearest non-"virtual" parent segment.
709-
// `getBoundaryDebugNameFromSegment` returns null for virtual segments.
710-
// So if `debugName` is null, the context is passed through unchanged.
711-
const debugNameContext = debugName ?? parentDebugNameContext
708+
// `getBoundaryDebugNameFromSegment` returns undefined for virtual segments.
709+
// So if `debugName` is undefined, the context is passed through unchanged.
710+
const childDebugNameContext = debugName ?? debugNameContext
711+
712+
// In practical terms, clicking this name in the Suspense DevTools
713+
// should select the child slots of that layout.
714+
//
715+
// So the name we apply to the Activity boundary is actually based on
716+
// the nearest parent segments.
717+
//
718+
// We skip over "virtual" parents, i.e. ones inserted by Next.js that
719+
// don't correspond to application-defined code.
720+
const isVirtual = debugName === undefined
721+
const debugNameToDisplay = isVirtual ? undefined : debugNameContext
712722

713723
// TODO: The loading module data for a segment is stored on the parent, then
714724
// applied to each of that parent segment's parallel route slots. In the
@@ -729,7 +739,10 @@ export default function OuterLayoutRouter({
729739
errorStyles={errorStyles}
730740
errorScripts={errorScripts}
731741
>
732-
<LoadingBoundary name={debugName} loading={loadingModuleData}>
742+
<LoadingBoundary
743+
name={debugNameToDisplay}
744+
loading={loadingModuleData}
745+
>
733746
<HTTPAccessFallbackBoundary
734747
notFound={notFound}
735748
forbidden={forbidden}
@@ -742,7 +755,7 @@ export default function OuterLayoutRouter({
742755
params={params}
743756
cacheNode={cacheNode}
744757
segmentPath={segmentPath}
745-
debugNameContext={debugNameContext}
758+
debugNameContext={childDebugNameContext}
746759
isActive={isActive && stateKey === activeStateKey}
747760
/>
748761
{segmentBoundaryTriggerNode}
@@ -775,15 +788,7 @@ export default function OuterLayoutRouter({
775788
if (process.env.__NEXT_CACHE_COMPONENTS) {
776789
child = (
777790
<Activity
778-
// In practical terms, clicking this name in the Suspense DevTools
779-
// should select the child slots of that layout.
780-
//
781-
// So the name we apply to the Activity boundary is actually based on
782-
// the nearest parent segments.
783-
//
784-
// We skip over "virtual" parents, i.e. ones inserted by Next.js that
785-
// don't correspond to application-defined code.
786-
name={debugNameContext}
791+
name={debugNameToDisplay}
787792
key={stateKey}
788793
mode={stateKey === activeStateKey ? 'visible' : 'hidden'}
789794
>
@@ -821,12 +826,6 @@ function isVirtualLayout(segment: string): boolean {
821826
// This is inserted by the loader. We should consider encoding these
822827
// in a more special way instead of checking the name, to distinguish them
823828
// from app-defined groups.
824-
segment === '(slot)' ||
825-
// For some reason, the loader tree sometimes includes extra __PAGE__
826-
// "layouts" when part of a parallel route. But it's not a leaf node.
827-
// Otherwise, we wouldn't need this special case because pages are
828-
// always leaf nodes.
829-
// TODO: Investigate why the loader produces these fake page segments.
830-
segment.startsWith(PAGE_SEGMENT_KEY)
829+
segment === '(slot)'
831830
)
832831
}

‎packages/next/src/shared/lib/app-router-context.shared-runtime.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const LayoutRouterContext = React.createContext<{
6363
parentCacheNode: CacheNode
6464
parentSegmentPath: FlightSegmentPath | null
6565
parentParams: Params
66-
debugNameContext: string | undefined
66+
debugNameContext: string
6767
url: string
6868
isActive: boolean
6969
} | null>(null)

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe('Error overlay for hydration errors in App router', () => {
4545
<ScrollAndFocusHandler segmentPath={[...]}>
4646
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
4747
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
48-
<LoadingBoundary name={undefined} loading={null}>
48+
<LoadingBoundary name="text-misma..." loading={null}>
4949
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
5050
<RedirectBoundary>
5151
<RedirectErrorBoundary router={{...}}>
@@ -107,7 +107,7 @@ describe('Error overlay for hydration errors in App router', () => {
107107
<ScrollAndFocusHandler segmentPath={[...]}>
108108
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
109109
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
110-
<LoadingBoundary name={undefined} loading={null}>
110+
<LoadingBoundary name="extra-elem..." loading={null}>
111111
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
112112
<RedirectBoundary>
113113
<RedirectErrorBoundary router={{...}}>
@@ -145,7 +145,7 @@ describe('Error overlay for hydration errors in App router', () => {
145145
<ScrollAndFocusHandler segmentPath={[...]}>
146146
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
147147
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
148-
<LoadingBoundary name="(extra-att..." loading={null}>
148+
<LoadingBoundary name="/" loading={null}>
149149
<HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
150150
<HTTPAccessFallbackErrorBoundary pathname="/extra-att..." notFound={<SegmentViewNode>} ...>
151151
<RedirectBoundary>
@@ -181,7 +181,7 @@ describe('Error overlay for hydration errors in App router', () => {
181181
<ScrollAndFocusHandler segmentPath={[...]}>
182182
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
183183
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
184-
<LoadingBoundary name="(extra-att..." loading={null}>
184+
<LoadingBoundary name="/" loading={null}>
185185
<HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
186186
<HTTPAccessFallbackErrorBoundary pathname="/extra-att..." notFound={<SegmentViewNode>} ...>
187187
<RedirectBoundary>
@@ -221,7 +221,7 @@ describe('Error overlay for hydration errors in App router', () => {
221221
<ScrollAndFocusHandler segmentPath={[...]}>
222222
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
223223
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
224-
<LoadingBoundary name={undefined} loading={null}>
224+
<LoadingBoundary name="extra-text..." loading={null}>
225225
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
226226
<RedirectBoundary>
227227
<RedirectErrorBoundary router={{...}}>
@@ -262,7 +262,7 @@ describe('Error overlay for hydration errors in App router', () => {
262262
<ScrollAndFocusHandler segmentPath={[...]}>
263263
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
264264
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
265-
<LoadingBoundary name={undefined} loading={null}>
265+
<LoadingBoundary name="extra-elem..." loading={null}>
266266
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
267267
<RedirectBoundary>
268268
<RedirectErrorBoundary router={{...}}>
@@ -300,7 +300,7 @@ describe('Error overlay for hydration errors in App router', () => {
300300
<ScrollAndFocusHandler segmentPath={[...]}>
301301
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
302302
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
303-
<LoadingBoundary name={undefined} loading={null}>
303+
<LoadingBoundary name="extra-text..." loading={null}>
304304
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
305305
<RedirectBoundary>
306306
<RedirectErrorBoundary router={{...}}>
@@ -342,7 +342,7 @@ describe('Error overlay for hydration errors in App router', () => {
342342
<ScrollAndFocusHandler segmentPath={[...]}>
343343
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
344344
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
345-
<LoadingBoundary name={undefined} loading={null}>
345+
<LoadingBoundary name="extra-text..." loading={null}>
346346
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
347347
<RedirectBoundary>
348348
<RedirectErrorBoundary router={{...}}>
@@ -376,7 +376,7 @@ describe('Error overlay for hydration errors in App router', () => {
376376
<ScrollAndFocusHandler segmentPath={[...]}>
377377
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
378378
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
379-
<LoadingBoundary name={undefined} loading={null}>
379+
<LoadingBoundary name="extra-text..." loading={null}>
380380
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
381381
<RedirectBoundary>
382382
<RedirectErrorBoundary router={{...}}>
@@ -415,7 +415,7 @@ describe('Error overlay for hydration errors in App router', () => {
415415
<ScrollAndFocusHandler segmentPath={[...]}>
416416
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
417417
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
418-
<LoadingBoundary name={undefined} loading={null}>
418+
<LoadingBoundary name="extra-whit..." loading={null}>
419419
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
420420
<RedirectBoundary>
421421
<RedirectErrorBoundary router={{...}}>
@@ -453,7 +453,7 @@ describe('Error overlay for hydration errors in App router', () => {
453453
"componentStack": "...
454454
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
455455
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
456-
<LoadingBoundary name={undefined} loading={null}>
456+
<LoadingBoundary name="extra-node..." loading={null}>
457457
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
458458
<RedirectBoundary>
459459
<RedirectErrorBoundary router={{...}}>
@@ -510,7 +510,7 @@ describe('Error overlay for hydration errors in App router', () => {
510510
<ScrollAndFocusHandler segmentPath={[...]}>
511511
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
512512
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
513-
<LoadingBoundary name={undefined} loading={null}>
513+
<LoadingBoundary name="p-under-p/" loading={null}>
514514
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
515515
<RedirectBoundary>
516516
<RedirectErrorBoundary router={{...}}>
@@ -566,7 +566,7 @@ describe('Error overlay for hydration errors in App router', () => {
566566
<ScrollAndFocusHandler segmentPath={[...]}>
567567
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
568568
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
569-
<LoadingBoundary name={undefined} loading={null}>
569+
<LoadingBoundary name="div-under-p/" loading={null}>
570570
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
571571
<RedirectBoundary>
572572
<RedirectErrorBoundary router={{...}}>
@@ -625,7 +625,7 @@ describe('Error overlay for hydration errors in App router', () => {
625625
<ScrollAndFocusHandler segmentPath={[...]}>
626626
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
627627
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
628-
<LoadingBoundary name={undefined} loading={null}>
628+
<LoadingBoundary name="tr-under-div/" loading={null}>
629629
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
630630
<RedirectBoundary>
631631
<RedirectErrorBoundary router={{...}}>
@@ -682,7 +682,7 @@ describe('Error overlay for hydration errors in App router', () => {
682682
<ScrollAndFocusHandler segmentPath={[...]}>
683683
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
684684
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
685-
<LoadingBoundary name={undefined} loading={null}>
685+
<LoadingBoundary name="bad-nesting/" loading={null}>
686686
<HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
687687
<RedirectBoundary>
688688
<RedirectErrorBoundary router={{...}}>
@@ -902,7 +902,7 @@ describe('Error overlay for hydration errors in App router', () => {
902902
<ScrollAndFocusHandler segmentPath={[...]}>
903903
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
904904
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
905-
<LoadingBoundary name="(script-un..." loading={null}>
905+
<LoadingBoundary name="/" loading={null}>
906906
<HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
907907
<HTTPAccessFallbackErrorBoundary pathname="/script-un..." notFound={<SegmentViewNode>} ...>
908908
<RedirectBoundary>
@@ -966,7 +966,7 @@ describe('Error overlay for hydration errors in App router', () => {
966966
<ScrollAndFocusHandler segmentPath={[...]}>
967967
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
968968
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
969-
<LoadingBoundary name="(script-un..." loading={null}>
969+
<LoadingBoundary name="/" loading={null}>
970970
<HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}>
971971
<HTTPAccessFallbackErrorBoundary pathname="/script-un..." notFound={<SegmentViewNode>} ...>
972972
<RedirectBoundary>

0 commit comments

Comments
 (0)