app/javascript/mastodon/components/error_boundary.js

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import { FormattedMessage } from 'react-intl';
   4 import { version, source_url } from 'mastodon/initial_state';
   5 import StackTrace from 'stacktrace-js';
   6
   7 export default class ErrorBoundary extends React.PureComponent {
   8
   9   static propTypes = {
  10     children: PropTypes.node,
  11   };
  12
  13   state = {
  14     hasError: false,
  15     errorMessage: undefined,
  16     stackTrace: undefined,
  17     mappedStackTrace: undefined,
  18     componentStack: undefined,
  19   };
  20
  21   componentDidCatch (error, info) {
  22     this.setState({
  23       hasError: true,
  24       errorMessage: error.toString(),
  25       stackTrace: error.stack,
  26       componentStack: info && info.componentStack,
  27       mappedStackTrace: undefined,
  28     });
  29
  30     StackTrace.fromError(error).then((stackframes) => {
  31       this.setState({
  32         mappedStackTrace: stackframes.map((sf) => sf.toString()).join('\n'),
  33       });
  34     }).catch(() => {
  35       this.setState({
  36         mappedStackTrace: undefined,
  37       });
  38     });
  39   }
  40
  41   handleCopyStackTrace = () => {
  42     const { errorMessage, stackTrace, mappedStackTrace } = this.state;
  43     const textarea = document.createElement('textarea');
  44
  45     let contents = [errorMessage, stackTrace];
  46     if (mappedStackTrace) {
  47       contents.push(mappedStackTrace);
  48     }
  49
  50     textarea.textContent    = contents.join('\n\n\n');
  51     textarea.style.position = 'fixed';
  52
  53     document.body.appendChild(textarea);
  54
  55     try {
  56       textarea.select();
  57       document.execCommand('copy');
  58     } catch (e) {
  59
  60     } finally {
  61       document.body.removeChild(textarea);
  62     }
  63
  64     this.setState({ copied: true });
  65     setTimeout(() => this.setState({ copied: false }), 700);
  66   }
  67
  68   render() {
  69     const { hasError, copied, errorMessage } = this.state;
  70
  71     if (!hasError) {
  72       return this.props.children;
  73     }
  74
  75     const likelyBrowserAddonIssue = errorMessage && errorMessage.includes('NotFoundError');
  76
  77     return (
  78       <div className='error-boundary'>
  79         <div>
  80           <p className='error-boundary__error'>
  81             { likelyBrowserAddonIssue ? (
  82               <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.' />
  83             ) : (
  84               <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.' />
  85             )}
  86           </p>
  87           <p>
  88             { likelyBrowserAddonIssue ? (
  89               <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.' />
  90             ) : (
  91               <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.' />
  92             )}
  93           </p>
  94           <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>
  95         </div>
  96       </div>
  97     );
  98   }
  99
 100 }