2016-10-19 12:41:45 +00:00
|
|
|
import React from 'react'
|
2017-01-01 19:36:17 +00:00
|
|
|
import Head from 'next/head'
|
2016-11-05 15:15:54 +00:00
|
|
|
import ansiHTML from 'ansi-html'
|
2016-10-19 12:41:45 +00:00
|
|
|
|
|
|
|
|
export default class ErrorDebug extends React.Component {
|
|
|
|
|
static getInitialProps ({ err }) {
|
2016-11-24 14:03:16 +00:00
|
|
|
const { name, message, stack, module } = err
|
|
|
|
|
return { name, message, stack, path: module ? module.rawRequest : null }
|
2016-10-19 12:41:45 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render () {
|
2016-11-24 14:03:16 +00:00
|
|
|
const { name, message, stack, path } = this.props
|
2016-10-19 12:41:45 +00:00
|
|
|
|
2016-12-19 18:42:19 +00:00
|
|
|
return <div className='errorDebug'>
|
2017-01-01 19:36:17 +00:00
|
|
|
<Head>
|
|
|
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
|
|
|
|
</Head>
|
2016-12-19 18:42:19 +00:00
|
|
|
{path ? <div className='heading'>Error in {path}</div> : null}
|
2016-11-24 14:03:16 +00:00
|
|
|
{
|
|
|
|
|
name === 'ModuleBuildError'
|
2016-12-19 18:42:19 +00:00
|
|
|
? <pre className='message' dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
|
|
|
|
|
: <pre className='message'>{stack}</pre>
|
2016-11-24 14:03:16 +00:00
|
|
|
}
|
2016-12-19 18:42:19 +00:00
|
|
|
<style jsx global>{`
|
|
|
|
|
body {
|
|
|
|
|
background: #a6004c;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
`}</style>
|
|
|
|
|
<style jsx>{`
|
|
|
|
|
.errorDebug {
|
2017-01-02 06:32:42 +00:00
|
|
|
height: 100%;
|
2016-12-19 18:42:19 +00:00
|
|
|
padding: 16px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message {
|
|
|
|
|
font-family: "SF Mono", "Roboto Mono", "Fira Mono", menlo-regular, monospace;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
color: #fbe7f1;
|
|
|
|
|
margin: 0;
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.heading {
|
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #ff84bf;
|
|
|
|
|
margin-bottom: 20pxl
|
|
|
|
|
}
|
|
|
|
|
`}</style>
|
2016-10-19 12:41:45 +00:00
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-11-05 15:15:54 +00:00
|
|
|
const encodeHtml = str => {
|
|
|
|
|
return str.replace(/</g, '<').replace(/>/g, '>')
|
|
|
|
|
}
|
|
|
|
|
|
2016-11-05 17:02:57 +00:00
|
|
|
// see color definitions of babel-code-frame:
|
|
|
|
|
// https://github.com/babel/babel/blob/master/packages/babel-code-frame/src/index.js
|
|
|
|
|
|
2016-11-05 15:15:54 +00:00
|
|
|
ansiHTML.setColors({
|
2016-11-14 17:31:42 +00:00
|
|
|
reset: ['fff', 'a6004c'],
|
2016-11-05 17:02:57 +00:00
|
|
|
darkgrey: 'e54590',
|
|
|
|
|
yellow: 'ee8cbb',
|
|
|
|
|
green: 'f2a2c7',
|
|
|
|
|
magenta: 'fbe7f1',
|
|
|
|
|
blue: 'fff',
|
|
|
|
|
cyan: 'ef8bb9',
|
|
|
|
|
red: 'fff'
|
2016-11-05 15:15:54 +00:00
|
|
|
})
|
