fix console stack traces for errors from plugins
Summary: We had our stack traces broken for a long time. They always pointed at the bundle.js file. With this change the stack traces **in the console** will be pointing at the actual source files. This will save a lot of time for engineers instead of manually looking for the source of errors. Why this didn't work before? When we were calling `console.error(error.toString())` the browser was not applying sourcemaps to the stacktrace as it interpreted as a random string. However, when you pass an actual instance of Error constructor, the sourcemaps will be applied and we get correct stack traces to the source files. I looked at the code of the Logger and it is already handles the Error instances, so I think this should be fine also for the logs that go to scuba. CC passy Reviewed By: LukeDefeo, passy Differential Revision: D49275025 fbshipit-source-id: 2addc601f45622e35890d7d0e1992f4bca41a338
This commit is contained in:
committed by
Facebook GitHub Bot
parent
e9e7141999
commit
bc5ad749f7
@@ -55,7 +55,8 @@ export default class ErrorBoundary extends Component<
|
|||||||
}
|
}
|
||||||
|
|
||||||
componentDidCatch(err: Error, errorInfo: ErrorInfo) {
|
componentDidCatch(err: Error, errorInfo: ErrorInfo) {
|
||||||
console.error(err.toString(), errorInfo.componentStack, 'ErrorBoundary');
|
// eslint-disable-next-line flipper/no-console-error-without-context
|
||||||
|
console.error(err, errorInfo.componentStack, 'ErrorBoundary');
|
||||||
this.setState({error: err});
|
this.setState({error: err});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -78,11 +79,9 @@ 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 &&
|
||||||
<ErrorBoundaryStack>{`${
|
'Look in the console for correct stack traces.'}
|
||||||
error.stack ?? error.toString()
|
<br />
|
||||||
}`}</ErrorBoundaryStack>
|
|
||||||
)}
|
|
||||||
<Button onClick={this.clearError}>Clear error and try again</Button>
|
<Button onClick={this.clearError}>Clear error and try again</Button>
|
||||||
</ErrorBoundaryContainer>
|
</ErrorBoundaryContainer>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user