Skip to content

Commit 9348762

Browse files
nkzawarauchg
nkzawa
authored and
rauchg
committed
add next/error (#1040)
1 parent a9428b8 commit 9348762

File tree

7 files changed

+80
-72
lines changed

7 files changed

+80
-72
lines changed

‎error.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('./dist/lib/error')

‎examples/with-flow/types/next.js.flow‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ declare module "next/link" {
2020
declare module.exports: Class<React$Component<void, {href: string}, any>>;
2121
}
2222

23+
declare module "next/error" {
24+
declare module.exports: Class<React$Component<void, {statusCode: number}, any>>;
25+
}
26+
2327
declare module "next/prefetch" {
2428
declare export var prefetch: (url: string) => any;
2529
declare export var reloadIfPrefetched: any;

‎lib/error.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react'
2+
import Head from './head'
3+
4+
export default class Error extends React.Component {
5+
static getInitialProps ({ res, xhr }) {
6+
const statusCode = res ? res.statusCode : (xhr ? xhr.status : null)
7+
return { statusCode }
8+
}
9+
10+
render () {
11+
const { statusCode } = this.props
12+
const title = statusCode === 404
13+
? 'This page could not be found'
14+
: (statusCode ? 'Internal Server Error' : 'An unexpected error has occurred')
15+
16+
return <div style={styles.error}>
17+
<Head>
18+
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
19+
</Head>
20+
<div>
21+
<style dangerouslySetInnerHTML={{ __html: 'body { margin: 0 }' }} />
22+
{statusCode ? <h1 style={styles.h1}>{statusCode}</h1> : null}
23+
<div style={styles.desc}>
24+
<h2 style={styles.h2}>{title}.</h2>
25+
</div>
26+
</div>
27+
</div>
28+
}
29+
}
30+
31+
const styles = {
32+
error: {
33+
color: '#000',
34+
background: '#fff',
35+
fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
36+
height: '100vh',
37+
textAlign: 'center',
38+
display: 'flex',
39+
flexDirection: 'column',
40+
alignItems: 'center',
41+
justifyContent: 'center'
42+
},
43+
44+
desc: {
45+
display: 'inline-block',
46+
textAlign: 'left',
47+
lineHeight: '49px',
48+
height: '49px',
49+
verticalAlign: 'middle'
50+
},
51+
52+
h1: {
53+
display: 'inline-block',
54+
borderRight: '1px solid rgba(0, 0, 0,.3)',
55+
margin: 0,
56+
marginRight: '20px',
57+
padding: '10px 23px 10px 0',
58+
fontSize: '24px',
59+
fontWeight: 500,
60+
verticalAlign: 'top'
61+
},
62+
63+
h2: {
64+
fontSize: '14px',
65+
fontWeight: 'normal',
66+
margin: 0,
67+
padding: 0
68+
}
69+
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
"head.js",
1717
"document.js",
1818
"prefetch.js",
19-
"router.js"
19+
"router.js",
20+
"error.js"
2021
],
2122
"bin": {
2223
"next": "./dist/bin/next"

‎pages/_error.js‎

Lines changed: 1 addition & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1 @@
1-
import React from 'react'
2-
import Head from 'next/head'
3-
4-
export default class Error extends React.Component {
5-
static getInitialProps ({ res, xhr }) {
6-
const statusCode = res ? res.statusCode : (xhr ? xhr.status : null)
7-
return { statusCode }
8-
}
9-
10-
render () {
11-
const { statusCode } = this.props
12-
const title = statusCode === 404
13-
? 'This page could not be found'
14-
: (statusCode ? 'Internal Server Error' : 'An unexpected error has occurred')
15-
16-
return <div className='error'>
17-
<Head>
18-
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
19-
</Head>
20-
<div>
21-
{statusCode ? <h1>{statusCode}</h1> : null}
22-
<div className='desc'>
23-
<h2>{title}.</h2>
24-
</div>
25-
</div>
26-
<style jsx global>{`
27-
body { margin: 0 }
28-
`}</style>
29-
<style jsx>{`
30-
.error {
31-
color: #000;
32-
background: #fff;
33-
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
34-
height: 100vh;
35-
text-align: center;
36-
display: flex;
37-
flex-direction: column;
38-
align-items: center;
39-
justify-content: center;
40-
}
41-
42-
.desc {
43-
display: inline-block;
44-
text-align: left;
45-
line-height: 49px;
46-
height: 49px;
47-
vertical-align: middle;
48-
}
49-
50-
h1 {
51-
display: inline-block;
52-
border-right: 1px solid rgba(0, 0, 0,.3);
53-
margin: 0;
54-
margin-right: 20px;
55-
padding: 10px 23px 10px 0;
56-
font-size: 24px;
57-
font-weight: 500;
58-
vertical-align: top;
59-
}
60-
61-
h2 {
62-
font-size: 14px;
63-
font-weight: normal;
64-
margin: 0;
65-
padding: 0;
66-
}
67-
`}</style>
68-
</div>
69-
}
70-
}
1+
module.exports = require('next/error')

‎server/build/babel/preset.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ module.exports = {
2424
'next/css': require.resolve('../../../lib/css'),
2525
'next/head': require.resolve('../../../lib/head'),
2626
'next/document': require.resolve('../../../server/document'),
27-
'next/router': require.resolve('../../../lib/router')
27+
'next/router': require.resolve('../../../lib/router'),
28+
'next/error': require.resolve('../../../lib/error')
2829
}
2930
}
3031
]

‎server/build/webpack.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false
179179
'next/head': require.resolve('../../lib/head'),
180180
'next/document': require.resolve('../../server/document'),
181181
'next/router': require.resolve('../../lib/router'),
182+
'next/error': require.resolve('../../lib/error'),
182183
'styled-jsx/style': require.resolve('styled-jsx/style')
183184
}
184185
}

0 commit comments

Comments
 (0)