From 40ca680e3980fdb89e6cb01ebffa4a3e01904224 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 19 Dec 2018 13:39:56 -0500
Subject: [PATCH] Show error ID if available from Raven

---
 src/components/crash-message/crash-message.jsx | 13 +++++++++++++
 src/containers/error-boundary.jsx              | 18 +++++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/crash-message/crash-message.jsx b/src/components/crash-message/crash-message.jsx
index 4fe8cc0ec..c3732ddc0 100644
--- a/src/components/crash-message/crash-message.jsx
+++ b/src/components/crash-message/crash-message.jsx
@@ -29,6 +29,18 @@ const CrashMessage = props => (
                     id="gui.crashMessage.description"
                 />
             </p>
+            {props.eventId && (
+                <p>
+                    <FormattedMessage
+                        defaultMessage="Your error was logged with id {errorId}"
+                        description="Message to inform the user that page has crashed."
+                        id="gui.crashMessage.errorNumber"
+                        values={{
+                            errorId: props.eventId
+                        }}
+                    />
+                </p>
+            )}
             <button
                 className={styles.reloadButton}
                 onClick={props.onReload}
@@ -44,6 +56,7 @@ const CrashMessage = props => (
 );
 
 CrashMessage.propTypes = {
+    eventId: PropTypes.string,
     onReload: PropTypes.func.isRequired
 };
 
diff --git a/src/containers/error-boundary.jsx b/src/containers/error-boundary.jsx
index 6485a41b8..e5bfb3ea2 100644
--- a/src/containers/error-boundary.jsx
+++ b/src/containers/error-boundary.jsx
@@ -12,7 +12,8 @@ class ErrorBoundary extends React.Component {
     constructor (props) {
         super(props);
         this.state = {
-            hasError: false
+            hasError: false,
+            errorId: null
         };
     }
 
@@ -24,7 +25,10 @@ class ErrorBoundary extends React.Component {
         };
 
         // Display fallback UI
-        this.setState({hasError: true});
+        this.setState({
+            hasError: true,
+            errorId: window.Raven ? window.Raven.lastEventId() : null
+        });
 
         // Log errors to analytics, separating supported browsers from unsupported.
         if (supportedBrowser()) {
@@ -33,6 +37,9 @@ class ErrorBoundary extends React.Component {
                 action: this.props.action,
                 label: error.message
             });
+            if (window.Raven) {
+                window.Raven.captureException(error, {extra: info});
+            }
         } else {
             analytics.event({
                 category: 'Unsupported Browser Error',
@@ -56,7 +63,12 @@ class ErrorBoundary extends React.Component {
     render () {
         if (this.state.hasError) {
             if (supportedBrowser()) {
-                return <CrashMessageComponent onReload={this.handleReload} />;
+                return (
+                    <CrashMessageComponent
+                        eventId={this.state.errorId}
+                        onReload={this.handleReload}
+                    />
+                );
             }
             return (<BrowserModalComponent
                 isRtl={this.props.isRtl}