From c4177bc36adc7c3810614d959b91118696cfc9c7 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 1 Dec 2020 15:40:12 -0600
Subject: [PATCH] [EuiErrorBoundary] Show message in non-Chromium browsers
 (#4324)

* build error message from Error subparts

* CL
---
 CHANGELOG.md                                     |  4 +++-
 src/components/error_boundary/error_boundary.tsx | 12 +++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b8b680fe993..1494e0b184c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `30.5.1`.
+**Bug fixes**
+
+- Expose `EuiErrorBoundary` error message not showing in non-Chromium browsers ([#4324](https://github.com/elastic/eui/pull/4324))
 
 ## [`30.5.1`](https://github.com/elastic/eui/tree/v30.5.1)
 
diff --git a/src/components/error_boundary/error_boundary.tsx b/src/components/error_boundary/error_boundary.tsx
index 9436aae5e49..dd01f129086 100644
--- a/src/components/error_boundary/error_boundary.tsx
+++ b/src/components/error_boundary/error_boundary.tsx
@@ -25,7 +25,7 @@ import { EuiText } from '../text';
 
 interface EuiErrorBoundaryState {
   hasError: boolean;
-  error?: Error;
+  error?: string;
 }
 
 export type EuiErrorBoundaryProps = CommonProps &
@@ -55,8 +55,14 @@ export class EuiErrorBoundary extends Component<
     this.state = errorState;
   }
 
-  componentDidCatch(error: Error) {
+  componentDidCatch({ message, stack }: Error) {
     // Display fallback UI
+    // Only Chrome includes the `message` property as part of `stack`.
+    // For consistency, rebuild the full error text from the Error subparts.
+    const idx = stack?.indexOf(message) || -1;
+    const stackStr = idx > -1 ? stack?.substr(idx + message.length + 1) : stack;
+    const error = `Error: ${message}
+${stackStr}`;
     this.setState({
       hasError: true,
       error,
@@ -74,7 +80,7 @@ export class EuiErrorBoundary extends Component<
             <EuiText size="xs">
               <h1>Error</h1>
               <pre className="euiErrorBoundary__stack">
-                <p>{this.state.error && this.state.error.stack}</p>
+                <p>{this.state.error}</p>
               </pre>
             </EuiText>
           </div>