diff options
Diffstat (limited to 'web/source/settings/lib/navigation')
| -rw-r--r-- | web/source/settings/lib/navigation/components.jsx | 72 |
1 files changed, 67 insertions, 5 deletions
diff --git a/web/source/settings/lib/navigation/components.jsx b/web/source/settings/lib/navigation/components.jsx index 18e0cd76c..365ebff89 100644 --- a/web/source/settings/lib/navigation/components.jsx +++ b/web/source/settings/lib/navigation/components.jsx @@ -21,11 +21,8 @@ const React = require("react"); const { Link, Route, Redirect, Switch, useLocation, useRouter } = require("wouter"); -const { ErrorBoundary } = require("react-error-boundary"); const syncpipe = require("syncpipe"); -const { ErrorFallback } = require("../../components/error"); - const { RoleContext, useHasPermission, @@ -72,8 +69,8 @@ function ViewRouter(routing, defaultRoute) { (_) => _.map((route) => { return ( <Route path={route.routingUrl} key={route.key}> - <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => { }}> - {/* FIXME: implement onReset */} + <ErrorBoundary> + {/* FIXME: implement reset */} <BaseUrlContext.Provider value={route.url}> {route.view} </BaseUrlContext.Provider> @@ -134,6 +131,71 @@ function MenuComponent({ type, name, url, icon, permissions, links, level, child ); } +class ErrorBoundary extends React.Component { + + constructor() { + super(); + this.state = {}; + + this.resetErrorBoundary = () => { + this.setState({}); + }; + } + + static getDerivedStateFromError(error) { + return { hadError: true, error }; + } + + componentDidCatch(_e, info) { + this.setState({ + ...this.state, + componentStack: info.componentStack + }); + } + + render() { + if (this.state.hadError) { + return ( + <ErrorFallback + error={this.state.error} + componentStack={this.state.componentStack} + resetErrorBoundary={this.resetErrorBoundary} + /> + ); + } else { + return this.props.children; + } + } +} + +function ErrorFallback({ error, componentStack, resetErrorBoundary }) { + return ( + <div className="error"> + <p> + {"An error occured, please report this on the "} + <a href="https://github.com/superseriousbusiness/gotosocial/issues">GoToSocial issue tracker</a> + {" or "} + <a href="https://matrix.to/#/#gotosocial-help:superseriousbusiness.org">Matrix support room</a>. + <br />Include the details below: + </p> + <div className="details"> + <pre> + {error.name}: {error.message} + + {componentStack && [ + "\n\nComponent trace:", + componentStack + ]} + {["\n\nError trace: ", error.stack]} + </pre> + </div> + <p> + <button onClick={resetErrorBoundary}>Try again</button> or <a href="">refresh the page</a> + </p> + </div> + ); +} + module.exports = { Sidebar, ViewRouter, |