diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2022-10-22 23:18:32 +0200 |
---|---|---|
committer | Claire <claire.github-309c@sitedethib.com> | 2022-10-28 19:24:02 +0200 |
commit | 1315c149c0c6159cf7b7091b31accedb714a648f (patch) | |
tree | a35f4151a97956042143d547b1b9ec66ba2aa751 /app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js | |
parent | 92385da9c3d3c88108db530dd468c1933d40540f (diff) |
[Glitch] Add error boundary around routes in web UI
Port a43a8237681187f6e56524aa3effcfc998a877de to glitch-soc Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh> Signed-off-by: Claire <claire.github-309c@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js | 34 |
1 files changed, 32 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js b/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js index 60a81a581..8946c8252 100644 --- a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js +++ b/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Switch, Route } from 'react-router-dom'; - +import StackTrace from 'stacktrace-js'; import ColumnLoading from 'flavours/glitch/features/ui/components/column_loading'; import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error'; import BundleContainer from 'flavours/glitch/features/ui/containers/bundle_container'; @@ -42,8 +42,38 @@ export class WrappedRoute extends React.Component { componentParams: {}, }; + static getDerivedStateFromError () { + return { + hasError: true, + }; + }; + + state = { + hasError: false, + stacktrace: '', + }; + + componentDidCatch (error) { + StackTrace.fromError(error).then(stackframes => { + this.setState({ stacktrace: error.toString() + '\n' + stackframes.map(frame => frame.toString()).join('\n') }); + }).catch(err => { + console.error(err); + }); + } + renderComponent = ({ match }) => { const { component, content, multiColumn, componentParams } = this.props; + const { hasError, stacktrace } = this.state; + + if (hasError) { + return ( + <BundleColumnError + stacktrace={stacktrace} + multiColumn={multiColumn} + errorType='error' + /> + ); + } return ( <BundleContainer fetchComponent={component} loading={this.renderLoading} error={this.renderError}> @@ -59,7 +89,7 @@ export class WrappedRoute extends React.Component { } renderError = (props) => { - return <BundleColumnError {...props} />; + return <BundleColumnError {...props} errorType='network' />; } render () { |