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,95 +21,19 @@
 
 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
-    if (error) {
+        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;
@@ -125,7 +49,7 @@ export class ErrorBoundary extends React.Component<Props, State> {
               <div className="wrapper">
                 <code className="block">
                   <p className="contrast">Component stack:</p>
-              {errorInfo.componentStack}
+                  {componentStack}
                 </code>
                 <code className="box grow">
                   <p className="contrast">Error stack:</p> <br/>
@@ -135,12 +59,16 @@ export class ErrorBoundary extends React.Component<Props, State> {
               <Button
                 className="box self-flex-start"
                 primary label="Back"
-            onClick={this.back}
+                onClick={() => {
+                  resetError();
+                  navigation.goBack();
+                }}
               />
             </div>
           );
-    }
+        }}>
-
+        {this.props.children}
-    return this.props.children;
+      </Sentry.ErrorBoundary>
+    );
   }
 }

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"