75dc5d61e5
* Add paragraph about browser add-ons when encountering some errors When a crash is caused by a NotFoundError exception, add a paragraph to the error page mentioning browser add-ons. Indeed, crashes with NotFoundError are often caused by browser extensions messing with the DOM in ways React.JS can't recover from (e.g. issues #13325 and #14731). * Reword error messages
100 lines
3.5 KiB
JavaScript
100 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import { version, source_url } from 'mastodon/initial_state';
|
|
import StackTrace from 'stacktrace-js';
|
|
|
|
export default class ErrorBoundary extends React.PureComponent {
|
|
|
|
static propTypes = {
|
|
children: PropTypes.node,
|
|
};
|
|
|
|
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,
|
|
});
|
|
});
|
|
}
|
|
|
|
handleCopyStackTrace = () => {
|
|
const { errorMessage, stackTrace, mappedStackTrace } = this.state;
|
|
const textarea = document.createElement('textarea');
|
|
|
|
let contents = [errorMessage, stackTrace];
|
|
if (mappedStackTrace) {
|
|
contents.push(mappedStackTrace);
|
|
}
|
|
|
|
textarea.textContent = contents.join('\n\n\n');
|
|
textarea.style.position = 'fixed';
|
|
|
|
document.body.appendChild(textarea);
|
|
|
|
try {
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
} catch (e) {
|
|
|
|
} finally {
|
|
document.body.removeChild(textarea);
|
|
}
|
|
|
|
this.setState({ copied: true });
|
|
setTimeout(() => this.setState({ copied: false }), 700);
|
|
}
|
|
|
|
render() {
|
|
const { hasError, copied, errorMessage } = this.state;
|
|
|
|
if (!hasError) {
|
|
return this.props.children;
|
|
}
|
|
|
|
const likelyBrowserAddonIssue = errorMessage && errorMessage.includes('NotFoundError');
|
|
|
|
return (
|
|
<div className='error-boundary'>
|
|
<div>
|
|
<p className='error-boundary__error'>
|
|
{ likelyBrowserAddonIssue ? (
|
|
<FormattedMessage id='error.unexpected_crash.explanation_addons' defaultMessage='This page could not be displayed correctly. This error is likely caused by a browser add-on or automatic translation tools.' />
|
|
) : (
|
|
<FormattedMessage id='error.unexpected_crash.explanation' defaultMessage='Due to a bug in our code or a browser compatibility issue, this page could not be displayed correctly.' />
|
|
)}
|
|
</p>
|
|
<p>
|
|
{ likelyBrowserAddonIssue ? (
|
|
<FormattedMessage id='error.unexpected_crash.next_steps_addons' defaultMessage='Try disabling them and refreshing the page. If that does not help, you may still be able to use Mastodon through a different browser or native app.' />
|
|
) : (
|
|
<FormattedMessage id='error.unexpected_crash.next_steps' defaultMessage='Try refreshing the page. If that does not help, you may still be able to use Mastodon through a different browser or native app.' />
|
|
)}
|
|
</p>
|
|
<p className='error-boundary__footer'>Mastodon v{version} · <a href={source_url} rel='noopener noreferrer' target='_blank'><FormattedMessage id='errors.unexpected_crash.report_issue' defaultMessage='Report issue' /></a> · <button onClick={this.handleCopyStackTrace} className={copied ? 'copied' : ''}><FormattedMessage id='errors.unexpected_crash.copy_stacktrace' defaultMessage='Copy stacktrace to clipboard' /></button></p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
}
|