import PropTypes from 'prop-types'; import { PureComponent } from 'react'; import { FormattedMessage } from 'react-intl'; import { Helmet } from 'react-helmet'; import StackTrace from 'stacktrace-js'; import { version, source_url } from 'mastodon/initial_state'; export default class ErrorBoundary extends 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> <Helmet> <meta name='robots' content='noindex' /> </Helmet> </div> ); } }