Add syntax highlighting to debug error page (vercel#195)

billgloff · Nov 4, 2016 · bce4434 · bce4434
1 parent d1a0309
commit bce4434
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -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",

diff --git a/pages/_error-debug.js b/pages/_error-debug.js
@@ -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, '&lt;').replace(/>/g, '&gt;')
+}
+
 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'
+})