From 8af12ec0e142c348ed6b0918b823b3674471eed2 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 19 Dec 2018 13:47:17 -0500
Subject: [PATCH] Show error ID and report React errors to Sentry

---
 src/components/crashmessage/crashmessage.jsx   | 11 +++++++++++
 src/components/errorboundary/errorboundary.jsx | 18 +++++++++++++++---
 src/l10n.json                                  |  1 +
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/crashmessage/crashmessage.jsx b/src/components/crashmessage/crashmessage.jsx
index d66a3c610..50fc181fb 100644
--- a/src/components/crashmessage/crashmessage.jsx
+++ b/src/components/crashmessage/crashmessage.jsx
@@ -20,6 +20,16 @@ const CrashMessage = props => (
             <p>
                 <FormattedMessage id="general.unhandledError" />
             </p>
+            {props.eventId && (
+                <p>
+                    <FormattedMessage
+                        id="general.errorIdentifier"
+                        values={{
+                            errorId: props.eventId
+                        }}
+                    />
+                </p>
+            )}
             <Button
                 className=""
                 onClick={props.onBack}
@@ -32,6 +42,7 @@ const CrashMessage = props => (
 
 CrashMessage.propTypes = {
     className: PropTypes.string,
+    eventId: PropTypes.string,
     onBack: PropTypes.func
 };
 
diff --git a/src/components/errorboundary/errorboundary.jsx b/src/components/errorboundary/errorboundary.jsx
index d678e995d..b2964d181 100644
--- a/src/components/errorboundary/errorboundary.jsx
+++ b/src/components/errorboundary/errorboundary.jsx
@@ -8,13 +8,20 @@ class ErrorBoundary extends React.Component {
     constructor (props) {
         super(props);
         this.state = {
-            hasError: false
+            hasError: false,
+            errorId: null
         };
     }
 
     componentDidCatch (error, info) {
         // Display fallback UI
-        this.setState({hasError: true});
+        this.setState({
+            hasError: true,
+            errorId: window.Raven ? window.Raven.lastEventId() : null
+        });
+        if (window.Raven) {
+            window.Raven.captureException(error, {extra: info});
+        }
         log.error(`Unhandled Error: ${error}, info: ${info}`);
     }
 
@@ -24,7 +31,12 @@ class ErrorBoundary extends React.Component {
 
     render () {
         if (this.state.hasError) {
-            return <CrashMessageComponent onBack={this.handleBack} />;
+            return (
+                <CrashMessageComponent
+                    eventId={this.state.eventId}
+                    onBack={this.handleBack}
+                />
+            );
         }
         return this.props.children;
     }
diff --git a/src/l10n.json b/src/l10n.json
index 8d29c90db..63fcd1011 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -18,6 +18,7 @@
     "general.dmca": "DMCA",
     "general.emailAddress": "Email Address",
     "general.error": "Oops! Something went wrong",
+    "general.errorIdentifier": "Your error was logged with id {errorId}",
     "general.explore": "Explore",
     "general.faq": "FAQ",
     "general.female": "Female",