From 922d05864f4ba37a4026cd5f7e6e6ed5417a7404 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 28 Nov 2018 15:01:40 +0100 Subject: Add error boundary component to catch Web UI crashes --- .../flavours/glitch/components/error_boundary.js | 92 ++++++++++++++++++++++ .../flavours/glitch/containers/mastodon.js | 13 +-- .../glitch/styles/components/error_boundary.scss | 32 ++++++++ .../flavours/glitch/styles/components/index.scss | 1 + 4 files changed, 133 insertions(+), 5 deletions(-) create mode 100644 app/javascript/flavours/glitch/components/error_boundary.js create mode 100644 app/javascript/flavours/glitch/styles/components/error_boundary.scss (limited to 'app') diff --git a/app/javascript/flavours/glitch/components/error_boundary.js b/app/javascript/flavours/glitch/components/error_boundary.js new file mode 100644 index 000000000..fd37383f2 --- /dev/null +++ b/app/javascript/flavours/glitch/components/error_boundary.js @@ -0,0 +1,92 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; + +export default class ErrorBoundary extends React.PureComponent { + + static propTypes = { + children: PropTypes.node, + }; + + state = { + hasError: false, + stackTrace: undefined, + componentStack: undefined, + } + + componentDidCatch(error, info) { + this.setState({ + hasError: true, + stackTrace: error.stack, + componentStack: info && info.componentStack, + }); + } + + handleReload(e) { + e.preventDefault(); + window.location.reload(); + } + + render() { + const { hasError, stackTrace, componentStack } = this.state; + + if (!hasError) return this.props.children; + + let debugInfo = ''; + if (stackTrace) { + debugInfo += 'Stack trace\n-----------\n\n```\n' + stackTrace.toString() + '\n```'; + } + if (componentStack) { + if (debugInfo) { + debugInfo += '\n\n\n'; + } + debugInfo += 'React component stack\n---------------------\n\n```\n' + componentStack.toString() + '\n```'; + } + + return ( +
+
+

+

+ +

    +
  • + }} + /> + { debugInfo !== '' && ( +
    + +