jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

correct stack traces in flipper ui

Browse Source 
Reviewed By: ivanmisuno

Differential Revision: D50015828

fbshipit-source-id: 09da568db0dd75c4a07e4ff23704b81149444b75
This commit is contained in:
Anton Kastritskiy
2023-10-10 03:37:21 -07:00
committed by Facebook GitHub Bot
parent c4a1c90a1e
commit 76cb3190fd
3 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
desktop/flipper-ui-core/package.json
View File

@@ -48,6 +48,7 @@
"redux-persist": "^6.0.0", "redux-persist": "^6.0.0",
"reselect": "^4.1.8", "reselect": "^4.1.8",
"semver": "^7.5.4", "semver": "^7.5.4",
"stacktrace-js": "2.0.2",
"uuid": "^8.3.2" "uuid": "^8.3.2"
}, },
"devDependencies": { "devDependencies": {

23
desktop/flipper-ui-core/src/ui/components/ErrorBoundary.tsx
View File

@@ -14,6 +14,7 @@ import Button from './Button';
import View from './View'; import View from './View';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import React from 'react'; import React from 'react';
import StackTrace from 'stacktrace-js';
const ErrorBoundaryContainer = styled(View)({ const ErrorBoundaryContainer = styled(View)({
overflow: 'auto', overflow: 'auto',
@@ -40,6 +41,7 @@ type ErrorBoundaryProps = {
type ErrorBoundaryState = { type ErrorBoundaryState = {
error: Error | null | undefined; error: Error | null | undefined;
mappedStack: string | null;
}; };
/** /**
@@ -51,17 +53,26 @@ export default class ErrorBoundary extends Component<
> { > {
constructor(props: ErrorBoundaryProps, context: Object) { constructor(props: ErrorBoundaryProps, context: Object) {
super(props, context); super(props, context);
this.state = {error: null}; this.state = {error: null, mappedStack: null};
} }
componentDidCatch(err: Error, errorInfo: ErrorInfo) { componentDidCatch(err: Error, errorInfo: ErrorInfo) {
// eslint-disable-next-line flipper/no-console-error-without-context // eslint-disable-next-line flipper/no-console-error-without-context
console.error(err, errorInfo.componentStack, 'ErrorBoundary'); console.error(err, errorInfo.componentStack, 'ErrorBoundary');
this.setState({error: err}); this.setState({error: err});
// eslint-disable-next-line promise/no-promise-in-callback
StackTrace.fromError(err)
.then((frames) => {
const mappedStack = frames.map((frame) => frame.toString()).join('\n');
this.setState({error: err, mappedStack});
})
.catch((e) => {
console.log('[stacktrace-js] failed to extract stack trace', e);
});
} }
clearError = () => { clearError = () => {
this.setState({error: null}); this.setState({error: null, mappedStack: null});
}; };
render() { render() {
@@ -79,9 +90,11 @@ export default class ErrorBoundary extends Component<
return ( return (
<ErrorBoundaryContainer grow> <ErrorBoundaryContainer grow>
<Heading>{heading}</Heading> <Heading>{heading}</Heading>
{this.props.showStack !== false && {this.props.showStack !== false && (
'Look in the console for correct stack traces.'} <ErrorBoundaryStack>
<br /> {this.state.mappedStack ?? 'Loading stack trace...'}
</ErrorBoundaryStack>
)}
<Button onClick={this.clearError}>Clear error and try again</Button> <Button onClick={this.clearError}>Clear error and try again</Button>
</ErrorBoundaryContainer> </ErrorBoundaryContainer>
); );

2
desktop/yarn.lock
View File

@@ -14547,7 +14547,7 @@ stacktrace-gps@^3.0.4:
source-map "0.5.6" source-map "0.5.6"
stackframe "^1.3.4" stackframe "^1.3.4"
stacktrace-js@^2.0.2: stacktrace-js@2.0.2, stacktrace-js@^2.0.2:
version "2.0.2" version "2.0.2"
resolved "https://registry.yarnpkg.com/stacktrace-js/-/stacktrace-js-2.0.2.tgz#4ca93ea9f494752d55709a081d400fdaebee897b" resolved "https://registry.yarnpkg.com/stacktrace-js/-/stacktrace-js-2.0.2.tgz#4ca93ea9f494752d55709a081d400fdaebee897b"
integrity sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg== integrity sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==