mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
add next/error (#1040)
This commit is contained in:
parent
a9428b88e3
commit
9348762f4a
|
@ -20,6 +20,10 @@ declare module "next/link" {
|
||||||
declare module.exports: Class<React$Component<void, {href: string}, any>>;
|
declare module.exports: Class<React$Component<void, {href: string}, any>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
declare module "next/error" {
|
||||||
|
declare module.exports: Class<React$Component<void, {statusCode: number}, any>>;
|
||||||
|
}
|
||||||
|
|
||||||
declare module "next/prefetch" {
|
declare module "next/prefetch" {
|
||||||
declare export var prefetch: (url: string) => any;
|
declare export var prefetch: (url: string) => any;
|
||||||
declare export var reloadIfPrefetched: any;
|
declare export var reloadIfPrefetched: any;
|
||||||
|
|
69
lib/error.js
Normal file
69
lib/error.js
Normal file
|
@ -0,0 +1,69 @@
|
||||||
|
import React from 'react'
|
||||||
|
import Head from './head'
|
||||||
|
|
||||||
|
export default class Error extends React.Component {
|
||||||
|
static getInitialProps ({ res, xhr }) {
|
||||||
|
const statusCode = res ? res.statusCode : (xhr ? xhr.status : null)
|
||||||
|
return { statusCode }
|
||||||
|
}
|
||||||
|
|
||||||
|
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 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
|
||||||
|
}
|
||||||
|
}
|
|
@ -16,7 +16,8 @@
|
||||||
"head.js",
|
"head.js",
|
||||||
"document.js",
|
"document.js",
|
||||||
"prefetch.js",
|
"prefetch.js",
|
||||||
"router.js"
|
"router.js",
|
||||||
|
"error.js"
|
||||||
],
|
],
|
||||||
"bin": {
|
"bin": {
|
||||||
"next": "./dist/bin/next"
|
"next": "./dist/bin/next"
|
||||||
|
|
|
@ -1,70 +1 @@
|
||||||
import React from 'react'
|
module.exports = require('next/error')
|
||||||
import Head from 'next/head'
|
|
||||||
|
|
||||||
export default class Error extends React.Component {
|
|
||||||
static getInitialProps ({ res, xhr }) {
|
|
||||||
const statusCode = res ? res.statusCode : (xhr ? xhr.status : null)
|
|
||||||
return { statusCode }
|
|
||||||
}
|
|
||||||
|
|
||||||
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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -24,7 +24,8 @@ module.exports = {
|
||||||
'next/css': require.resolve('../../../lib/css'),
|
'next/css': require.resolve('../../../lib/css'),
|
||||||
'next/head': require.resolve('../../../lib/head'),
|
'next/head': require.resolve('../../../lib/head'),
|
||||||
'next/document': require.resolve('../../../server/document'),
|
'next/document': require.resolve('../../../server/document'),
|
||||||
'next/router': require.resolve('../../../lib/router')
|
'next/router': require.resolve('../../../lib/router'),
|
||||||
|
'next/error': require.resolve('../../../lib/error')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -179,6 +179,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false
|
||||||
'next/head': require.resolve('../../lib/head'),
|
'next/head': require.resolve('../../lib/head'),
|
||||||
'next/document': require.resolve('../../server/document'),
|
'next/document': require.resolve('../../server/document'),
|
||||||
'next/router': require.resolve('../../lib/router'),
|
'next/router': require.resolve('../../lib/router'),
|
||||||
|
'next/error': require.resolve('../../lib/error'),
|
||||||
'styled-jsx/style': require.resolve('styled-jsx/style')
|
'styled-jsx/style': require.resolve('styled-jsx/style')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue