Show error ID and report React errors to Sentry

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
 };
 

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;
     }

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",