Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Global layouts error boundary #41305

Merged
merged 3 commits into from Oct 11, 2022
Merged

Global layouts error boundary #41305

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
340a494
Global layouts error boundary
huozhi Oct 10, 2022
68b7b3b
wrap whole router with error boundary
huozhi Oct 10, 2022
80ef810
Update test/e2e/app-dir/index.test.ts
huozhi Oct 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 10 additions & 7 deletions packages/next/client/components/app-router.client.tsx
View file
Open in desktop
Expand Up @@ -28,6 +28,7 @@ import {
// LayoutSegmentsContext,
} from './hooks-client-context'
import { useReducerWithReduxDevtools } from './use-reducer-with-devtools'
import { ErrorBoundary, GlobalErrorComponent } from './error-boundary'

function urlToUrlWithoutFlightMarker(url: string): URL {
const urlWithoutFlightParameters = new URL(url, location.origin)
Expand Down Expand Up @@ -353,13 +354,15 @@ export default function AppRouter({
url: canonicalUrl,
}}
>
{HotReloader ? (
<HotReloader assetPrefix={assetPrefix}>
{cache.subTreeData}
</HotReloader>
) : (
cache.subTreeData
)}
<ErrorBoundary errorComponent={GlobalErrorComponent}>
huozhi marked this conversation as resolved.
Show resolved Hide resolved
{HotReloader ? (
<HotReloader assetPrefix={assetPrefix}>
{cache.subTreeData}
</HotReloader>
) : (
cache.subTreeData
)}
</ErrorBoundary>
</LayoutRouterContext.Provider>
</AppRouterContext.Provider>
</GlobalLayoutRouterContext.Provider>
Expand Down
108 changes: 108 additions & 0 deletions packages/next/client/components/error-boundary.tsx
View file
Open in desktop
@@ -0,0 +1,108 @@
import React from 'react'

export type ErrorComponent = React.ComponentType<{
error: Error
reset: () => void
}>
interface ErrorBoundaryProps {
errorComponent: ErrorComponent
}

/**
* Handles errors through `getDerivedStateFromError`.
* Renders the provided error component and provides a way to `reset` the error boundary state.
*/
class ErrorBoundaryHandler extends React.Component<
ErrorBoundaryProps,
{ error: Error | null }
> {
constructor(props: ErrorBoundaryProps) {
super(props)
this.state = { error: null }
}

static getDerivedStateFromError(error: Error) {
return { error }
}

reset = () => {
this.setState({ error: null })
}

render() {
if (this.state.error) {
return (
<this.props.errorComponent
error={this.state.error}
reset={this.reset}
/>
)
}

return this.props.children
}
}

/**
* Renders error boundary with the provided "errorComponent" property as the fallback.
* If no "errorComponent" property is provided it renders the children without an error boundary.
*/
export function ErrorBoundary({
errorComponent,
children,
}: ErrorBoundaryProps & { children: React.ReactNode }): JSX.Element {
if (errorComponent) {
return (
<ErrorBoundaryHandler errorComponent={errorComponent}>
{children}
</ErrorBoundaryHandler>
)
}

return <>{children}</>
}

const styles: { [k: string]: React.CSSProperties } = {
error: {
fontFamily:
'-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
height: '100vh',
textAlign: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},

desc: {
display: 'inline-block',
textAlign: 'left',
lineHeight: '49px',
height: '49px',
verticalAlign: 'middle',
},
h2: {
fontSize: '14px',
fontWeight: 'normal',
lineHeight: '49px',
margin: 0,
padding: 0,
},
}

export function GlobalErrorComponent() {
return (
<html>
<body>
<div style={styles.error}>
<div style={styles.desc}>
<h2 style={styles.h2}>
Application error: a client-side exception has occurred (see the
browser console for more information).
</h2>
</div>
</div>
</body>
</html>
)
}
62 changes: 2 additions & 60 deletions packages/next/client/components/layout-router.client.tsx
View file
Open in desktop
Expand Up @@ -20,6 +20,7 @@ import type {
FlightSegmentPath,
// FlightDataPath,
} from '../../server/app-render'
import type { ErrorComponent } from './error-boundary'
import {
LayoutRouterContext,
GlobalLayoutRouterContext,
Expand All @@ -28,7 +29,7 @@ import {
} from '../../shared/lib/app-router-context'
import { fetchServerResponse } from './app-router.client'
import { createInfinitePromise } from './infinite-promise'

import { ErrorBoundary } from './error-boundary'
import { matchSegment } from './match-segments'

/**
Expand Down Expand Up @@ -364,65 +365,6 @@ function NotFoundBoundary({ notFound, children }: NotFoundBoundaryProps) {
)
}

type ErrorComponent = React.ComponentType<{ error: Error; reset: () => void }>
interface ErrorBoundaryProps {
errorComponent: ErrorComponent
}

/**
* Handles errors through `getDerivedStateFromError`.
* Renders the provided error component and provides a way to `reset` the error boundary state.
*/
class ErrorBoundaryHandler extends React.Component<
ErrorBoundaryProps,
{ error: Error | null }
> {
constructor(props: ErrorBoundaryProps) {
super(props)
this.state = { error: null }
}

static getDerivedStateFromError(error: Error) {
return { error }
}

reset = () => {
this.setState({ error: null })
}

render() {
if (this.state.error) {
return (
<this.props.errorComponent
error={this.state.error}
reset={this.reset}
/>
)
}

return this.props.children
}
}

/**
* Renders error boundary with the provided "errorComponent" property as the fallback.
* If no "errorComponent" property is provided it renders the children without an error boundary.
*/
function ErrorBoundary({
errorComponent,
children,
}: ErrorBoundaryProps & { children: React.ReactNode }): JSX.Element {
if (errorComponent) {
return (
<ErrorBoundaryHandler errorComponent={errorComponent}>
{children}
</ErrorBoundaryHandler>
)
}

return <>{children}</>
}

/**
* OuterLayoutRouter handles the current segment as well as <Offscreen> rendering of other segments.
* It can be rendered next to each other with a different `parallelRouterKey`, allowing for Parallel routes.
Expand Down
0 ...ir/app/app/error/clientcomponent/error.js → ...r/app/app/error/client-component/error.js
View file
Open in desktop
File renamed without changes.
0 ...dir/app/app/error/clientcomponent/page.js → ...ir/app/app/error/client-component/page.js
View file
Open in desktop
File renamed without changes.
20 changes: 20 additions & 0 deletions test/e2e/app-dir/app/app/error/global-error-boundary/page.js
View file
Open in desktop
@@ -0,0 +1,20 @@
'client'

import { useState } from 'react'

export default function Page() {
const [clicked, setClicked] = useState(false)
if (clicked) {
throw new Error('this is a test')
}
return (
<button
id="error-trigger-button"
onClick={() => {
setClicked(true)
}}
>
Trigger Error!
</button>
)
}
121 changes: 80 additions & 41 deletions test/e2e/app-dir/index.test.ts
View file
Open in desktop
@@ -1,7 +1,14 @@
import { createNext, FileRef } from 'e2e-utils'
import crypto from 'crypto'
import { NextInstance } from 'test/lib/next-modes/base'
import { check, fetchViaHTTP, renderViaHTTP, waitFor } from 'next-test-utils'
import {
check,
fetchViaHTTP,
getRedboxHeader,
hasRedbox,
renderViaHTTP,
waitFor,
} from 'next-test-utils'
import path from 'path'
import cheerio from 'cheerio'
import webdriver from 'next-webdriver'
Expand Down Expand Up @@ -1494,57 +1501,89 @@ describe('app dir', () => {
)
})

// TODO-APP: This is disabled for development as the error overlay needs to be reworked.
;(isDev ? describe.skip : describe)('error component', () => {
describe('error component', () => {
it('should trigger error component when an error happens during rendering', async () => {
const browser = await webdriver(next.url, '/error/clientcomponent')
await browser
.elementByCss('#error-trigger-button')
.click()
.waitForElementByCss('#error-boundary-message')

expect(
await browser.elementByCss('#error-boundary-message').text()
).toBe('An error occurred: this is a test')
})

it('should allow resetting error boundary', async () => {
const browser = await webdriver(next.url, '/error/clientcomponent')

// Try triggering and resetting a few times in a row
for (let i = 0; i < 5; i++) {
const browser = await webdriver(next.url, '/error/client-component')
await browser.elementByCss('#error-trigger-button').click()

if (isDev) {
expect(await hasRedbox(browser)).toBe(true)
console.log('getRedboxHeader', await getRedboxHeader(browser))
// expect(await getRedboxHeader(browser)).toMatch(/An error occurred: this is a test/)
} else {
await browser
.elementByCss('#error-trigger-button')
.click()
.waitForElementByCss('#error-boundary-message')

expect(
await browser.elementByCss('#error-boundary-message').text()
await browser
.waitForElementByCss('#error-boundary-message')
.elementByCss('#error-boundary-message')
.text()
).toBe('An error occurred: this is a test')

await browser
.elementByCss('#reset')
.click()
.waitForElementByCss('#error-trigger-button')

expect(
await browser.elementByCss('#error-trigger-button').text()
).toBe('Trigger Error!')
}
})

it('should hydrate empty shell to handle server-side rendering errors', async () => {
it('should fallback default error boundary when no error component specified', async () => {
huozhi marked this conversation as resolved.
Show resolved Hide resolved
huozhi marked this conversation as resolved.
Show resolved Hide resolved
const browser = await webdriver(
next.url,
'/error/ssr-error-client-component'
'/error/global-error-boundary'
)
const logs = await browser.log()
const errors = logs
.filter((x) => x.source === 'error')
.map((x) => x.message)
.join('\n')
expect(errors).toInclude('Error during SSR')
await browser.elementByCss('#error-trigger-button').click()
// .waitForElementByCss('body')

if (isDev) {
expect(await hasRedbox(browser)).toBe(true)
console.log('getRedboxHeader', await getRedboxHeader(browser))
// expect(await getRedboxHeader(browser)).toMatch(/An error occurred: this is a test/)
} else {
expect(
await browser
.waitForElementByCss('body')
.elementByCss('body')
.text()
).toBe(
'Application error: a client-side exception has occurred (see the browser console for more information).'
)
}
})

if (!isDev) {
it('should allow resetting error boundary', async () => {
const browser = await webdriver(next.url, '/error/client-component')

// Try triggering and resetting a few times in a row
for (let i = 0; i < 5; i++) {
await browser
.elementByCss('#error-trigger-button')
.click()
.waitForElementByCss('#error-boundary-message')

expect(
await browser.elementByCss('#error-boundary-message').text()
).toBe('An error occurred: this is a test')

await browser
.elementByCss('#reset')
.click()
.waitForElementByCss('#error-trigger-button')

expect(
await browser.elementByCss('#error-trigger-button').text()
).toBe('Trigger Error!')
}
})

it('should hydrate empty shell to handle server-side rendering errors', async () => {
const browser = await webdriver(
next.url,
'/error/ssr-error-client-component'
)
const logs = await browser.log()
const errors = logs
.filter((x) => x.source === 'error')
.map((x) => x.message)
.join('\n')
expect(errors).toInclude('Error during SSR')
})
}
})

describe('known bugs', () => {
Expand Down