Add error boundary

package-lock.json

@@ -3142,12 +3142,6 @@
         "@types/webpack-env": "*"
       }
     },
-    "@types/string-similarity": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@types/string-similarity/-/string-similarity-1.2.1.tgz",
-      "integrity": "sha512-a4tFqvEznBVSCoRPsr3xTdZstgeWvgoWq9KyEbsYW/EaEnq4xCMX0A5oMeBpYEmy7LoG8QqH7GntUZhfe+I8LQ==",
-      "dev": true
-    },
     "@types/url-join": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/@types/url-join/-/url-join-0.8.3.tgz",
@@ -13552,20 +13546,11 @@
       "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=",
       "dev": true
     },
-    "lodash.every": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz",
-      "integrity": "sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc="
-    },
     "lodash.flattendeep": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
-      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI="
-    },
-    "lodash.foreach": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
-      "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM="
+      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
+      "dev": true
     },
     "lodash.get": {
       "version": "4.4.2",
@@ -13588,16 +13573,6 @@
       "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
       "dev": true
     },
-    "lodash.map": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
-      "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM="
-    },
-    "lodash.maxby": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.maxby/-/lodash.maxby-4.6.0.tgz",
-      "integrity": "sha1-CCJABo88eiJ6oAqDgOTzjPB4bj0="
-    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -16615,6 +16590,11 @@
         "prop-types-extra": "^1.1.0"
       }
     },
+    "react-error-boundary": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-1.2.5.tgz",
+      "integrity": "sha512-5CPSeLJA2igJNppAgFRwnTL9aK3ojenk65enNzhVyoxYNbHpIJXnChUO7+4vPhkncRA9wvQMXq6Azp2XeXd+iQ=="
+    },
     "react-error-overlay": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.0.tgz",
@@ -18552,18 +18532,6 @@
         }
       }
     },
-    "string-similarity": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/string-similarity/-/string-similarity-1.2.2.tgz",
-      "integrity": "sha512-IoHUjcw3Srl8nsPlW04U3qwWPk3oG2ffLM0tN853d/E/JlIvcmZmDY2Kz5HzKp4lEi2T7QD7Zuvjq/1rDw+XcQ==",
-      "requires": {
-        "lodash.every": "^4.6.0",
-        "lodash.flattendeep": "^4.4.0",
-        "lodash.foreach": "^4.5.0",
-        "lodash.map": "^4.6.0",
-        "lodash.maxby": "^4.6.0"
-      }
-    },
     "string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",

package.json

@@ -50,6 +50,7 @@
     "react-apollo": "^3.0.0",
     "react-dom": "^16.9.0",
     "react-dropzone": "^8.2.0",
+    "react-error-boundary": "^1.2.5",
     "react-helmet": "^5.2.1",
     "react-infinite-scroller": "^1.2.4",
     "react-inlinesvg": "^0.8.4",

src/auth/components/SectionRoute.tsx

@@ -1,8 +1,11 @@
 import React from "react";
+import ErrorBoundary from "react-error-boundary";
 import { Route, RouteProps } from "react-router-dom";
 
 import AppLayout from "@saleor/components/AppLayout";
-import { UserContext } from "..";
+import ErrorPage from "@saleor/components/ErrorPage";
+import useNavigator from "@saleor/hooks/useNavigator";
+import useUser from "@saleor/hooks/useUser";
 import NotFound from "../../NotFound";
 import { PermissionEnum } from "../../types/globalTypes";
 import { hasPermission } from "../misc";
@@ -14,21 +17,27 @@ interface SectionRouteProps extends RouteProps {
 export const SectionRoute: React.StatelessComponent<SectionRouteProps> = ({
   permissions,
   ...props
-}) => (
-  <UserContext.Consumer>
-    {({ user }) =>
-      !permissions ||
-      permissions
-        .map(permission => hasPermission(permission, user))
-        .reduce((prev, curr) => prev && curr) ? (
-        <AppLayout>
-          <Route {...props} />
-        </AppLayout>
-      ) : (
-        <NotFound />
-      )
-    }
-  </UserContext.Consumer>
-);
+}) => {
+  const navigate = useNavigator();
+  const { user } = useUser();
+
+  const hasPermissions =
+    !permissions ||
+    permissions
+      .map(permission => hasPermission(permission, user))
+      .reduce((prev, curr) => prev && curr);
+  return hasPermissions ? (
+    <AppLayout>
+      <ErrorBoundary
+        FallbackComponent={() => <ErrorPage onBack={() => navigate("/")} />}
+        key={permissions ? permissions.join(":") : "home"}
+      >
+        <Route {...props} />
+      </ErrorBoundary>
+    </AppLayout>
+  ) : (
+    <NotFound />
+  );
+};
 SectionRoute.displayName = "Route";
 export default SectionRoute;