M app/src/Router.js → app/src/Router.js

@@ -12,23 +12,26 @@ import SignUp from './pages/SignUp';
 import SignIn from './pages/SignIn';
 import LostPassword from './pages/LostPassword.js';
 import ResetPassword from './pages/ResetPassword.js';
-
+import ErrorBoundary from './containers/ErrorBoundary';
 const Router = () => {
   useGTM();
   return (
     <BrowserRouter>
-      <Switch>
-        <Route path="/e/:eventId" component={Event} />
-        <Route path="/" exact component={Home} />
-        <Route path="/new" exact component={Home} />
-        <Route path="/register" exact component={SignUp} />
-        <Route path="/lost-password" exact component={LostPassword} />
-        <Route path="/reset-password" exact component={ResetPassword} />
-        <Route path="/login" exact component={SignIn} />
-        <Route path="/dashboard" exact component={Dashboard} />
-        <Route path="/profile" exact component={Profile} />
-        <Route component={NotFound} />
-      </Switch>
+      <ErrorBoundary>
+        <Switch>
+          <Route path="/e/:eventId" component={Event} />
+          <Route path="/" exact component={Home} />
+          <Route path="/new" exact component={Home} />
+          <Route path="/register" exact component={SignUp} />
+          <Route path="/lost-password" exact component={LostPassword} />
+          <Route path="/reset-password" exact component={ResetPassword} />
+          <Route path="/login" exact component={SignIn} />
+          <Route path="/dashboard" exact component={Dashboard} />
+          <Route path="/profile" exact component={Profile} />
+          <Route path="/error" exact component={NotFound} />
+          <Route component={NotFound} />
+        </Switch>
+      </ErrorBoundary>
     </BrowserRouter>
   );
 };

A app/src/containers/ErrorBoundary/LogoutAndRedirect.js

@@ -0,0 +1,14 @@ 
+import React, {useEffect} from 'react';
+import {Redirect} from 'react-router-dom';
+import {useAuth} from 'strapi-react-context';
+
+const LogoutAndRedirect = () => {
+  const {logout, token} = useAuth();
+  useEffect(() => {
+    logout();
+  }, []);
+  if (token) return null;
+  return <Redirect to="/" />;
+};
+
+export default LogoutAndRedirect;

A app/src/containers/ErrorBoundary/index.js

@@ -0,0 +1,43 @@ 
+import React, {Component} from 'react';
+import LogoutAndRedirect from './LogoutAndRedirect';
+import {ApiProblem} from 'strapi-react-context';
+import {Redirect} from 'react-router-dom';
+
+/**
+ * Error boundary to catch all the error from our code.
+ * If the error catched is an `unauthorized` APIProblem, will logout and redirect. Otherwise
+ * will redirect to an /error page. (nicer than blank page)
+ */
+class ErrorBoundary extends Component {
+  state = {error: null};
+
+  /**
+   * @param {Error} error
+   * @return {Object} new state after derivation
+   */
+  static getDerivedStateFromError(error) {
+    if (error instanceof ApiProblem) {
+      return {error: error.kind};
+    }
+    return {error: 'unknown'};
+  }
+
+  /**
+   * Component did catch an error, log it.
+   * @param {Error} error
+   */
+  componentDidCatch(error) {
+    console.error('App did catch an error', {error});
+  }
+
+  /**
+   * @override
+   */
+  render() {
+    if (this.state.error === null) return this.props.children;
+
+    if (this.state.error === 'unauthorized') return <LogoutAndRedirect />;
+    return <Redirect to="error" />;
+  }
+}
+export default ErrorBoundary;