Update client-side default error (#25997)
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
This commit is contained in:
JJ Kasper
GitHub
parent
a1dc5588c2
commit
1628e6d16c
8 changed files with 44 additions and 11 deletions
14
errors/client-side-exception-occurred.md
Normal file
14
errors/client-side-exception-occurred.md
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
# Client-side Exception Occurred
|
||||
|
||||
#### Why This Error Occurred
|
||||
|
||||
In your production application a client-side error occurred that was not caught by an error boundary. Additional information should be visible in the console tab of your browser.
|
||||
|
||||
#### Possible Ways to Fix It
|
||||
|
||||
Add error boundaries in your React tree to gracefully handle client-side errors and render a fallback view when they occur.
|
||||
|
||||
### Useful Links
|
||||
|
||||
- [Error Boundaries Documentation](https://reactjs.org/docs/error-boundaries.html)
|
||||
- [Custom Error Page Documentation](https://nextjs.org/docs/advanced-features/custom-error-page#more-advanced-error-page-customizing)
|
||||
|
|
@ -43,14 +43,29 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
|
|||
<div style={styles.error}>
|
||||
<Head>
|
||||
<title>
|
||||
{statusCode}: {title}
|
||||
{statusCode
|
||||
? `${statusCode}: ${title}`
|
||||
: 'Application error: a client-side exception has occurred'}
|
||||
</title>
|
||||
</Head>
|
||||
<div>
|
||||
<style dangerouslySetInnerHTML={{ __html: 'body { margin: 0 }' }} />
|
||||
{statusCode ? <h1 style={styles.h1}>{statusCode}</h1> : null}
|
||||
<div style={styles.desc}>
|
||||
<h2 style={styles.h2}>{title}.</h2>
|
||||
<h2 style={styles.h2}>
|
||||
{this.props.title || statusCode ? (
|
||||
title
|
||||
) : (
|
||||
<>
|
||||
Application error: a client-side exception has occurred (
|
||||
<a href="https://nextjs.org/docs/messages/client-side-exception-occurred">
|
||||
developer guidance
|
||||
</a>
|
||||
)
|
||||
</>
|
||||
)}
|
||||
.
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
const App = ({ Component, pageProps }) => <Component {...pageProps} />
|
||||
|
||||
App.getInitialProps = async ({ Component, ctx }) => {
|
||||
let pageProps = {}
|
||||
|
||||
if (Component.getInitialProps) {
|
||||
await Component.getInitialProps(ctx)
|
||||
pageProps = await Component.getInitialProps(ctx)
|
||||
}
|
||||
return {
|
||||
pageProps: {},
|
||||
pageProps,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const runTests = (isDev) => {
|
|||
|
||||
it('should render error correctly', async () => {
|
||||
const text = await renderViaHTTP(appPort, '/err')
|
||||
expect(text).toContain(isDev ? 'oops' : 'An unexpected error has occurred')
|
||||
expect(text).toContain(isDev ? 'oops' : 'Internal Server Error')
|
||||
})
|
||||
|
||||
it('should not show an error in the logs for 404 SSG', async () => {
|
||||
|
|
|
|||
|
|
@ -126,10 +126,10 @@ describe('Build Output', () => {
|
|||
expect(parseFloat(indexFirstLoad)).toBeCloseTo(gz ? 64 : 196, 1)
|
||||
expect(indexFirstLoad.endsWith('kB')).toBe(true)
|
||||
|
||||
expect(parseFloat(err404Size)).toBeCloseTo(gz ? 3.06 : 8.15, 1)
|
||||
expect(parseFloat(err404Size)).toBeCloseTo(gz ? 3.17 : 8.51, 1)
|
||||
expect(err404Size.endsWith('kB')).toBe(true)
|
||||
|
||||
expect(parseFloat(err404FirstLoad)).toBeCloseTo(gz ? 66.8 : 204, 1)
|
||||
expect(parseFloat(err404FirstLoad)).toBeCloseTo(gz ? 66.9 : 205, 1)
|
||||
expect(err404FirstLoad.endsWith('kB')).toBe(true)
|
||||
|
||||
expect(parseFloat(sharedByAll)).toBeCloseTo(gz ? 63.7 : 196, 1)
|
||||
|
|
|
|||
|
|
@ -1509,7 +1509,7 @@ describe('CSS Support', () => {
|
|||
await browser.waitForElementByCss('#link-other').click()
|
||||
await check(
|
||||
() => browser.eval(`document.body.innerText`),
|
||||
'An unexpected error has occurred.',
|
||||
'Application error: a client-side exception has occurred (developer guidance).',
|
||||
true
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const runTests = () => {
|
|||
it('should load 404 page correctly', async () => {
|
||||
const browser = await webdriver(appPort, '/non-existent')
|
||||
expect(await browser.elementByCss('h2').text()).toBe(
|
||||
'An unexpected error has occurred.'
|
||||
'Application error: a client-side exception has occurred (developer guidance).'
|
||||
)
|
||||
expect(await browser.eval('window.uncaughtErrors')).toEqual([])
|
||||
})
|
||||
|
|
@ -74,7 +74,7 @@ const runTests = () => {
|
|||
await browser.waitForElementByCss('h2')
|
||||
expect(await browser.eval('window.beforeNav')).toBe(null)
|
||||
expect(await browser.elementByCss('h2').text()).toBe(
|
||||
'An unexpected error has occurred.'
|
||||
'Application error: a client-side exception has occurred (developer guidance).'
|
||||
)
|
||||
expect(await browser.eval('window.uncaughtErrors')).toEqual([])
|
||||
})
|
||||
|
|
|
|||
|
|
@ -530,7 +530,9 @@ describe('Production Usage', () => {
|
|||
const browser = await webdriver(appPort, '/error-in-browser-render')
|
||||
await waitFor(2000)
|
||||
const text = await browser.elementByCss('body').text()
|
||||
expect(text).toMatch(/An unexpected error has occurred\./)
|
||||
expect(text).toMatch(
|
||||
/Application error: a client-side exception has occurred/
|
||||
)
|
||||
await browser.close()
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue