2019-07-10 16:43:04 +02:00
|
|
|
/* global location */
|
2021-12-21 16:13:45 +01:00
|
|
|
import '../build/polyfills/polyfill-module'
|
2022-10-29 22:34:03 +02:00
|
|
|
import type Router from '../shared/lib/router/router'
|
2022-07-21 00:41:48 +02:00
|
|
|
import React from 'react'
|
2022-10-29 22:34:03 +02:00
|
|
|
// @ts-expect-error upgrade react types to react 18
|
|
|
|
import ReactDOM from 'react-dom/client'
|
2021-06-30 11:43:31 +02:00
|
|
|
import { HeadManagerContext } from '../shared/lib/head-manager-context'
|
|
|
|
import mitt, { MittEmitter } from '../shared/lib/mitt'
|
|
|
|
import { RouterContext } from '../shared/lib/router-context'
|
2021-11-25 10:46:00 +01:00
|
|
|
import {
|
2020-08-13 19:39:33 +02:00
|
|
|
AppComponent,
|
|
|
|
AppProps,
|
|
|
|
PrivateRouteInfo,
|
2021-06-30 11:43:31 +02:00
|
|
|
} from '../shared/lib/router/router'
|
|
|
|
import { isDynamicRoute } from '../shared/lib/router/utils/is-dynamic'
|
2021-07-14 20:12:04 +02:00
|
|
|
import {
|
|
|
|
urlQueryToSearchParams,
|
|
|
|
assign,
|
|
|
|
} from '../shared/lib/router/utils/querystring'
|
|
|
|
import { setConfig } from '../shared/lib/runtime-config'
|
2021-09-24 20:35:33 +02:00
|
|
|
import {
|
|
|
|
getURL,
|
|
|
|
loadGetInitialProps,
|
|
|
|
NextWebVitalsMetric,
|
|
|
|
NEXT_DATA,
|
|
|
|
ST,
|
|
|
|
} from '../shared/lib/utils'
|
2021-03-15 21:18:11 +01:00
|
|
|
import { Portal } from './portal'
|
2020-05-04 23:16:03 +02:00
|
|
|
import initHeadManager from './head-manager'
|
2020-11-11 19:13:16 +01:00
|
|
|
import PageLoader, { StyleSheetTuple } from './page-loader'
|
2020-05-09 21:48:52 +02:00
|
|
|
import measureWebVitals from './performance-relayer'
|
2021-03-15 21:18:11 +01:00
|
|
|
import { RouteAnnouncer } from './route-announcer'
|
2021-12-13 11:48:18 +01:00
|
|
|
import { createRouter, makePublicRouterInstance } from './router'
|
2022-01-11 21:40:03 +01:00
|
|
|
import { getProperError } from '../lib/is-error'
|
2022-02-09 01:55:53 +01:00
|
|
|
import { ImageConfigContext } from '../shared/lib/image-config-context'
|
2022-02-22 15:27:18 +01:00
|
|
|
import { ImageConfigComplete } from '../shared/lib/image-config'
|
2022-05-30 20:19:37 +02:00
|
|
|
import { removeBasePath } from './remove-base-path'
|
|
|
|
import { hasBasePath } from './has-base-path'
|
2022-11-01 04:13:27 +01:00
|
|
|
import { AppRouterContext } from '../shared/lib/app-router-context'
|
|
|
|
import {
|
|
|
|
adaptForAppRouterInstance,
|
|
|
|
adaptForSearchParams,
|
2022-11-03 21:34:50 +01:00
|
|
|
PathnameContextProviderAdapter,
|
2022-11-01 04:13:27 +01:00
|
|
|
} from '../shared/lib/router/adapters'
|
2022-11-03 21:34:50 +01:00
|
|
|
import { SearchParamsContext } from '../shared/lib/hooks-client-context'
|
2017-01-12 02:58:20 +01:00
|
|
|
|
2019-10-30 14:39:58 +01:00
|
|
|
/// <reference types="react-dom/experimental" />
|
|
|
|
|
2020-08-13 19:39:33 +02:00
|
|
|
declare let __webpack_public_path__: string
|
|
|
|
|
|
|
|
declare global {
|
|
|
|
interface Window {
|
|
|
|
/* test fns */
|
|
|
|
__NEXT_HYDRATED?: boolean
|
|
|
|
__NEXT_HYDRATED_CB?: () => void
|
|
|
|
|
|
|
|
/* prod */
|
2021-04-21 13:18:05 +02:00
|
|
|
__NEXT_PRELOADREADY?: (ids?: (string | number)[]) => void
|
2020-08-14 00:19:06 +02:00
|
|
|
__NEXT_DATA__: NEXT_DATA
|
2020-08-13 19:39:33 +02:00
|
|
|
__NEXT_P: any[]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-12-30 05:33:08 +01:00
|
|
|
type RenderRouteInfo = PrivateRouteInfo & {
|
|
|
|
App: AppComponent
|
2020-12-31 17:08:12 +01:00
|
|
|
scroll?: { x: number; y: number } | null
|
2020-12-30 05:33:08 +01:00
|
|
|
}
|
2020-08-17 23:20:05 +02:00
|
|
|
type RenderErrorProps = Omit<RenderRouteInfo, 'Component' | 'styleSheets'>
|
2022-03-07 18:09:55 +01:00
|
|
|
type RegisterFn = (input: [string, () => void]) => void
|
2018-11-03 19:49:09 +01:00
|
|
|
|
2019-08-24 06:49:25 +02:00
|
|
|
export const version = process.env.__NEXT_VERSION
|
2022-03-07 18:09:55 +01:00
|
|
|
export let router: Router
|
|
|
|
export const emitter: MittEmitter<string> = mitt()
|
2019-08-24 06:49:25 +02:00
|
|
|
|
2020-11-11 19:13:16 +01:00
|
|
|
const looseToArray = <T extends {}>(input: any): T[] => [].slice.call(input)
|
|
|
|
|
2022-03-07 18:09:55 +01:00
|
|
|
let initialData: NEXT_DATA
|
|
|
|
let defaultLocale: string | undefined = undefined
|
|
|
|
let asPath: string
|
|
|
|
let pageLoader: PageLoader
|
|
|
|
let appElement: HTMLElement | null
|
|
|
|
let headManager: {
|
2021-01-07 16:02:10 +01:00
|
|
|
mountedInstances: Set<unknown>
|
|
|
|
updateHead: (head: JSX.Element[]) => void
|
2021-08-24 18:07:38 +02:00
|
|
|
getIsSsr?: () => boolean
|
2022-03-07 18:09:55 +01:00
|
|
|
}
|
2022-06-20 13:31:19 +02:00
|
|
|
let initialMatchesMiddleware = false
|
2022-08-11 23:32:52 +02:00
|
|
|
let lastAppProps: AppProps
|
2017-04-05 13:43:34 +02:00
|
|
|
|
2020-08-13 19:39:33 +02:00
|
|
|
let lastRenderReject: (() => void) | null
|
|
|
|
let webpackHMR: any
|
2022-03-02 19:29:54 +01:00
|
|
|
|
2020-08-13 19:39:33 +02:00
|
|
|
let CachedApp: AppComponent, onPerfEntry: (metric: any) => void
|
2022-03-07 18:09:55 +01:00
|
|
|
let CachedComponent: React.ComponentType
|
2022-03-02 19:29:54 +01:00
|
|
|
|
2022-05-27 19:43:42 +02:00
|
|
|
// Ignore the module ID transform in client.
|
|
|
|
// @ts-ignore
|
|
|
|
;(self as any).__next_require__ = __webpack_require__
|
|
|
|
|
2020-08-13 19:39:33 +02:00
|
|
|
class Container extends React.Component<{
|
|
|
|
fn: (err: Error, info?: any) => void
|
|
|
|
}> {
|
|
|
|
componentDidCatch(componentErr: Error, info: any) {
|
2020-06-01 23:00:22 +02:00
|
|
|
this.props.fn(componentErr, info)
|
2019-06-05 20:15:42 +02:00
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
componentDidMount() {
|
2019-06-05 20:15:42 +02:00
|
|
|
this.scrollToHash()
|
|
|
|
|
2020-02-13 02:06:07 +01:00
|
|
|
// We need to replace the router state if:
|
|
|
|
// - the page was (auto) exported and has a query string or search (hash)
|
|
|
|
// - it was auto exported and is a dynamic route (to provide params)
|
|
|
|
// - if it is a client-side skeleton (fallback render)
|
2022-06-20 13:31:19 +02:00
|
|
|
// - if middleware matches the current page (may have rewrite params)
|
|
|
|
// - if rewrites in next.config.js match (may have rewrite params)
|
|
|
|
if (
|
|
|
|
router.isSsr &&
|
|
|
|
// We don't update for 404 requests as this can modify
|
|
|
|
// the asPath unexpectedly e.g. adding basePath when
|
|
|
|
// it wasn't originally present
|
|
|
|
initialData.page !== '/404' &&
|
|
|
|
initialData.page !== '/_error' &&
|
|
|
|
(initialData.isFallback ||
|
|
|
|
(initialData.nextExport &&
|
|
|
|
(isDynamicRoute(router.pathname) ||
|
|
|
|
location.search ||
|
|
|
|
process.env.__NEXT_HAS_REWRITES ||
|
|
|
|
initialMatchesMiddleware)) ||
|
|
|
|
(initialData.props &&
|
|
|
|
initialData.props.__N_SSG &&
|
|
|
|
(location.search ||
|
|
|
|
process.env.__NEXT_HAS_REWRITES ||
|
|
|
|
initialMatchesMiddleware)))
|
|
|
|
) {
|
|
|
|
// update query on mount for exported pages
|
|
|
|
router
|
|
|
|
.replace(
|
2022-06-17 17:28:25 +02:00
|
|
|
router.pathname +
|
|
|
|
'?' +
|
|
|
|
String(
|
|
|
|
assign(
|
|
|
|
urlQueryToSearchParams(router.query),
|
|
|
|
new URLSearchParams(location.search)
|
|
|
|
)
|
|
|
|
),
|
|
|
|
asPath,
|
|
|
|
{
|
|
|
|
// @ts-ignore
|
|
|
|
// WARNING: `_h` is an internal option for handing Next.js
|
|
|
|
// client-side hydration. Your app should _never_ use this property.
|
|
|
|
// It may change at any time without notice.
|
|
|
|
_h: 1,
|
|
|
|
// Fallback pages must trigger the data fetch, so the transition is
|
|
|
|
// not shallow.
|
|
|
|
// Other pages (strictly updating query) happens shallowly, as data
|
|
|
|
// requirements would already be present.
|
2022-06-20 13:31:19 +02:00
|
|
|
shallow: !initialData.isFallback && !initialMatchesMiddleware,
|
2022-06-17 17:28:25 +02:00
|
|
|
}
|
|
|
|
)
|
2022-06-20 13:31:19 +02:00
|
|
|
.catch((err) => {
|
|
|
|
if (!err.cancelled) throw err
|
|
|
|
})
|
2019-06-05 20:15:42 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
componentDidUpdate() {
|
2019-06-05 20:15:42 +02:00
|
|
|
this.scrollToHash()
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
scrollToHash() {
|
2019-07-10 16:43:04 +02:00
|
|
|
let { hash } = location
|
2019-06-05 20:15:42 +02:00
|
|
|
hash = hash && hash.substring(1)
|
|
|
|
if (!hash) return
|
|
|
|
|
2021-01-07 16:02:10 +01:00
|
|
|
const el: HTMLElement | null = document.getElementById(hash)
|
2019-06-05 20:15:42 +02:00
|
|
|
if (!el) return
|
|
|
|
|
|
|
|
// If we call scrollIntoView() in here without a setTimeout
|
|
|
|
// it won't scroll properly.
|
|
|
|
setTimeout(() => el.scrollIntoView(), 0)
|
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
render() {
|
2020-04-30 16:50:25 +02:00
|
|
|
if (process.env.NODE_ENV === 'production') {
|
|
|
|
return this.props.children
|
2020-08-13 19:39:33 +02:00
|
|
|
} else {
|
2021-12-21 16:13:45 +01:00
|
|
|
const {
|
|
|
|
ReactDevOverlay,
|
2022-05-31 02:05:27 +02:00
|
|
|
} = require('next/dist/compiled/@next/react-dev-overlay/dist/client')
|
2020-05-15 20:14:44 +02:00
|
|
|
return <ReactDevOverlay>{this.props.children}</ReactDevOverlay>
|
2020-04-30 16:50:25 +02:00
|
|
|
}
|
2019-06-05 20:15:42 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-03-07 18:09:55 +01:00
|
|
|
export async function initialize(opts: { webpackHMR?: any } = {}): Promise<{
|
|
|
|
assetPrefix: string
|
|
|
|
}> {
|
2019-05-27 22:59:25 +02:00
|
|
|
// This makes sure this specific lines are removed in production
|
2018-07-24 11:24:40 +02:00
|
|
|
if (process.env.NODE_ENV === 'development') {
|
2020-08-13 19:39:33 +02:00
|
|
|
webpackHMR = opts.webpackHMR
|
2017-04-17 22:15:50 +02:00
|
|
|
}
|
2020-11-11 19:13:16 +01:00
|
|
|
|
2022-03-07 18:09:55 +01:00
|
|
|
initialData = JSON.parse(
|
|
|
|
document.getElementById('__NEXT_DATA__')!.textContent!
|
|
|
|
)
|
|
|
|
window.__NEXT_DATA__ = initialData
|
|
|
|
|
|
|
|
defaultLocale = initialData.defaultLocale
|
|
|
|
const prefix: string = initialData.assetPrefix || ''
|
|
|
|
// With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
|
|
|
|
// So, this is how we do it in the client side at runtime
|
|
|
|
__webpack_public_path__ = `${prefix}/_next/` //eslint-disable-line
|
|
|
|
|
|
|
|
// Initialize next/config with the environment configuration
|
|
|
|
setConfig({
|
|
|
|
serverRuntimeConfig: {},
|
|
|
|
publicRuntimeConfig: initialData.runtimeConfig || {},
|
|
|
|
})
|
|
|
|
|
|
|
|
asPath = getURL()
|
|
|
|
|
|
|
|
// make sure not to attempt stripping basePath for 404s
|
|
|
|
if (hasBasePath(asPath)) {
|
2022-05-30 20:19:37 +02:00
|
|
|
asPath = removeBasePath(asPath)
|
2022-03-07 18:09:55 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if (process.env.__NEXT_I18N_SUPPORT) {
|
|
|
|
const { normalizeLocalePath } =
|
|
|
|
require('../shared/lib/i18n/normalize-locale-path') as typeof import('../shared/lib/i18n/normalize-locale-path')
|
|
|
|
|
|
|
|
const { detectDomainLocale } =
|
|
|
|
require('../shared/lib/i18n/detect-domain-locale') as typeof import('../shared/lib/i18n/detect-domain-locale')
|
|
|
|
|
|
|
|
const { parseRelativeUrl } =
|
|
|
|
require('../shared/lib/router/utils/parse-relative-url') as typeof import('../shared/lib/router/utils/parse-relative-url')
|
|
|
|
|
|
|
|
const { formatUrl } =
|
|
|
|
require('../shared/lib/router/utils/format-url') as typeof import('../shared/lib/router/utils/format-url')
|
|
|
|
|
|
|
|
if (initialData.locales) {
|
|
|
|
const parsedAs = parseRelativeUrl(asPath)
|
|
|
|
const localePathResult = normalizeLocalePath(
|
|
|
|
parsedAs.pathname,
|
|
|
|
initialData.locales
|
|
|
|
)
|
|
|
|
|
|
|
|
if (localePathResult.detectedLocale) {
|
|
|
|
parsedAs.pathname = localePathResult.pathname
|
|
|
|
asPath = formatUrl(parsedAs)
|
|
|
|
} else {
|
|
|
|
// derive the default locale if it wasn't detected in the asPath
|
|
|
|
// since we don't prerender static pages with all possible default
|
|
|
|
// locales
|
|
|
|
defaultLocale = initialData.locale
|
|
|
|
}
|
|
|
|
|
|
|
|
// attempt detecting default locale based on hostname
|
|
|
|
const detectedDomain = detectDomainLocale(
|
|
|
|
process.env.__NEXT_I18N_DOMAINS as any,
|
|
|
|
window.location.hostname
|
|
|
|
)
|
|
|
|
|
|
|
|
// TODO: investigate if defaultLocale needs to be populated after
|
|
|
|
// hydration to prevent mismatched renders
|
|
|
|
if (detectedDomain) {
|
|
|
|
defaultLocale = detectedDomain.defaultLocale
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (initialData.scriptLoader) {
|
|
|
|
const { initScriptLoader } = require('./script')
|
|
|
|
initScriptLoader(initialData.scriptLoader)
|
|
|
|
}
|
|
|
|
|
|
|
|
pageLoader = new PageLoader(initialData.buildId, prefix)
|
|
|
|
|
|
|
|
const register: RegisterFn = ([r, f]) =>
|
|
|
|
pageLoader.routeLoader.onEntrypoint(r, f)
|
|
|
|
if (window.__NEXT_P) {
|
|
|
|
// Defer page registration for another tick. This will increase the overall
|
|
|
|
// latency in hydrating the page, but reduce the total blocking time.
|
|
|
|
window.__NEXT_P.map((p) => setTimeout(() => register(p), 0))
|
|
|
|
}
|
|
|
|
window.__NEXT_P = []
|
|
|
|
;(window.__NEXT_P as any).push = register
|
|
|
|
|
|
|
|
headManager = initHeadManager()
|
|
|
|
headManager.getIsSsr = () => {
|
|
|
|
return router.isSsr
|
|
|
|
}
|
|
|
|
|
|
|
|
appElement = document.getElementById('__next')
|
|
|
|
return { assetPrefix: prefix }
|
|
|
|
}
|
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
function renderApp(App: AppComponent, appProps: AppProps) {
|
|
|
|
return <App {...appProps} />
|
|
|
|
}
|
2017-04-01 23:03:40 +02:00
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
function AppContainer({
|
|
|
|
children,
|
|
|
|
}: React.PropsWithChildren<{}>): React.ReactElement {
|
|
|
|
return (
|
|
|
|
<Container
|
|
|
|
fn={(error) =>
|
|
|
|
// TODO: Fix disabled eslint rule
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
|
|
|
renderError({ App: CachedApp, err: error }).catch((err) =>
|
|
|
|
console.error('Error rendering page: ', err)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
2022-11-01 04:13:27 +01:00
|
|
|
<AppRouterContext.Provider value={adaptForAppRouterInstance(router)}>
|
|
|
|
<SearchParamsContext.Provider value={adaptForSearchParams(router)}>
|
2022-11-03 21:34:50 +01:00
|
|
|
<PathnameContextProviderAdapter
|
|
|
|
router={router}
|
|
|
|
isAutoExport={self.__NEXT_DATA__.autoExport ?? false}
|
|
|
|
>
|
2022-11-01 04:13:27 +01:00
|
|
|
<RouterContext.Provider value={makePublicRouterInstance(router)}>
|
|
|
|
<HeadManagerContext.Provider value={headManager}>
|
|
|
|
<ImageConfigContext.Provider
|
|
|
|
value={
|
|
|
|
process.env.__NEXT_IMAGE_OPTS as any as ImageConfigComplete
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</ImageConfigContext.Provider>
|
|
|
|
</HeadManagerContext.Provider>
|
|
|
|
</RouterContext.Provider>
|
2022-11-03 21:34:50 +01:00
|
|
|
</PathnameContextProviderAdapter>
|
2022-11-01 04:13:27 +01:00
|
|
|
</SearchParamsContext.Provider>
|
|
|
|
</AppRouterContext.Provider>
|
2022-08-15 16:29:51 +02:00
|
|
|
</Container>
|
|
|
|
)
|
|
|
|
}
|
2020-08-22 13:47:21 +02:00
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
const wrapApp =
|
|
|
|
(App: AppComponent) =>
|
|
|
|
(wrappedAppProps: Record<string, any>): JSX.Element => {
|
|
|
|
const appProps: AppProps = {
|
|
|
|
...wrappedAppProps,
|
|
|
|
Component: CachedComponent,
|
|
|
|
err: initialData.err,
|
|
|
|
router,
|
2020-05-14 16:36:55 +02:00
|
|
|
}
|
2022-08-15 16:29:51 +02:00
|
|
|
return <AppContainer>{renderApp(App, appProps)}</AppContainer>
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|
|
|
|
|
2017-04-01 23:03:40 +02:00
|
|
|
// This method handles all runtime and debug errors.
|
|
|
|
// 404 and 500 errors are special kind of errors
|
|
|
|
// and they are still handle via the main render method.
|
2022-02-07 21:16:13 +01:00
|
|
|
function renderError(renderErrorProps: RenderErrorProps): Promise<any> {
|
2022-08-10 18:36:22 +02:00
|
|
|
let { App, err } = renderErrorProps
|
2018-04-18 18:18:06 +02:00
|
|
|
|
2020-05-15 20:14:44 +02:00
|
|
|
// In development runtime errors are caught by our overlay
|
2019-07-11 23:23:07 +02:00
|
|
|
// In production we catch runtime errors using componentDidCatch which will trigger renderError
|
2018-04-18 18:18:06 +02:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
2020-05-15 20:14:44 +02:00
|
|
|
// A Next.js rendering runtime error is always unrecoverable
|
|
|
|
// FIXME: let's make this recoverable (error in GIP client-transition)
|
|
|
|
webpackHMR.onUnrecoverableError()
|
|
|
|
|
|
|
|
// We need to render an empty <App> so that the `<ReactDevOverlay>` can
|
|
|
|
// render itself.
|
2022-08-15 16:29:51 +02:00
|
|
|
// TODO: Fix disabled eslint rule
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
2020-05-15 20:14:44 +02:00
|
|
|
return doRender({
|
|
|
|
App: () => null,
|
|
|
|
props: {},
|
|
|
|
Component: () => null,
|
2020-08-17 23:20:05 +02:00
|
|
|
styleSheets: [],
|
2020-05-15 20:14:44 +02:00
|
|
|
})
|
2018-04-18 18:18:06 +02:00
|
|
|
}
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
// Make sure we log the error to the console, otherwise users can't track down issues.
|
|
|
|
console.error(err)
|
2021-08-05 17:38:06 +02:00
|
|
|
console.error(
|
|
|
|
`A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred`
|
|
|
|
)
|
|
|
|
|
2020-08-17 23:20:05 +02:00
|
|
|
return pageLoader
|
|
|
|
.loadPage('/_error')
|
|
|
|
.then(({ page: ErrorComponent, styleSheets }) => {
|
2021-07-01 13:54:54 +02:00
|
|
|
return lastAppProps?.Component === ErrorComponent
|
2022-08-10 18:36:22 +02:00
|
|
|
? import('../pages/_error')
|
|
|
|
.then((errorModule) => {
|
|
|
|
return import('../pages/_app').then((appModule) => {
|
|
|
|
App = appModule.default as any as AppComponent
|
|
|
|
renderErrorProps.App = App
|
|
|
|
return errorModule
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.then((m) => ({
|
|
|
|
ErrorComponent: m.default as React.ComponentType<{}>,
|
|
|
|
styleSheets: [],
|
|
|
|
}))
|
2021-07-01 13:54:54 +02:00
|
|
|
: { ErrorComponent, styleSheets }
|
|
|
|
})
|
|
|
|
.then(({ ErrorComponent, styleSheets }) => {
|
2020-08-17 23:20:05 +02:00
|
|
|
// In production we do a normal render with the `ErrorComponent` as component.
|
|
|
|
// If we've gotten here upon initial render, we can use the props from the server.
|
|
|
|
// Otherwise, we need to call `getInitialProps` on `App` before mounting.
|
|
|
|
const AppTree = wrapApp(App)
|
|
|
|
const appCtx = {
|
2020-05-04 23:16:03 +02:00
|
|
|
Component: ErrorComponent,
|
2020-08-17 23:20:05 +02:00
|
|
|
AppTree,
|
|
|
|
router,
|
2022-03-07 18:09:55 +01:00
|
|
|
ctx: {
|
|
|
|
err,
|
|
|
|
pathname: initialData.page,
|
|
|
|
query: initialData.query,
|
|
|
|
asPath,
|
|
|
|
AppTree,
|
|
|
|
},
|
2020-08-17 23:20:05 +02:00
|
|
|
}
|
|
|
|
return Promise.resolve(
|
2022-07-06 20:44:15 +02:00
|
|
|
renderErrorProps.props?.err
|
2020-08-17 23:20:05 +02:00
|
|
|
? renderErrorProps.props
|
|
|
|
: loadGetInitialProps(App, appCtx)
|
|
|
|
).then((initProps) =>
|
2022-08-15 16:29:51 +02:00
|
|
|
// TODO: Fix disabled eslint rule
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
2020-08-17 23:20:05 +02:00
|
|
|
doRender({
|
|
|
|
...renderErrorProps,
|
|
|
|
err,
|
|
|
|
Component: ErrorComponent,
|
|
|
|
styleSheets,
|
|
|
|
props: initProps,
|
|
|
|
})
|
|
|
|
)
|
|
|
|
})
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
// Dummy component that we render as a child of Root so that we can
|
|
|
|
// toggle the correct styles before the page is rendered.
|
|
|
|
function Head({ callback }: { callback: () => void }): null {
|
|
|
|
// We use `useLayoutEffect` to guarantee the callback is executed
|
|
|
|
// as soon as React flushes the update.
|
|
|
|
React.useLayoutEffect(() => callback(), [callback])
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
2020-08-13 19:39:33 +02:00
|
|
|
let reactRoot: any = null
|
2021-06-30 17:03:32 +02:00
|
|
|
// On initial render a hydrate should always happen
|
|
|
|
let shouldHydrate: boolean = true
|
2021-04-24 22:19:07 +02:00
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
function clearMarks(): void {
|
|
|
|
;['beforeRender', 'afterHydrate', 'afterRender', 'routeChange'].forEach(
|
|
|
|
(mark) => performance.clearMarks(mark)
|
|
|
|
)
|
2018-09-05 22:45:17 +02:00
|
|
|
}
|
2019-08-09 21:43:29 +02:00
|
|
|
|
2021-01-07 16:02:10 +01:00
|
|
|
function markHydrateComplete(): void {
|
2020-01-04 21:53:33 +01:00
|
|
|
if (!ST) return
|
2019-08-09 21:43:29 +02:00
|
|
|
|
|
|
|
performance.mark('afterHydrate') // mark end of hydration
|
|
|
|
|
2019-08-13 17:48:30 +02:00
|
|
|
performance.measure(
|
|
|
|
'Next.js-before-hydration',
|
|
|
|
'navigationStart',
|
|
|
|
'beforeRender'
|
|
|
|
)
|
2019-08-09 21:43:29 +02:00
|
|
|
performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate')
|
2020-04-13 20:46:46 +02:00
|
|
|
|
2019-10-03 21:15:23 +02:00
|
|
|
if (onPerfEntry) {
|
|
|
|
performance.getEntriesByName('Next.js-hydration').forEach(onPerfEntry)
|
|
|
|
}
|
2019-08-09 21:43:29 +02:00
|
|
|
clearMarks()
|
|
|
|
}
|
|
|
|
|
2021-01-07 16:02:10 +01:00
|
|
|
function markRenderComplete(): void {
|
2020-01-04 21:53:33 +01:00
|
|
|
if (!ST) return
|
2019-08-09 21:43:29 +02:00
|
|
|
|
|
|
|
performance.mark('afterRender') // mark end of render
|
2021-01-07 16:02:10 +01:00
|
|
|
const navStartEntries: PerformanceEntryList = performance.getEntriesByName(
|
|
|
|
'routeChange',
|
|
|
|
'mark'
|
|
|
|
)
|
2019-08-09 21:43:29 +02:00
|
|
|
|
2021-01-07 16:02:10 +01:00
|
|
|
if (!navStartEntries.length) return
|
2019-08-09 21:43:29 +02:00
|
|
|
|
|
|
|
performance.measure(
|
|
|
|
'Next.js-route-change-to-render',
|
|
|
|
navStartEntries[0].name,
|
|
|
|
'beforeRender'
|
|
|
|
)
|
|
|
|
performance.measure('Next.js-render', 'beforeRender', 'afterRender')
|
2019-10-03 21:15:23 +02:00
|
|
|
if (onPerfEntry) {
|
|
|
|
performance.getEntriesByName('Next.js-render').forEach(onPerfEntry)
|
|
|
|
performance
|
|
|
|
.getEntriesByName('Next.js-route-change-to-render')
|
|
|
|
.forEach(onPerfEntry)
|
|
|
|
}
|
2021-09-24 20:35:33 +02:00
|
|
|
|
2019-08-09 21:43:29 +02:00
|
|
|
clearMarks()
|
2020-05-18 21:24:37 +02:00
|
|
|
;['Next.js-route-change-to-render', 'Next.js-render'].forEach((measure) =>
|
2020-04-13 20:46:46 +02:00
|
|
|
performance.clearMeasures(measure)
|
|
|
|
)
|
2019-08-09 21:43:29 +02:00
|
|
|
}
|
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
function renderReactElement(
|
|
|
|
domEl: HTMLElement,
|
|
|
|
fn: (cb: () => void) => JSX.Element
|
|
|
|
): void {
|
|
|
|
// mark start of hydrate/render
|
|
|
|
if (ST) {
|
|
|
|
performance.mark('beforeRender')
|
2021-12-14 20:52:37 +01:00
|
|
|
}
|
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
const reactEl = fn(shouldHydrate ? markHydrateComplete : markRenderComplete)
|
2022-10-29 22:34:03 +02:00
|
|
|
if (!reactRoot) {
|
|
|
|
// Unlike with createRoot, you don't need a separate root.render() call here
|
|
|
|
reactRoot = ReactDOM.hydrateRoot(domEl, reactEl)
|
|
|
|
// TODO: Remove shouldHydrate variable when React 18 is stable as it can depend on `reactRoot` existing
|
|
|
|
shouldHydrate = false
|
2022-08-15 16:29:51 +02:00
|
|
|
} else {
|
2022-10-29 22:34:03 +02:00
|
|
|
const startTransition = (React as any).startTransition
|
|
|
|
startTransition(() => {
|
|
|
|
reactRoot.render(reactEl)
|
|
|
|
})
|
2021-12-13 11:48:18 +01:00
|
|
|
}
|
2022-08-15 16:29:51 +02:00
|
|
|
}
|
2021-12-13 11:48:18 +01:00
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
function Root({
|
|
|
|
callbacks,
|
|
|
|
children,
|
|
|
|
}: React.PropsWithChildren<{
|
|
|
|
callbacks: Array<() => void>
|
|
|
|
}>): React.ReactElement {
|
|
|
|
// We use `useLayoutEffect` to guarantee the callbacks are executed
|
|
|
|
// as soon as React flushes the update
|
|
|
|
React.useLayoutEffect(
|
|
|
|
() => callbacks.forEach((callback) => callback()),
|
|
|
|
[callbacks]
|
|
|
|
)
|
|
|
|
// We should ask to measure the Web Vitals after rendering completes so we
|
|
|
|
// don't cause any hydration delay:
|
|
|
|
React.useEffect(() => {
|
|
|
|
measureWebVitals(onPerfEntry)
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
if (process.env.__NEXT_TEST_MODE) {
|
|
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
2022-02-14 22:35:05 +01:00
|
|
|
React.useEffect(() => {
|
2022-08-15 16:29:51 +02:00
|
|
|
window.__NEXT_HYDRATED = true
|
2021-10-26 18:50:56 +02:00
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
if (window.__NEXT_HYDRATED_CB) {
|
|
|
|
window.__NEXT_HYDRATED_CB()
|
|
|
|
}
|
|
|
|
}, [])
|
2021-10-26 18:50:56 +02:00
|
|
|
}
|
2022-08-15 16:29:51 +02:00
|
|
|
|
|
|
|
return children as React.ReactElement
|
2021-10-26 18:50:56 +02:00
|
|
|
}
|
|
|
|
|
2020-11-11 19:13:16 +01:00
|
|
|
function doRender(input: RenderRouteInfo): Promise<any> {
|
2022-09-12 15:15:18 +02:00
|
|
|
let { App, Component, props, err }: RenderRouteInfo = input
|
2020-11-11 19:13:16 +01:00
|
|
|
let styleSheets: StyleSheetTuple[] | undefined =
|
|
|
|
'initial' in input ? undefined : input.styleSheets
|
2017-01-12 02:58:20 +01:00
|
|
|
Component = Component || lastAppProps.Component
|
|
|
|
props = props || lastAppProps.props
|
|
|
|
|
2020-08-13 19:39:33 +02:00
|
|
|
const appProps: AppProps = {
|
|
|
|
...props,
|
2022-09-12 15:15:18 +02:00
|
|
|
Component,
|
2020-08-13 19:39:33 +02:00
|
|
|
err,
|
|
|
|
router,
|
|
|
|
}
|
2017-02-19 21:35:48 +01:00
|
|
|
// lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
|
|
|
|
lastAppProps = appProps
|
|
|
|
|
2021-01-07 16:02:10 +01:00
|
|
|
let canceled: boolean = false
|
2020-08-13 19:39:33 +02:00
|
|
|
let resolvePromise: () => void
|
2020-12-30 05:33:08 +01:00
|
|
|
const renderPromise = new Promise<void>((resolve, reject) => {
|
2020-05-23 23:54:11 +02:00
|
|
|
if (lastRenderReject) {
|
|
|
|
lastRenderReject()
|
|
|
|
}
|
|
|
|
resolvePromise = () => {
|
|
|
|
lastRenderReject = null
|
|
|
|
resolve()
|
|
|
|
}
|
2020-08-26 18:34:53 +02:00
|
|
|
lastRenderReject = () => {
|
|
|
|
canceled = true
|
2020-05-23 23:54:11 +02:00
|
|
|
lastRenderReject = null
|
2020-08-22 13:47:21 +02:00
|
|
|
|
|
|
|
const error: any = new Error('Cancel rendering route')
|
|
|
|
error.cancelled = true
|
|
|
|
reject(error)
|
2020-05-23 23:54:11 +02:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2020-08-26 18:34:53 +02:00
|
|
|
// This function has a return type to ensure it doesn't start returning a
|
|
|
|
// Promise. It should remain synchronous.
|
|
|
|
function onStart(): boolean {
|
2020-08-17 23:20:05 +02:00
|
|
|
if (
|
2020-11-11 19:13:16 +01:00
|
|
|
!styleSheets ||
|
2020-08-17 23:20:05 +02:00
|
|
|
// We use `style-loader` in development, so we don't need to do anything
|
|
|
|
// unless we're in production:
|
|
|
|
process.env.NODE_ENV !== 'production'
|
|
|
|
) {
|
2020-08-26 18:34:53 +02:00
|
|
|
return false
|
2020-08-17 23:20:05 +02:00
|
|
|
}
|
|
|
|
|
2021-01-07 16:02:10 +01:00
|
|
|
const currentStyleTags: HTMLStyleElement[] = looseToArray<HTMLStyleElement>(
|
2020-08-26 18:34:53 +02:00
|
|
|
document.querySelectorAll('style[data-n-href]')
|
|
|
|
)
|
2021-01-07 16:02:10 +01:00
|
|
|
const currentHrefs: Set<string | null> = new Set(
|
2020-08-26 18:34:53 +02:00
|
|
|
currentStyleTags.map((tag) => tag.getAttribute('data-n-href'))
|
2020-08-25 17:03:14 +02:00
|
|
|
)
|
|
|
|
|
2021-01-07 16:02:10 +01:00
|
|
|
const noscript: Element | null = document.querySelector(
|
|
|
|
'noscript[data-n-css]'
|
|
|
|
)
|
2021-08-17 09:18:08 +02:00
|
|
|
const nonce: string | null | undefined =
|
|
|
|
noscript?.getAttribute('data-n-css')
|
2020-11-13 21:29:16 +01:00
|
|
|
|
2021-01-07 16:02:10 +01:00
|
|
|
styleSheets.forEach(({ href, text }: { href: string; text: any }) => {
|
2020-08-26 18:34:53 +02:00
|
|
|
if (!currentHrefs.has(href)) {
|
|
|
|
const styleTag = document.createElement('style')
|
|
|
|
styleTag.setAttribute('data-n-href', href)
|
|
|
|
styleTag.setAttribute('media', 'x')
|
|
|
|
|
2020-11-13 21:29:16 +01:00
|
|
|
if (nonce) {
|
|
|
|
styleTag.setAttribute('nonce', nonce)
|
|
|
|
}
|
|
|
|
|
2020-08-26 18:34:53 +02:00
|
|
|
document.head.appendChild(styleTag)
|
|
|
|
styleTag.appendChild(document.createTextNode(text))
|
2020-08-17 23:20:05 +02:00
|
|
|
}
|
|
|
|
})
|
2020-08-26 18:34:53 +02:00
|
|
|
return true
|
2020-08-17 23:20:05 +02:00
|
|
|
}
|
|
|
|
|
2021-01-07 16:02:10 +01:00
|
|
|
function onHeadCommit(): void {
|
2020-08-17 23:20:05 +02:00
|
|
|
if (
|
|
|
|
// We use `style-loader` in development, so we don't need to do anything
|
|
|
|
// unless we're in production:
|
2020-08-25 17:03:14 +02:00
|
|
|
process.env.NODE_ENV === 'production' &&
|
|
|
|
// We can skip this during hydration. Running it wont cause any harm, but
|
|
|
|
// we may as well save the CPU cycles:
|
2020-11-11 19:13:16 +01:00
|
|
|
styleSheets &&
|
2020-08-26 18:34:53 +02:00
|
|
|
// Ensure this render was not canceled
|
|
|
|
!canceled
|
2020-08-17 23:20:05 +02:00
|
|
|
) {
|
2021-01-07 16:02:10 +01:00
|
|
|
const desiredHrefs: Set<string> = new Set(styleSheets.map((s) => s.href))
|
2021-08-17 09:18:08 +02:00
|
|
|
const currentStyleTags: HTMLStyleElement[] =
|
|
|
|
looseToArray<HTMLStyleElement>(
|
|
|
|
document.querySelectorAll('style[data-n-href]')
|
|
|
|
)
|
2021-01-07 16:02:10 +01:00
|
|
|
const currentHrefs: string[] = currentStyleTags.map(
|
2020-08-26 18:34:53 +02:00
|
|
|
(tag) => tag.getAttribute('data-n-href')!
|
|
|
|
)
|
|
|
|
|
|
|
|
// Toggle `<style>` tags on or off depending on if they're needed:
|
|
|
|
for (let idx = 0; idx < currentHrefs.length; ++idx) {
|
|
|
|
if (desiredHrefs.has(currentHrefs[idx])) {
|
|
|
|
currentStyleTags[idx].removeAttribute('media')
|
2020-08-25 17:03:14 +02:00
|
|
|
} else {
|
2020-08-26 18:34:53 +02:00
|
|
|
currentStyleTags[idx].setAttribute('media', 'x')
|
2020-08-25 17:03:14 +02:00
|
|
|
}
|
2020-08-26 18:34:53 +02:00
|
|
|
}
|
2020-08-17 23:20:05 +02:00
|
|
|
|
2020-08-26 18:34:53 +02:00
|
|
|
// Reorder styles into intended order:
|
2021-01-07 16:02:10 +01:00
|
|
|
let referenceNode: Element | null = document.querySelector(
|
|
|
|
'noscript[data-n-css]'
|
|
|
|
)
|
2020-08-26 18:34:53 +02:00
|
|
|
if (
|
|
|
|
// This should be an invariant:
|
|
|
|
referenceNode
|
|
|
|
) {
|
2021-01-07 16:02:10 +01:00
|
|
|
styleSheets.forEach(({ href }: { href: string }) => {
|
|
|
|
const targetTag: Element | null = document.querySelector(
|
2020-08-26 18:34:53 +02:00
|
|
|
`style[data-n-href="${href}"]`
|
|
|
|
)
|
|
|
|
if (
|
|
|
|
// This should be an invariant:
|
|
|
|
targetTag
|
|
|
|
) {
|
|
|
|
referenceNode!.parentNode!.insertBefore(
|
|
|
|
targetTag,
|
|
|
|
referenceNode!.nextSibling
|
|
|
|
)
|
|
|
|
referenceNode = targetTag
|
|
|
|
}
|
2020-08-17 23:20:05 +02:00
|
|
|
})
|
2020-08-26 18:34:53 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// Finally, clean up server rendered stylesheets:
|
|
|
|
looseToArray<HTMLLinkElement>(
|
|
|
|
document.querySelectorAll('link[data-n-p]')
|
|
|
|
).forEach((el) => {
|
|
|
|
el.parentNode!.removeChild(el)
|
|
|
|
})
|
2020-08-17 23:20:05 +02:00
|
|
|
}
|
2020-12-30 05:33:08 +01:00
|
|
|
|
|
|
|
if (input.scroll) {
|
2022-09-19 15:02:02 +02:00
|
|
|
const htmlElement = document.documentElement
|
|
|
|
const existing = htmlElement.style.scrollBehavior
|
|
|
|
htmlElement.style.scrollBehavior = 'auto'
|
2020-12-31 17:08:12 +01:00
|
|
|
window.scrollTo(input.scroll.x, input.scroll.y)
|
2022-09-19 15:02:02 +02:00
|
|
|
htmlElement.style.scrollBehavior = existing
|
2020-12-30 05:33:08 +01:00
|
|
|
}
|
2020-11-13 04:57:15 +01:00
|
|
|
}
|
2020-08-17 23:20:05 +02:00
|
|
|
|
2021-01-07 16:02:10 +01:00
|
|
|
function onRootCommit(): void {
|
2020-08-17 23:20:05 +02:00
|
|
|
resolvePromise()
|
|
|
|
}
|
|
|
|
|
2021-04-20 17:37:32 +02:00
|
|
|
onStart()
|
|
|
|
|
2021-01-07 16:02:10 +01:00
|
|
|
const elem: JSX.Element = (
|
2021-04-20 17:37:32 +02:00
|
|
|
<>
|
2020-11-13 04:57:15 +01:00
|
|
|
<Head callback={onHeadCommit} />
|
2020-05-23 23:54:11 +02:00
|
|
|
<AppContainer>
|
2022-01-14 14:01:00 +01:00
|
|
|
{renderApp(App, appProps)}
|
2021-03-15 21:18:11 +01:00
|
|
|
<Portal type="next-route-announcer">
|
|
|
|
<RouteAnnouncer />
|
|
|
|
</Portal>
|
2020-05-23 23:54:11 +02:00
|
|
|
</AppContainer>
|
2021-04-20 17:37:32 +02:00
|
|
|
</>
|
2019-10-26 00:20:38 +02:00
|
|
|
)
|
|
|
|
|
|
|
|
// We catch runtime errors using componentDidCatch which will trigger renderError
|
2021-04-20 17:37:32 +02:00
|
|
|
renderReactElement(appElement!, (callback) => (
|
|
|
|
<Root callbacks={[callback, onRootCommit]}>
|
|
|
|
{process.env.__NEXT_STRICT_MODE ? (
|
|
|
|
<React.StrictMode>{elem}</React.StrictMode>
|
|
|
|
) : (
|
|
|
|
elem
|
|
|
|
)}
|
|
|
|
</Root>
|
|
|
|
))
|
2020-08-26 18:34:53 +02:00
|
|
|
|
|
|
|
return renderPromise
|
2020-05-23 23:54:11 +02:00
|
|
|
}
|
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
async function render(renderingProps: RenderRouteInfo): Promise<void> {
|
|
|
|
if (renderingProps.err) {
|
|
|
|
await renderError(renderingProps)
|
|
|
|
return
|
|
|
|
}
|
2022-04-01 00:35:00 +02:00
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
try {
|
|
|
|
await doRender(renderingProps)
|
|
|
|
} catch (err) {
|
|
|
|
const renderErr = getProperError(err)
|
|
|
|
// bubble up cancelation errors
|
|
|
|
if ((renderErr as Error & { cancelled?: boolean }).cancelled) {
|
|
|
|
throw renderErr
|
|
|
|
}
|
2020-09-01 19:43:44 +02:00
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
if (process.env.NODE_ENV === 'development') {
|
|
|
|
// Ensure this error is displayed in the overlay in development
|
|
|
|
setTimeout(() => {
|
|
|
|
throw renderErr
|
|
|
|
})
|
|
|
|
}
|
|
|
|
await renderError({ ...renderingProps, err: renderErr })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export async function hydrate(opts?: { beforeRender?: () => Promise<void> }) {
|
|
|
|
let initialErr = initialData.err
|
|
|
|
|
|
|
|
try {
|
|
|
|
const appEntrypoint = await pageLoader.routeLoader.whenEntrypoint('/_app')
|
|
|
|
if ('error' in appEntrypoint) {
|
|
|
|
throw appEntrypoint.error
|
|
|
|
}
|
|
|
|
|
|
|
|
const { component: app, exports: mod } = appEntrypoint
|
|
|
|
CachedApp = app as AppComponent
|
|
|
|
if (mod && mod.reportWebVitals) {
|
|
|
|
onPerfEntry = ({
|
|
|
|
id,
|
|
|
|
name,
|
|
|
|
startTime,
|
|
|
|
value,
|
|
|
|
duration,
|
|
|
|
entryType,
|
|
|
|
entries,
|
add attribution to web vitals (#39368)
This commit implements the main proposal presented in
https://github.com/vercel/next.js/issues/39241
to add attribution to web vitals.
Attribution adds more specific debugging info to web vitals,
for example in the case of Cumulative Layout Shift (CLS),
we might want to know
> What's the first element that shifted when the single largest layout shift occurred?
on in the case of Largest Contentful Paint (LCP),
> What's the element corresponding to the LCP for the page?
> If it is an image, what's the URL of the image resource?
Attribution is *disabled* by default because it could potentially
generate a lot data and overwhelm the RUM backend.
It is enabled *per metric* (LCP, FCP, CLS, etc)
As part of this change, `web-vitals` has been upgraded to v3.0.0
This version contains minor bug fixes, please see changelog at
https://github.com/GoogleChrome/web-vitals/commit/9fe3cc02c875cb70ac0f1803f5e11b428e7a4014
Fixes #39241
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-04 02:17:30 +02:00
|
|
|
attribution,
|
2022-08-15 16:29:51 +02:00
|
|
|
}: any): void => {
|
|
|
|
// Combines timestamp with random number for unique ID
|
|
|
|
const uniqueID: string = `${Date.now()}-${
|
|
|
|
Math.floor(Math.random() * (9e12 - 1)) + 1e12
|
|
|
|
}`
|
|
|
|
let perfStartEntry: string | undefined
|
|
|
|
|
|
|
|
if (entries && entries.length) {
|
|
|
|
perfStartEntry = entries[0].startTime
|
|
|
|
}
|
|
|
|
|
|
|
|
const webVitals: NextWebVitalsMetric = {
|
|
|
|
id: id || uniqueID,
|
|
|
|
name,
|
|
|
|
startTime: startTime || perfStartEntry,
|
|
|
|
value: value == null ? duration : value,
|
|
|
|
label:
|
|
|
|
entryType === 'mark' || entryType === 'measure'
|
|
|
|
? 'custom'
|
|
|
|
: 'web-vital',
|
|
|
|
}
|
add attribution to web vitals (#39368)
This commit implements the main proposal presented in
https://github.com/vercel/next.js/issues/39241
to add attribution to web vitals.
Attribution adds more specific debugging info to web vitals,
for example in the case of Cumulative Layout Shift (CLS),
we might want to know
> What's the first element that shifted when the single largest layout shift occurred?
on in the case of Largest Contentful Paint (LCP),
> What's the element corresponding to the LCP for the page?
> If it is an image, what's the URL of the image resource?
Attribution is *disabled* by default because it could potentially
generate a lot data and overwhelm the RUM backend.
It is enabled *per metric* (LCP, FCP, CLS, etc)
As part of this change, `web-vitals` has been upgraded to v3.0.0
This version contains minor bug fixes, please see changelog at
https://github.com/GoogleChrome/web-vitals/commit/9fe3cc02c875cb70ac0f1803f5e11b428e7a4014
Fixes #39241
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-04 02:17:30 +02:00
|
|
|
if (attribution) {
|
|
|
|
webVitals.attribution = attribution
|
|
|
|
}
|
2022-08-15 16:29:51 +02:00
|
|
|
mod.reportWebVitals(webVitals)
|
2020-09-01 19:43:44 +02:00
|
|
|
}
|
2022-08-15 16:29:51 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const pageEntrypoint =
|
|
|
|
// The dev server fails to serve script assets when there's a hydration
|
|
|
|
// error, so we need to skip waiting for the entrypoint.
|
|
|
|
process.env.NODE_ENV === 'development' && initialData.err
|
|
|
|
? { error: initialData.err }
|
|
|
|
: await pageLoader.routeLoader.whenEntrypoint(initialData.page)
|
|
|
|
if ('error' in pageEntrypoint) {
|
|
|
|
throw pageEntrypoint.error
|
|
|
|
}
|
|
|
|
CachedComponent = pageEntrypoint.component
|
|
|
|
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
const { isValidElementType } = require('next/dist/compiled/react-is')
|
|
|
|
if (!isValidElementType(CachedComponent)) {
|
|
|
|
throw new Error(
|
|
|
|
`The default export is not a React Component in page: "${initialData.page}"`
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
// This catches errors like throwing in the top level of a module
|
|
|
|
initialErr = getProperError(error)
|
2020-09-01 19:43:44 +02:00
|
|
|
}
|
2022-02-01 21:48:08 +01:00
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
if (process.env.NODE_ENV === 'development') {
|
|
|
|
const {
|
|
|
|
getServerError,
|
|
|
|
} = require('next/dist/compiled/@next/react-dev-overlay/dist/client')
|
|
|
|
// Server-side runtime errors need to be re-thrown on the client-side so
|
|
|
|
// that the overlay is rendered.
|
|
|
|
if (initialErr) {
|
|
|
|
if (initialErr === initialData.err) {
|
|
|
|
setTimeout(() => {
|
|
|
|
let error
|
|
|
|
try {
|
|
|
|
// Generate a new error object. We `throw` it because some browsers
|
|
|
|
// will set the `stack` when thrown, and we want to ensure ours is
|
|
|
|
// not overridden when we re-throw it below.
|
|
|
|
throw new Error(initialErr!.message)
|
|
|
|
} catch (e) {
|
|
|
|
error = e as Error
|
|
|
|
}
|
2020-11-13 04:57:15 +01:00
|
|
|
|
2022-08-15 16:29:51 +02:00
|
|
|
error.name = initialErr!.name
|
|
|
|
error.stack = initialErr!.stack
|
|
|
|
throw getServerError(error, initialErr!.source)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
// We replaced the server-side error with a client-side error, and should
|
|
|
|
// no longer rewrite the stack trace to a Node error.
|
|
|
|
else {
|
|
|
|
setTimeout(() => {
|
|
|
|
throw initialErr
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (window.__NEXT_PRELOADREADY) {
|
|
|
|
await window.__NEXT_PRELOADREADY(initialData.dynamicIds)
|
|
|
|
}
|
|
|
|
|
|
|
|
router = createRouter(initialData.page, initialData.query, asPath, {
|
|
|
|
initialProps: initialData.props,
|
|
|
|
pageLoader,
|
|
|
|
App: CachedApp,
|
|
|
|
Component: CachedComponent,
|
|
|
|
wrapApp,
|
|
|
|
err: initialErr,
|
|
|
|
isFallback: Boolean(initialData.isFallback),
|
|
|
|
subscription: (info, App, scroll) =>
|
|
|
|
render(
|
|
|
|
Object.assign<
|
|
|
|
{},
|
|
|
|
Omit<RenderRouteInfo, 'App' | 'scroll'>,
|
|
|
|
Pick<RenderRouteInfo, 'App' | 'scroll'>
|
|
|
|
>({}, info, {
|
|
|
|
App,
|
|
|
|
scroll,
|
|
|
|
}) as RenderRouteInfo
|
|
|
|
),
|
|
|
|
locale: initialData.locale,
|
|
|
|
locales: initialData.locales,
|
|
|
|
defaultLocale,
|
|
|
|
domainLocales: initialData.domainLocales,
|
|
|
|
isPreview: initialData.isPreview,
|
|
|
|
})
|
|
|
|
|
|
|
|
initialMatchesMiddleware = await router._initialMatchesMiddlewarePromise
|
|
|
|
|
|
|
|
const renderCtx: RenderRouteInfo = {
|
|
|
|
App: CachedApp,
|
|
|
|
initial: true,
|
|
|
|
Component: CachedComponent,
|
|
|
|
props: initialData.props,
|
|
|
|
err: initialErr,
|
|
|
|
}
|
|
|
|
|
|
|
|
if (opts?.beforeRender) {
|
|
|
|
await opts.beforeRender()
|
|
|
|
}
|
|
|
|
|
|
|
|
render(renderCtx)
|
2020-11-13 04:57:15 +01:00
|
|
|
}
|