Skip to content

Commit 9348762

Browse files
nkzawarauchg
nkzawa
authored and
rauchg
committed
add next/error (vercel#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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy