Add paragraph about browser add-ons when encountering some errors (#14801)

* 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
rebase/4.0.0rc2
ThibG 2020-09-14 15:05:22 +02:00 committed by GitHub
parent e975877d9c
commit b67caf9be4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 3 deletions

View File

@ -66,17 +66,31 @@ export default class ErrorBoundary extends React.PureComponent {
} }
render() { render() {
const { hasError, copied } = this.state; const { hasError, copied, errorMessage } = this.state;
if (!hasError) { if (!hasError) {
return this.props.children; return this.props.children;
} }
const likelyBrowserAddonIssue = errorMessage && errorMessage.includes('NotFoundError');
return ( return (
<div className='error-boundary'> <div className='error-boundary'>
<div> <div>
<p className='error-boundary__error'><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 className='error-boundary__error'>
<p><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> { 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> <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>
</div> </div>