2017-02-08 19:59:33 +00:00
|
|
|
import React from 'react'
|
2017-07-09 13:12:20 +00:00
|
|
|
import PropTypes from 'prop-types'
|
2017-02-14 15:15:42 +00:00
|
|
|
import HTTPStatus from 'http-status'
|
2017-02-08 19:59:33 +00:00
|
|
|
import Head from './head'
|
|
|
|
|
|
|
|
|
|
export default class Error extends React.Component {
|
2017-04-18 04:18:43 +00:00
|
|
|
static getInitialProps ({ res, err }) {
|
|
|
|
|
const statusCode = res ? res.statusCode : (err ? err.statusCode : null)
|
2017-02-08 19:59:33 +00:00
|
|
|
return { statusCode }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render () {
|
|
|
|
|
const { statusCode } = this.props
|
|
|
|
|
const title = statusCode === 404
|
|
|
|
|
? 'This page could not be found'
|
2017-02-14 15:15:42 +00:00
|
|
|
: HTTPStatus[statusCode] || 'An unexpected error has occurred'
|
2017-02-08 19:59:33 +00:00
|
|
|
|
|
|
|
|
return <div style={styles.error}>
|
|
|
|
|
<Head>
|
|
|
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
2018-05-25 11:35:59 +00:00
|
|
|
<title>{statusCode}: {title}</title>
|
2017-02-08 19:59:33 +00:00
|
|
|
</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>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-09-18 18:17:35 +00:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
2018-09-14 09:34:08 +00:00
|
|
|
Error.propTypes = {
|
|
|
|
|
statusCode: PropTypes.number
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2017-02-08 19:59:33 +00:00
|
|
|
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',
|
2017-08-12 04:40:07 +00:00
|
|
|
lineHeight: 'inherit',
|
2017-02-08 19:59:33 +00:00
|
|
|
margin: 0,
|
|
|
|
|
padding: 0
|
|
|
|
|
}
|
|
|
|
|
}
|
