From bc5ad749f7f1de7dd7d5dc1972ed8eb26a342550 Mon Sep 17 00:00:00 2001 From: Anton Kastritskiy Date: Thu, 14 Sep 2023 09:40:09 -0700 Subject: [PATCH] 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 --- .../src/ui/components/ErrorBoundary.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/desktop/flipper-ui-core/src/ui/components/ErrorBoundary.tsx b/desktop/flipper-ui-core/src/ui/components/ErrorBoundary.tsx index 95c7b9f1e..11fea18b6 100644 --- a/desktop/flipper-ui-core/src/ui/components/ErrorBoundary.tsx +++ b/desktop/flipper-ui-core/src/ui/components/ErrorBoundary.tsx @@ -55,7 +55,8 @@ export default class ErrorBoundary extends Component< } 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}); } @@ -78,11 +79,9 @@ export default class ErrorBoundary extends Component< return ( {heading} - {this.props.showStack !== false && ( - {`${ - error.stack ?? error.toString() - }`} - )} + {this.props.showStack !== false && + 'Look in the console for correct stack traces.'} +
);