From eb15ec0ea49fdecaaa4c08f4051270fbb20fa878 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 21 Feb 2018 11:30:36 -0800
Subject: [PATCH] Add stack trace information to EuiErrorBoundary.

---
 CHANGELOG.md                                  |  2 +-
 .../views/error_boundary/error_boundary.js    |  2 +-
 .../__snapshots__/error_boundary.test.js.snap | 40 ++++++++++++++++++-
 .../error_boundary/_error_boundary.scss       |  4 ++
 .../error_boundary/error_boundary.js          |  4 +-
 5 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f4538ceedaa1..8ef653a6dbd5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.22`.
+- Added stack trace information to `EuiErrorBoundary` ([#428](https://github.com/elastic/eui/pull/428))
 
 # [`0.0.22`](https://github.com/elastic/eui/tree/v0.0.22)
 
diff --git a/src-docs/src/views/error_boundary/error_boundary.js b/src-docs/src/views/error_boundary/error_boundary.js
index b501a5889ed7..8e43a9012ffa 100644
--- a/src-docs/src/views/error_boundary/error_boundary.js
+++ b/src-docs/src/views/error_boundary/error_boundary.js
@@ -5,7 +5,7 @@ import {
 } from '../../../../src/components';
 
 const BadComponent = () => {
-  throw new Error('I\'m here to kick butt and chew bubblegum.\n\n\And I\'m all out of gum.');
+  throw new Error('I\'m here to kick butt and chew bubblegum. And I\'m all out of gum.');
 };
 
 export default () => (
diff --git a/src/components/error_boundary/__snapshots__/error_boundary.test.js.snap b/src/components/error_boundary/__snapshots__/error_boundary.test.js.snap
index 5124b9ba82ae..ef156ea0d053 100644
--- a/src/components/error_boundary/__snapshots__/error_boundary.test.js.snap
+++ b/src/components/error_boundary/__snapshots__/error_boundary.test.js.snap
@@ -15,11 +15,49 @@ exports[`EuiErrorBoundary is rendered with an error 1`] = `
       <h1>
         Error
       </h1>
-      <pre>
+      <pre
+        class="euiErrorBoundary__stack"
+      >
         <p>
           Error: I'm here to kick butt and chew bubblegum.
 
 And I'm all out of gum.
+    at BadComponent (/Users/cjcenizal/Documents/GitHub/Elastic/eui/src/components/error_boundary/error_boundary.test.js:15:9)
+    at mountIndeterminateComponent (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:8032:15)
+    at beginWork (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:8221:16)
+    at performUnitOfWork (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:10224:16)
+    at workLoop (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:10288:26)
+    at HTMLUnknownElement.callCallback (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:542:14)
+    at invokeEventListeners (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
+    at HTMLUnknownElementImpl._dispatch (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
+    at HTMLUnknownElementImpl.dispatchEvent (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
+    at HTMLUnknownElementImpl.dispatchEvent (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
+    at HTMLUnknownElement.dispatchEvent (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
+    at Object.invokeGuardedCallbackDev (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:581:16)
+    at invokeGuardedCallback (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:438:27)
+    at renderRoot (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:10366:7)
+    at performWorkOnRoot (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:11014:24)
+    at performWork (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:10967:7)
+    at requestWork (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:10878:7)
+    at scheduleWorkImpl (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:10732:11)
+    at scheduleWork (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:10689:12)
+    at scheduleTopLevelUpdate (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:11193:5)
+    at Object.updateContainer (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:11231:7)
+    at /Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:15226:19
+    at Object.unbatchedUpdates (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:11102:12)
+    at renderSubtreeIntoContainer (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:15225:17)
+    at Object.render (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/react-dom/cjs/react-dom.development.js:15290:12)
+    at Object.render (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
+    at new ReactWrapper (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/enzyme/build/ReactWrapper.js:98:16)
+    at mount (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/enzyme/build/mount.js:19:10)
+    at Object.&lt;anonymous&gt; (/Users/cjcenizal/Documents/GitHub/Elastic/eui/src/components/error_boundary/error_boundary.test.js:34:39)
+    at Object.asyncFn (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/jest-jasmine2/build/jasmine_async.js:129:432)
+    at resolve (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/jest-jasmine2/build/queue_runner.js:51:12)
+    at Promise (&lt;anonymous&gt;)
+    at mapper (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/jest-jasmine2/build/queue_runner.js:40:274)
+    at promise.then (/Users/cjcenizal/Documents/GitHub/Elastic/eui/node_modules/jest-jasmine2/build/queue_runner.js:83:39)
+    at &lt;anonymous&gt;
+    at process._tickCallback (internal/process/next_tick.js:169:7)
         </p>
       </pre>
     </div>
diff --git a/src/components/error_boundary/_error_boundary.scss b/src/components/error_boundary/_error_boundary.scss
index 17fb958d5d3c..f0bc10fcd7b4 100644
--- a/src/components/error_boundary/_error_boundary.scss
+++ b/src/components/error_boundary/_error_boundary.scss
@@ -17,3 +17,7 @@
     background-color: $euiColorEmptyShade;
     padding: $euiSizeS;
   }
+
+  .euiErrorBoundary__stack {
+    white-space: pre-wrap;
+  }
diff --git a/src/components/error_boundary/error_boundary.js b/src/components/error_boundary/error_boundary.js
index 5040100834ad..f47844c3cfd1 100644
--- a/src/components/error_boundary/error_boundary.js
+++ b/src/components/error_boundary/error_boundary.js
@@ -42,9 +42,9 @@ export class EuiErrorBoundary extends Component {
           <div className="euiErrorBoundary__text">
             <EuiText size="xs">
               <h1>Error</h1>
-              <pre>
+              <pre className="euiErrorBoundary__stack">
                 <p>
-                  {this.state.error && this.state.error.toString()}
+                  {this.state.error && this.state.error.stack}
                 </p>
               </pre>
             </EuiText>