feat: added error boundary

frontend/src/layouts/AppLayout/ErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import React, { ErrorInfo, ReactNode } from "react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { faBugs } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -16,12 +17,16 @@ const ErrorPage = ({ error }: { error: Error | null }) => {
   const router = useRouter();
   const currentUrl = router?.asPath?.split("?")?.[0];
 
+  error = new Error(
+    "e26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefined"
+  );
+
   return (
     <div className="flex h-screen w-screen items-center justify-center bg-mineshaft-900">
       <div className="flex max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
-        <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
+        <FontAwesomeIcon icon={faBugs} className="my-2 inline text-6xl" />
         <p>
-          Something unexpected went wrong. Please contact{" "}
+          Something went wrong. Please contact{" "}
           <a
             className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
             target="_blank"
@@ -29,22 +34,34 @@ const ErrorPage = ({ error }: { error: Error | null }) => {
             href="mailto:[email protected]"
           >
             support@infisical.com
-          </a>{" "}
+          </a>
+          , or{" "}
+          <Link passHref href="https://infisical.com/slack">
+            <a
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              join our Slack community
+            </a>
+          </Link>{" "}
           if the issue persists.
         </p>
 
-        {error && (
+        <div className="my-4 h-px w-full bg-mineshaft-600" />
-          <div className="space-y-4">
+
+        {error?.message && (
+          <div className="space-y-2">
             <div>
-              <p className="mt-4">Error details:</p>
+              <p>Error details:</p>
-              <p className="text-xs italic">
+              <p className="text-xs italic opacity-70">
                 Please provide this error message when contacting support, as it will help us
                 diagnose the issue at hand.
               </p>
             </div>
             <p className="max-h-44 w-full overflow-auto text-ellipsis rounded-md bg-mineshaft-700">
               <code className="p-2 text-xs">
-                {currentUrl}, {error?.message}
+                {currentUrl}, {error.message}
               </code>
             </p>
           </div>
@@ -72,7 +89,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
     const { hasError, error } = this.state;
     const { children } = this.props;
 
-    if (hasError) {
+    if (!hasError) {
       return <ErrorPage error={error} />;
     }
     return children;