From bc4de2f66117b5eac8ebe4a389ad9915c471b0c5 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 19 Feb 2020 23:16:29 +0100 Subject: [PATCH] [Glitch] Add source-mapped stacktrace to error message in web UI Port ff3a11d01d262c0a37cc1e33db2013b19729fb9d to glitch-soc --- .../glitch/components/error_boundary.js | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/components/error_boundary.js b/app/javascript/flavours/glitch/components/error_boundary.js index 62950a7d39..8998802b1b 100644 --- a/app/javascript/flavours/glitch/components/error_boundary.js +++ b/app/javascript/flavours/glitch/components/error_boundary.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import { preferencesLink } from 'flavours/glitch/util/backend_links'; +import StackTrace from 'stacktrace-js'; export default class ErrorBoundary extends React.PureComponent { @@ -11,15 +12,29 @@ export default class ErrorBoundary extends React.PureComponent { state = { hasError: false, + errorMessage: undefined, stackTrace: undefined, + mappedStackTrace: undefined, componentStack: undefined, } componentDidCatch(error, info) { this.setState({ hasError: true, + errorMessage: error.toString(), stackTrace: error.stack, componentStack: info && info.componentStack, + mappedStackTrace: undefined, + }); + + StackTrace.fromError(error).then((stackframes) => { + this.setState({ + mappedStackTrace: stackframes.map((sf) => sf.toString()).join('\n'), + }); + }).catch(() => { + this.setState({ + mappedStackTrace: undefined, + }); }); } @@ -29,13 +44,16 @@ export default class ErrorBoundary extends React.PureComponent { } render() { - const { hasError, stackTrace, componentStack } = this.state; + const { hasError, errorMessage, stackTrace, mappedStackTrace, componentStack } = this.state; if (!hasError) return this.props.children; let debugInfo = ''; if (stackTrace) { - debugInfo += 'Stack trace\n-----------\n\n```\n' + stackTrace.toString() + '\n```'; + debugInfo += 'Stack trace\n-----------\n\n```\n' + errorMessage + '\n' + stackTrace.toString() + '\n```'; + } + if (mappedStackTrace) { + debugInfo += 'Mapped stack trace\n-----------\n\n```\n' + errorMessage + '\n' + mappedStackTrace.toString() + '\n```'; } if (componentStack) { if (debugInfo) {