mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Add syntax highlighting to debug error page (#195)
This commit is contained in:
parent
d1a0309af9
commit
bce4434db9
|
@ -39,6 +39,7 @@
|
|||
"parser": "babel-eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-html": "0.0.6",
|
||||
"babel-core": "6.17.0",
|
||||
"babel-generator": "6.17.0",
|
||||
"babel-loader": "6.2.5",
|
||||
|
@ -65,7 +66,6 @@
|
|||
"react-dom": "15.3.2",
|
||||
"react-hot-loader": "3.0.0-beta.6",
|
||||
"send": "0.14.1",
|
||||
"strip-ansi": "3.0.1",
|
||||
"url": "0.11.0",
|
||||
"webpack": "1.13.2",
|
||||
"webpack-dev-server": "1.16.2",
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import stripAnsi from 'strip-ansi'
|
||||
import ansiHTML from 'ansi-html'
|
||||
import Head from 'next/head'
|
||||
import style from 'next/css'
|
||||
|
||||
|
@ -16,20 +16,24 @@ export default class ErrorDebug extends React.Component {
|
|||
<Head>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
body {
|
||||
background: #dc0067;
|
||||
background: #a6004c;
|
||||
margin: 0;
|
||||
}
|
||||
`}} />
|
||||
</Head>
|
||||
<div className={styles.heading}>Error in {path}</div>
|
||||
<pre className={styles.message}>{stripAnsi(message)}</pre>
|
||||
<pre className={styles.message} dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
const encodeHtml = str => {
|
||||
return str.replace(/</g, '<').replace(/>/g, '>')
|
||||
}
|
||||
|
||||
const styles = {
|
||||
body: style({
|
||||
background: '#dc0067',
|
||||
background: '#a6004c',
|
||||
margin: 0
|
||||
}),
|
||||
|
||||
|
@ -50,7 +54,18 @@ const styles = {
|
|||
fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
|
||||
fontSize: '13px',
|
||||
fontWeight: 'bold',
|
||||
color: '#ff90c6',
|
||||
color: '#ff84bf',
|
||||
marginBottom: '20px'
|
||||
})
|
||||
}
|
||||
|
||||
ansiHTML.setColors({
|
||||
reset: ['fff', 'a6004c'],
|
||||
darkgrey: '5a012b',
|
||||
yellow: 'ffab07',
|
||||
green: 'aeefba',
|
||||
magenta: 'ff84bf',
|
||||
blue: '3505a0',
|
||||
cyan: '56eaec',
|
||||
red: '4e053a'
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue