mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
c5bbff412b
* Enhance system font stack on _error.js `-apple-system` = SF on Safari (macOS/iOS) `BlinkMacSystemFont` = SF on Chrome (macOS) `Roboto` for Android `Segoe UI` for Windows `Fira Sans` for Firefox OS `Avenir` for pre-SF macOS `Helvetica Neue, Lucida Grande` for older macOS * Enhance system font stacks on _error-debug.js Updates fonts to use better quality system fonts where commonly available
57 lines
1.3 KiB
JavaScript
57 lines
1.3 KiB
JavaScript
import React from 'react'
|
|
import stripAnsi from 'strip-ansi'
|
|
import Head from 'next/head'
|
|
import style from 'next/css'
|
|
|
|
export default class ErrorDebug extends React.Component {
|
|
static getInitialProps ({ err }) {
|
|
const { message, module } = err
|
|
return { message, path: module.rawRequest }
|
|
}
|
|
|
|
render () {
|
|
const { message, path } = this.props
|
|
|
|
return <div className={styles.errorDebug}>
|
|
<Head>
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
body {
|
|
background: #dc0067;
|
|
margin: 0;
|
|
}
|
|
`}} />
|
|
</Head>
|
|
<div className={styles.heading}>Error in {path}</div>
|
|
<pre className={styles.message}>{stripAnsi(message)}</pre>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
const styles = {
|
|
body: style({
|
|
background: '#dc0067',
|
|
margin: 0
|
|
}),
|
|
|
|
errorDebug: style({
|
|
height: '100%',
|
|
padding: '16px',
|
|
boxSizing: 'border-box'
|
|
}),
|
|
|
|
message: style({
|
|
fontFamily: '"SF Mono", "Roboto Mono", "Fira Mono", menlo-regular, monospace',
|
|
fontSize: '10px',
|
|
color: '#fff',
|
|
margin: 0
|
|
}),
|
|
|
|
heading: style({
|
|
fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
|
|
fontSize: '13px',
|
|
fontWeight: 'bold',
|
|
color: '#ff90c6',
|
|
marginBottom: '20px'
|
|
})
|
|
}
|