Add Sentry to capture exceptions and console.error messages, add a checkbox in preference to enable/disable error reporting (#3252)

src/renderer/components/error-boundary/error-boundary.tsx

@@ -21,74 +21,54 @@
 
 import "./error-boundary.scss";
 
-import React, { ErrorInfo } from "react";
-import { reaction } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
+import React from "react";
 import { Button } from "../button";
 import { navigation } from "../../navigation";
 import { issuesTrackerUrl, slackUrl } from "../../../common/vars";
-
-interface Props {
-}
-
-interface State {
-  error?: Error;
-  errorInfo?: ErrorInfo;
-}
+import * as Sentry from "@sentry/react";
+import { observer } from "mobx-react";
 
 @observer
-export class ErrorBoundary extends React.Component<Props, State> {
-  public state: State = {};
-
-  @disposeOnUnmount
-  resetOnNavigate = reaction(
-    () => navigation.toString(),
-    () => this.setState({ error: null, errorInfo: null })
-  );
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    this.setState({ error, errorInfo });
-  }
-
-  back = () => {
-    navigation.goBack();
-  };
-
+export class ErrorBoundary extends React.Component {
   render() {
-    const { error, errorInfo } = this.state;
+    return (
+      <Sentry.ErrorBoundary
+        fallback={({ error, componentStack, resetError }) => {
+          const slackLink = <a href={slackUrl} rel="noreferrer" target="_blank">Slack</a>;
+          const githubLink = <a href={issuesTrackerUrl} rel="noreferrer" target="_blank">Github</a>;
+          const pageUrl = location.pathname;
 
-    if (error) {
-      const slackLink = <a href={slackUrl} rel="noreferrer" target="_blank">Slack</a>;
-      const githubLink = <a href={issuesTrackerUrl} rel="noreferrer" target="_blank">Github</a>;
-      const pageUrl = location.pathname;
-
-      return (
-        <div className="ErrorBoundary flex column gaps">
-          <h5>
-            App crash at <span className="contrast">{pageUrl}</span>
-          </h5>
-          <p>
-            To help us improve the product please report bugs to {slackLink} community or {githubLink} issues tracker.
-          </p>
-          <div className="wrapper">
-            <code className="block">
-              <p className="contrast">Component stack:</p>
-              {errorInfo.componentStack}
-            </code>
-            <code className="box grow">
-              <p className="contrast">Error stack:</p> <br/>
-              {error.stack}
-            </code>
-          </div>
-          <Button
-            className="box self-flex-start"
-            primary label="Back"
-            onClick={this.back}
-          />
-        </div>
-      );
-    }
-
-    return this.props.children;
+          return (
+            <div className="flex ErrorBoundary column gaps">
+              <h5>
+                App crash at <span className="contrast">{pageUrl}</span>
+              </h5>
+              <p>
+                To help us improve the product please report bugs to {slackLink} community or {githubLink} issues tracker.
+              </p>
+              <div className="wrapper">
+                <code className="block">
+                  <p className="contrast">Component stack:</p>
+                  {componentStack}
+                </code>
+                <code className="box grow">
+                  <p className="contrast">Error stack:</p> <br/>
+                  {error.stack}
+                </code>
+              </div>
+              <Button
+                className="box self-flex-start"
+                primary label="Back"
+                onClick={() => {
+                  resetError();
+                  navigation.goBack();
+                }}
+              />
+            </div>
+          );
+        }}>
+        {this.props.children}
+      </Sentry.ErrorBoundary>
+    );
   }
 }