From a28bbb0ff9b5bae8e6bf91d970728d29c83a479c Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Sat, 21 Oct 2017 12:58:59 +0200
Subject: [PATCH] Strip ansi codes when logging client side (#3138)

---
 client/index.js    | 8 +++++---
 client/next-dev.js | 5 +++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/index.js b/client/index.js
index 654dc39f..9c8163ff 100644
--- a/client/index.js
+++ b/client/index.js
@@ -54,20 +54,22 @@ export let router
 export let ErrorComponent
 let ErrorDebugComponent
 let Component
+let stripAnsi = (s) => s
 
-export default async ({ ErrorDebugComponent: passedDebugComponent } = {}) => {
+export default async ({ ErrorDebugComponent: passedDebugComponent, stripAnsi: passedStripAnsi } = {}) => {
   // Wait for all the dynamic chunks to get loaded
   for (const chunkName of chunks) {
     await pageLoader.waitForChunk(chunkName)
   }
 
+  stripAnsi = passedStripAnsi || stripAnsi
   ErrorDebugComponent = passedDebugComponent
   ErrorComponent = await pageLoader.loadPage('/_error')
 
   try {
     Component = await pageLoader.loadPage(pathname)
   } catch (err) {
-    console.error(`${err.message}\n${err.stack}`)
+    console.error(stripAnsi(`${err.message}\n${err.stack}`))
     Component = ErrorComponent
   }
 
@@ -119,7 +121,7 @@ export async function renderError (error) {
   ReactDOM.unmountComponentAtNode(appContainer)
 
   const errorMessage = `${error.message}\n${error.stack}`
-  console.error(errorMessage)
+  console.error(stripAnsi(errorMessage))
 
   if (prod) {
     const initProps = { err: error, pathname, query, asPath }
diff --git a/client/next-dev.js b/client/next-dev.js
index 204b0002..ef771c32 100644
--- a/client/next-dev.js
+++ b/client/next-dev.js
@@ -1,4 +1,5 @@
 import 'react-hot-loader/patch'
+import stripAnsi from 'strip-ansi'
 import initNext, * as next from './'
 import ErrorDebugComponent from '../lib/error-debug'
 import initOnDemandEntries from './on-demand-entries-client'
@@ -6,7 +7,7 @@ import initWebpackHMR from './webpack-hot-middleware-client'
 
 window.next = next
 
-initNext({ ErrorDebugComponent })
+initNext({ ErrorDebugComponent, stripAnsi })
   .then((emitter) => {
     initOnDemandEntries()
     initWebpackHMR()
@@ -34,5 +35,5 @@ initNext({ ErrorDebugComponent })
     })
   })
   .catch((err) => {
-    console.error(`${err.message}\n${err.stack}`)
+    console.error(stripAnsi(`${err.message}\n${err.stack}`))
   })