diff --git a/package.json b/package.json index 7e09b4b478..3d627d04a1 100644 --- a/package.json +++ b/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", diff --git a/src/renderer/components/error-boundary/error-boundary.tsx b/src/renderer/components/error-boundary/error-boundary.tsx index 764ff798d8..56be840ff7 100644 --- a/src/renderer/components/error-boundary/error-boundary.tsx +++ b/src/renderer/components/error-boundary/error-boundary.tsx @@ -21,126 +21,54 @@ import "./error-boundary.scss"; -import React, { ErrorInfo } 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 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; -} - -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 } } }); -} +import * as Sentry from "@sentry/react"; +import { observer } from "mobx-react"; @observer -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(); - }; - +export class ErrorBoundary extends React.Component { render() { - const { error, errorInfo } = this.state; + return ( + { + const slackLink = Slack; + const githubLink = Github; + const pageUrl = location.pathname; - if (error) { - const slackLink = Slack; - const githubLink = Github; - const pageUrl = location.pathname; - - return ( -
-
- App crash at {pageUrl} -
-

- To help us improve the product please report bugs to {slackLink} community or {githubLink} issues tracker. -

-
- -

Component stack:

- {errorInfo.componentStack} -
- -

Error stack:


- {error.stack} -
-
-
- ); - } - - return this.props.children; + return ( +
+
+ App crash at {pageUrl} +
+

+ To help us improve the product please report bugs to {slackLink} community or {githubLink} issues tracker. +

+
+ +

Component stack:

+ {componentStack} +
+ +

Error stack:


+ {error.stack} +
+
+
+ ); + }}> + {this.props.children} +
+ ); } } diff --git a/yarn.lock b/yarn.lock index 92e9b428a1..d69ada34ac 100644 --- a/yarn.lock +++ b/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"