Usign Sentry.ErrorBoundary

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

package.json

@@ -256,6 +256,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@sentry/react": "^6.8.0",
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.6",
     "@types/byline": "^4.2.32",

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

@@ -21,126 +21,54 @@
 
 import "./error-boundary.scss";
 
-import React, { ErrorInfo } from "react";
+import React from "react";
-import { reaction } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
-import {
-  captureEvent,
-  captureException,
-  eventFromException,
-} from "@sentry/browser";
-import type { Event } from "@sentry/types";
-import { parseSemver } from "@sentry/utils";
 import { Button } from "../button";
 import { navigation } from "../../navigation";
 import { issuesTrackerUrl, slackUrl } from "../../../common/vars";
-
+import * as Sentry from "@sentry/react";
-interface Props {
+import { observer } from "mobx-react";
-}
-
-interface State {
-  error?: Error;
-  errorInfo?: ErrorInfo;
-}
-
-const reactVersion = parseSemver(React.version);
-
-/**
- * Logs react error boundary errors to Sentry.
- * 
- * @param error An error captured by React Error Boundary
- * @param componentStack The component stacktrace
- * 
- * edited from https://github.com/getsentry/sentry-javascript/blob/master/packages/react/src/errorboundary.tsx
- */
-function captureReactErrorBoundaryError(error: Error, componentStack: string) {
-  const errorBoundaryError = new Error(error.message);
-
-  errorBoundaryError.name = `React ErrorBoundary ${errorBoundaryError.name}`;
-  errorBoundaryError.stack = componentStack;
-
-  let errorBoundaryEvent: Event = {};
-
-  void eventFromException({}, errorBoundaryError).then(e => {
-    errorBoundaryEvent = e;
-  });
-
-  if (
-    errorBoundaryEvent.exception &&
-    Array.isArray(errorBoundaryEvent.exception.values) &&
-    reactVersion.major &&
-    reactVersion.major >= 17
-  ) {
-    let originalEvent: Event = {};
-
-    void eventFromException({}, error).then(e => {
-      originalEvent = e;
-    });
-
-    if (originalEvent.exception && Array.isArray(originalEvent.exception.values)) {
-      originalEvent.exception.values = [...errorBoundaryEvent.exception.values, ...originalEvent.exception.values];
-    }
-
-    return captureEvent(originalEvent);
-  }
-
-  return captureException(error, { contexts: { react: { componentStack } } });
-}
 
 @observer
-export class ErrorBoundary extends React.Component<Props, State> {
+export class ErrorBoundary extends React.Component {
-  public state: State = {};
-
-  @disposeOnUnmount
-  resetOnNavigate = reaction(
-    () => navigation.toString(),
-    () => this.setState({ error: null, errorInfo: null })
-  );
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    captureReactErrorBoundaryError(error, errorInfo.componentStack);
-    this.setState({ error, errorInfo });
-  }
-
-  back = () => {
-    navigation.goBack();
-  };
-
   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) {
+          return (
-      const slackLink = <a href={slackUrl} rel="noreferrer" target="_blank">Slack</a>;
+            <div className="flex ErrorBoundary column gaps">
-      const githubLink = <a href={issuesTrackerUrl} rel="noreferrer" target="_blank">Github</a>;
+              <h5>
-      const pageUrl = location.pathname;
+                App crash at <span className="contrast">{pageUrl}</span>
-
+              </h5>
-      return (
+              <p>
-        <div className="flex ErrorBoundary column gaps">
+                To help us improve the product please report bugs to {slackLink} community or {githubLink} issues tracker.
-          <h5>
+              </p>
-            App crash at <span className="contrast">{pageUrl}</span>
+              <div className="wrapper">
-          </h5>
+                <code className="block">
-          <p>
+                  <p className="contrast">Component stack:</p>
-            To help us improve the product please report bugs to {slackLink} community or {githubLink} issues tracker.
+                  {componentStack}
-          </p>
+                </code>
-          <div className="wrapper">
+                <code className="box grow">
-            <code className="block">
+                  <p className="contrast">Error stack:</p> <br/>
-              <p className="contrast">Component stack:</p>
+                  {error.stack}
-              {errorInfo.componentStack}
+                </code>
-            </code>
+              </div>
-            <code className="box grow">
+              <Button
-              <p className="contrast">Error stack:</p> <br/>
+                className="box self-flex-start"
-              {error.stack}
+                primary label="Back"
-            </code>
+                onClick={() => {
-          </div>
+                  resetError();
-          <Button
+                  navigation.goBack();
-            className="box self-flex-start"
+                }}
-            primary label="Back"
+              />
-            onClick={this.back}
+            </div>
-          />
+          );
-        </div>
+        }}>
-      );
+        {this.props.children}
-    }
+      </Sentry.ErrorBoundary>
-
+    );
-    return this.props.children;
   }
 }

yarn.lock

@@ -954,7 +954,7 @@
     "@sentry/utils" "6.7.1"
     tslib "^1.9.3"
 
-"@sentry/browser@^6.8.0":
+"@sentry/browser@6.8.0", "@sentry/browser@^6.8.0":
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.8.0.tgz#023707cd2302f6818014e9a7e124856b2d064178"
   integrity sha512-nxa71csHlG5sMHUxI4e4xxuCWtbCv/QbBfMsYw7ncJSfCKG3yNlCVh8NJ7NS0rZW/MJUT6S6+r93zw0HetNDOA==
@@ -1060,6 +1060,18 @@
     lru_map "^0.3.3"
     tslib "^1.9.3"
 
+"@sentry/react@^6.8.0":
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-6.8.0.tgz#3cf4a2e1ef042ee227836e268e702e9cb3b67e41"
+  integrity sha512-yXNnDaVw8kIacbwQjA27w8DA74WxmDVw4RlUTJGtq35SDmWsaGN1mwvU+mE1u3zEg927QTCBYig2Zqk8Tdt/fQ==
+  dependencies:
+    "@sentry/browser" "6.8.0"
+    "@sentry/minimal" "6.8.0"
+    "@sentry/types" "6.8.0"
+    "@sentry/utils" "6.8.0"
+    hoist-non-react-statics "^3.3.2"
+    tslib "^1.9.3"
+
 "@sentry/tracing@6.7.1":
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.7.1.tgz#b11f0c17a6c5dc14ef44733e5436afb686683268"