mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Usign Sentry.ErrorBoundary
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
Hung-Han (Henry) Chen
parent
6616c0b937
commit
f7bcad0717
@ -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",
|
||||
|
||||
@ -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<Props, State> {
|
||||
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 (
|
||||
<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="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>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
14
yarn.lock
14
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user