mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
34759c3e1a
## Stack Position (2/7) in the router instrumentation stack. 1. #94755: router instrumentation: refactor client hook dispatch (1/7) 2. **#94766: router instrumentation: add transition start context (2/7)** 3. #94756: router instrumentation: add transition commit events (3/7) 4. #94765: router instrumentation: add commit route and prefetch context (4/7) 5. #94757: router instrumentation: add transition abort events (5/7) 6. #94758: router instrumentation: add route mismatch events (6/7) 7. #94737: router instrumentation: add transition settlement events (7/7) Parent: #94755 Next: #94756 ## What This PR Does Adds an experimental third argument to the existing start hook: ```ts export function onRouterTransitionStart(url, navigationType, event) {} ``` The event contains: - `id` and framework-captured Unix `timestamp` in milliseconds - `fromRoutes`: route patterns visible when navigation is dispatched - `prefetchIntent`: `full`, `auto`, or `none` The primary `children` route is first, followed by visible parallel slots in deterministic order. ## Design Start owns the context that is authoritative before navigation work begins: the screen being left and the caller's prefetch intent. Destination routes and the cache result actually used are reported by commit instead. Consumers correlate them by transition ID. Without `experimental.instrumentationClientRouterTransitionEvents`, the existing two-argument hook behavior is unchanged. ## Not In This PR - Destination routes or observed prefetch result - Commit, abort, mismatch, or settled hooks ## Reviewer Focus - Route pattern extraction, including dynamic and parallel routes - Primary route ordering - Link intent propagation and experimental gating ## Validation - `pnpm build-all` - `pnpm --filter=next build` - App Router instrumentation client E2E: 15/15 <!-- NEXT_JS_LLM_PR --> --------- Co-authored-by: Jude Gao <[email protected]>
32 lines
802 B
TypeScript
32 lines
802 B
TypeScript
;(window as any).__INSTRUMENTATION_CLIENT_EXECUTED_AT = performance.now()
|
|
;(window as any).__ROUTER_TRANSITION_EVENTS = []
|
|
|
|
const start = performance.now()
|
|
while (performance.now() - start < 20) {
|
|
// Intentionally block for 20ms to test instrumentation timing
|
|
}
|
|
|
|
function record(
|
|
phase: string,
|
|
href: string,
|
|
navigateType: string,
|
|
event: unknown
|
|
) {
|
|
;(window as any).__ROUTER_TRANSITION_EVENTS.push({
|
|
phase,
|
|
url: new URL(href, window.location.href).pathname,
|
|
navigateType,
|
|
event,
|
|
})
|
|
}
|
|
|
|
export function onRouterTransitionStart(
|
|
href: string,
|
|
navigateType: string,
|
|
event: unknown
|
|
) {
|
|
const pathname = new URL(href, window.location.href).pathname
|
|
console.log(`[Router Transition Start] [${navigateType}] ${pathname}`)
|
|
record('start', href, navigateType, event)
|
|
}
|