mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
c97aca50e5
* Show webpack errors in all pages. When there's a webpack error that means HMR failed too. So, showing other pages won't makes sense since user can't edit them and get changes via HMR. That's why now we show the error on all pages. * Remove exact propType checks from the error component. When there's an error, something this check shows in the console. That means it could accept more props. Also this is not a public API. So, we don't want to do propType checks.
76 lines
1.8 KiB
JavaScript
76 lines
1.8 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import HTTPStatus from 'http-status'
|
|
import Head from './head'
|
|
|
|
export default class Error extends React.Component {
|
|
static getInitialProps ({ res, err }) {
|
|
const statusCode = res ? res.statusCode : (err ? err.statusCode : null)
|
|
return { statusCode }
|
|
}
|
|
|
|
static propTypes = {
|
|
statusCode: PropTypes.number
|
|
}
|
|
|
|
render () {
|
|
const { statusCode } = this.props
|
|
const title = statusCode === 404
|
|
? 'This page could not be found'
|
|
: HTTPStatus[statusCode] || 'An unexpected error has occurred'
|
|
|
|
return <div style={styles.error}>
|
|
<Head>
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
const styles = {
|
|
error: {
|
|
color: '#000',
|
|
background: '#fff',
|
|
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'
|
|
},
|
|
|
|
h1: {
|
|
display: 'inline-block',
|
|
borderRight: '1px solid rgba(0, 0, 0,.3)',
|
|
margin: 0,
|
|
marginRight: '20px',
|
|
padding: '10px 23px 10px 0',
|
|
fontSize: '24px',
|
|
fontWeight: 500,
|
|
verticalAlign: 'top'
|
|
},
|
|
|
|
h2: {
|
|
fontSize: '14px',
|
|
fontWeight: 'normal',
|
|
margin: 0,
|
|
padding: 0
|
|
}
|
|
}
|