terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Add syntax highlighting to debug error page (#195)

Browse source
This commit is contained in:
David Street 2016-11-04 04:16:29 -04:00 committed by Naoyuki Kanezawa
parent d1a0309af9
commit bce4434db9
2 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -39,6 +39,7 @@
"parser": "babel-eslint" "parser": "babel-eslint"
}, },
"dependencies": { "dependencies": {
"ansi-html": "0.0.6",
"babel-core": "6.17.0", "babel-core": "6.17.0",
"babel-generator": "6.17.0", "babel-generator": "6.17.0",
"babel-loader": "6.2.5", "babel-loader": "6.2.5",
@ -65,7 +66,6 @@
"react-dom": "15.3.2", "react-dom": "15.3.2",
"react-hot-loader": "3.0.0-beta.6", "react-hot-loader": "3.0.0-beta.6",
"send": "0.14.1", "send": "0.14.1",
"strip-ansi": "3.0.1",
"url": "0.11.0", "url": "0.11.0",
"webpack": "1.13.2", "webpack": "1.13.2",
"webpack-dev-server": "1.16.2", "webpack-dev-server": "1.16.2",

25
pages/_error-debug.js
View file

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import stripAnsi from 'strip-ansi' import ansiHTML from 'ansi-html'
import Head from 'next/head' import Head from 'next/head'
import style from 'next/css' import style from 'next/css'
@ -16,20 +16,24 @@ export default class ErrorDebug extends React.Component {
<Head> <Head>
<style dangerouslySetInnerHTML={{ __html: ` <style dangerouslySetInnerHTML={{ __html: `
body { body {
background: #dc0067; background: #a6004c;
margin: 0; margin: 0;
} }
`}} /> `}} />
</Head> </Head>
<div className={styles.heading}>Error in {path}</div> <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> </div>
} }
} }
const encodeHtml = str => {
return str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
}
const styles = { const styles = {
body: style({ body: style({
background: '#dc0067', background: '#a6004c',
margin: 0 margin: 0
}), }),
@ -50,7 +54,18 @@ const styles = {
fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif', fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
fontSize: '13px', fontSize: '13px',
fontWeight: 'bold', fontWeight: 'bold',
color: '#ff90c6', color: '#ff84bf',
marginBottom: '20px' marginBottom: '20px'
}) })
} }
ansiHTML.setColors({
reset: ['fff', 'a6004c'],
darkgrey: '5a012b',
yellow: 'ffab07',
green: 'aeefba',
magenta: 'ff84bf',
blue: '3505a0',
cyan: '56eaec',
red: '4e053a'
})