2017-01-12 02:58:20 +01:00
|
|
|
import React from 'react'
|
2019-09-04 16:00:54 +02:00
|
|
|
import Head from '../next-server/lib/head'
|
2017-01-12 02:58:20 +01:00
|
|
|
|
2019-02-22 00:12:47 +01:00
|
|
|
// This component is only rendered on the server side.
|
2019-02-19 22:45:07 +01:00
|
|
|
export default function ErrorDebug ({ error, info }) {
|
2018-04-18 18:18:06 +02:00
|
|
|
return (
|
|
|
|
<div style={styles.errorDebug}>
|
|
|
|
<Head>
|
|
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
|
|
|
</Head>
|
2019-02-22 00:12:47 +01:00
|
|
|
<StackTrace error={error} info={info} />
|
2018-04-18 18:18:06 +02:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2018-11-21 16:04:37 +01:00
|
|
|
const StackTrace = ({ error: { name, message, stack }, info }) => (
|
2017-01-15 17:17:29 +01:00
|
|
|
<div>
|
2017-03-23 00:13:23 +01:00
|
|
|
<div style={styles.heading}>{message || name}</div>
|
2019-05-29 13:57:26 +02:00
|
|
|
<pre style={styles.stack}>{stack}</pre>
|
|
|
|
{info && <pre style={styles.stack}>{info.componentStack}</pre>}
|
2017-01-15 17:17:29 +01:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
|
2018-05-31 11:47:29 +02:00
|
|
|
export const styles = {
|
2017-01-12 02:58:20 +01:00
|
|
|
errorDebug: {
|
2018-09-05 17:13:44 +02:00
|
|
|
background: '#ffffff',
|
2017-01-12 02:58:20 +01:00
|
|
|
boxSizing: 'border-box',
|
|
|
|
overflow: 'auto',
|
2017-06-09 20:50:58 +02:00
|
|
|
padding: '24px',
|
2017-01-12 02:58:20 +01:00
|
|
|
position: 'fixed',
|
|
|
|
left: 0,
|
|
|
|
right: 0,
|
|
|
|
top: 0,
|
|
|
|
bottom: 0,
|
2018-04-18 18:18:06 +02:00
|
|
|
zIndex: 9999,
|
2018-09-05 17:13:44 +02:00
|
|
|
color: '#000000'
|
2017-01-12 02:58:20 +01:00
|
|
|
},
|
|
|
|
|
2017-03-23 00:13:23 +01:00
|
|
|
stack: {
|
2019-05-29 13:57:26 +02:00
|
|
|
fontFamily:
|
|
|
|
'"SF Mono", "Roboto Mono", "Fira Mono", consolas, menlo-regular, monospace',
|
2017-01-22 03:12:27 +01:00
|
|
|
fontSize: '13px',
|
2017-06-09 20:50:58 +02:00
|
|
|
lineHeight: '18px',
|
2018-09-05 17:13:44 +02:00
|
|
|
color: '#777',
|
2017-01-12 02:58:20 +01:00
|
|
|
margin: 0,
|
|
|
|
whiteSpace: 'pre-wrap',
|
2017-03-23 00:13:23 +01:00
|
|
|
wordWrap: 'break-word',
|
2017-06-09 20:50:58 +02:00
|
|
|
marginTop: '16px'
|
2017-01-12 02:58:20 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
heading: {
|
2019-05-29 13:57:26 +02:00
|
|
|
fontFamily:
|
|
|
|
'-apple-system, system-ui, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
|
2017-06-09 20:50:58 +02:00
|
|
|
fontSize: '20px',
|
|
|
|
fontWeight: '400',
|
|
|
|
lineHeight: '28px',
|
2018-09-05 17:13:44 +02:00
|
|
|
color: '#000000',
|
2017-06-09 20:50:58 +02:00
|
|
|
marginBottom: '0px',
|
|
|
|
marginTop: '0px'
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|
|
|
|
}
|