Skip to content

Instantly share code, notes, and snippets.

@bryanrsmith
Last active June 25, 2021 15:32
Show Gist options
  • Save bryanrsmith/36b0faab1ec11bdf677ec982b2abce89 to your computer and use it in GitHub Desktop.
Save bryanrsmith/36b0faab1ec11bdf677ec982b2abce89 to your computer and use it in GitHub Desktop.
Next.js custom error handler that doesn't display for errors encountered on initial client render
import React, { PropTypes } from 'react';
import Head from 'next/head';
import Router from 'next/router';
// Script errors occuring during initial client render can cause the server-rendered
// content to be hidden by an error page. Track router events to determine if the
// error being handled happened during initial render, and throw within
// getInitialProps to allow the server-rendered content to remain visible.
const isClient = typeof window !== 'undefined';
let isInitialClientRender = isClient;
if (isClient) {
Router.ready(() => {
Router.router.once('routeChangeStart', () => {
isInitialClientRender = false;
});
});
}
export default class Error extends React.Component {
static getInitialProps({ err, res, xhr }) {
if (isInitialClientRender) {
// rethrow to prevent the error view from displaying on initial client render
throw err;
}
const statusCode = (res && res.statusCode) || (xhr && xhr.status) || null;
return { statusCode };
}
static propTypes = {
statusCode: PropTypes.number,
}
render() {
const { statusCode } = this.props;
const title = statusCode === 404
? 'This page could not be found'
: (statusCode && 'Internal Server Error' || 'An unexpected error has occurred');
return (<div className="error">
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Head>
<div>
{statusCode ? <h1>{statusCode}</h1> : null}
<div className="desc">
<h2>{title}.</h2>
</div>
</div>
<style jsx global>{`
body { margin: 0 }
`}</style>
<style jsx>{`
.error {
color: #000;
background: #fff;
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
height: 100vh;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.desc {
display: inline-block;
text-align: left;
line-height: 49px;
height: 49px;
vertical-align: middle;
}
h1 {
display: inline-block;
border-right: 1px solid rgba(0, 0, 0,.3);
margin: 0;
margin-right: 20px;
padding: 10px 23px 10px 0;
font-size: 24px;
font-weight: 500;
vertical-align: top;
}
h2 {
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 0;
}
`}</style>
</div>);
}
}
@MatteoGauthier-serli
Copy link

How to use this snippet ? idu

@tgmarinho
Copy link

How to use this snippet ? idu

add this to pages/_error.js

in some code or component: throw new Error("bommmm");

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment