[Glitch] Add source-mapped stacktrace to error message in web UI

Port ff3a11d01d to glitch-soc
rebase/4.0.0rc2
Thibaut Girka 2020-02-19 23:16:29 +01:00
parent c9166a5943
commit bc4de2f661
1 changed files with 20 additions and 2 deletions

View File

@ -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) {