Display custom error page on crash (#5880)

Author: bilalabbad

frontend/app/src/app/app.tsx

@@ -13,7 +13,7 @@ import { AuthProvider } from "@/entities/authentication/ui/useAuth";
 import { ConfigProvider } from "@/entities/config/config-provider";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
 import { queryClient } from "@/shared/api/rest/client";
-import ErrorFallback from "@/shared/components/errors/error-fallback";
+import { ErrorBoundaryApp } from "@/shared/components/errors/error-boundary-app";
 import { store } from "@/shared/stores";
 
 import "@/app/styles/index.css";
@@ -23,7 +23,7 @@ addCollection(mdiIcons);
 
 export function App() {
   return (
-    <ErrorBoundary FallbackComponent={ErrorFallback}>
+    <ErrorBoundary FallbackComponent={ErrorBoundaryApp}>
       <Provider store={store}>
         <AuthProvider>
           <QueryClientProvider client={queryClient}>

frontend/app/src/app/router.tsx

@@ -5,6 +5,7 @@ import { constructPathForIpam } from "@/entities/ipam/common/utils";
 import { IPAM_ROUTE, IP_ADDRESS_GENERIC, IP_PREFIX_GENERIC } from "@/entities/ipam/constants";
 import { RESOURCE_GENERIC_KIND } from "@/entities/resource-manager/constants";
 import { constructPath } from "@/shared/api/rest/fetch";
+import { ErrorBoundaryRouter } from "@/shared/components/errors/error-boundary-router";
 import { ReactRouter7Adapter } from "@/shared/lib/use-query-params";
 import queryString from "query-string";
 import { Navigate, Outlet, UIMatch, createBrowserRouter } from "react-router";
@@ -13,6 +14,7 @@ import { QueryParamProvider } from "use-query-params";
 export const router = createBrowserRouter([
   {
     path: "",
+    errorElement: <ErrorBoundaryRouter />,
     element: (
       <QueryParamProvider
         adapter={ReactRouter7Adapter}

frontend/app/src/entities/events/ui/global-events.tsx

@@ -1,6 +1,6 @@
 import { FilterResetButton } from "@/entities/nodes/object/ui/filters/filter-reset-button";
 import { Button } from "@/shared/components/buttons/button-primitive";
-import ErrorFallback from "@/shared/components/errors/error-fallback";
+import ErrorScreen from "@/shared/components/errors/error-screen";
 import NoDataFound from "@/shared/components/errors/no-data-found";
 import Content from "@/shared/components/layout/content";
 import { Spinner } from "@/shared/components/ui/spinner";
@@ -37,7 +37,7 @@ export const GlobalEvents = () => {
   const flatData = React.useMemo(() => data?.pages?.flat() ?? [], [data]);
 
   if (error) {
-    return <ErrorFallback error={error} />;
+    return <ErrorScreen message={error.message} />;
   }
 
   return (

frontend/app/src/entities/events/ui/node-events.tsx

@@ -1,7 +1,7 @@
 import { QSP } from "@/config/qsp";
 import { useNodeLabel } from "@/entities/nodes/object/api/get-display-label.query";
 import { constructPath } from "@/shared/api/rest/fetch";
-import ErrorFallback from "@/shared/components/errors/error-fallback";
+import ErrorScreen from "@/shared/components/errors/error-screen";
 import NoDataFound from "@/shared/components/errors/no-data-found";
 import { Link } from "@/shared/components/ui/link";
 import { Spinner } from "@/shared/components/ui/spinner";
@@ -44,7 +44,7 @@ export const NodeEvents = ({ parentId }: { parentId?: string }) => {
   }
 
   if (error || displayLabelError) {
-    return <ErrorFallback error={error} />;
+    return <ErrorScreen message={error?.message || displayLabelError?.message} />;
   }
 
   if (!flatData?.length) {

frontend/app/src/shared/components/errors/error-boundary-app.tsx

@@ -0,0 +1,6 @@
+import ErrorFallback from "@/shared/components/errors/error-fallback";
+import { FallbackProps } from "react-error-boundary";
+
+export const ErrorBoundaryApp = ({ error, resetErrorBoundary }: FallbackProps) => {
+  return <ErrorFallback error={error} onReset={resetErrorBoundary} />;
+};

frontend/app/src/shared/components/errors/error-boundary-router.tsx

@@ -0,0 +1,8 @@
+import ErrorFallback from "@/shared/components/errors/error-fallback";
+import { useRouteError } from "react-router";
+
+export function ErrorBoundaryRouter() {
+  const error = useRouteError();
+
+  return <ErrorFallback error={error as Error} onReset={() => window.location.reload()} />;
+}

frontend/app/src/shared/components/errors/error-fallback.tsx

@@ -4,21 +4,21 @@ import { Card } from "@/shared/components/ui/card";
 import Kbd from "@/shared/components/ui/kbd";
 import { Icon } from "@iconify-icon/react";
 import { useEffect, useState } from "react";
-import { useErrorBoundary } from "react-error-boundary";
 
-type ErrorFallbackProps = {
+interface ErrorFallbackProps {
   error: Error;
-};
-function ErrorFallback({ error }: ErrorFallbackProps) {
-  const { resetBoundary } = useErrorBoundary();
+  onReset: () => void;
+}
+
+function ErrorFallback({ error, onReset }: ErrorFallbackProps) {
   const [bugPosition, setBugPosition] = useState({ top: 0, left: 0 });
 
   useEffect(() => {
     const onKeydown = (event: KeyboardEvent) => {
       if (event.key.toLowerCase() === "enter") {
-        resetBoundary();
+        onReset();
       }
-      console.error(event.key);
+
       if (event.key.toLowerCase() === "backspace") {
         window.location.href = window.location.origin;
       }
@@ -57,11 +57,11 @@ function ErrorFallback({ error }: ErrorFallbackProps) {
           </p>
 
           <div>
-            <Button className="mr-2" onClick={resetBoundary}>
+            <Button className="mr-2" onClick={onReset}>
               Refresh
             </Button>
             <a href={window.location.origin}>
-              <Button variant="outline" className="my-4" onClick={resetBoundary}>
+              <Button variant="outline" className="my-4">
                 Homepage
               </Button>
             </a>
@@ -104,7 +104,7 @@ function ErrorFallback({ error }: ErrorFallbackProps) {
         </p>
       </Card>
 
-      {error.stack && (
+      {error?.stack && (
         <Accordion className="text-sm text-gray-600" title="View error stack">
           <pre className="p-2 rounded bg-red-50 text-red-800">{error.stack}</pre>
         </Accordion>

frontend/app/tests/integrations/screens/object-details.cy.tsx

@@ -2,11 +2,9 @@
 
 import { gql } from "@apollo/client";
 import { MockedProvider } from "@apollo/client/testing";
-import { ErrorBoundary } from "react-error-boundary";
 import { Route, Routes } from "react-router";
 import { BranchContext } from "../../../src/entities/branches/ui/branches-provider";
 import { ObjectDetailsPage } from "../../../src/pages/objects/object-details";
-import ErrorFallback from "../../../src/shared/components/errors/error-fallback";
 import { generateBranch } from "../../fake/branch";
 import {
   deviceDetailsMocksASNName,
@@ -75,14 +73,12 @@ describe("List screen", () => {
     cy.mount(
       <BranchContext value={{ currentBranch: generateBranch(), setCurrentBranch: () => {} }}>
         <MockedProvider mocks={mocks} addTypename={false}>
-          <ErrorBoundary FallbackComponent={ErrorFallback}>
-            <Routes>
-              <Route
-                element={<ObjectDetailsPage schema={deviceDetailsMocksSchema[0]} />}
-                path={graphqlQueryItemsPath}
-              />
-            </Routes>
-          </ErrorBoundary>
+          <Routes>
+            <Route
+              element={<ObjectDetailsPage schema={deviceDetailsMocksSchema[0]} />}
+              path={graphqlQueryItemsPath}
+            />
+          </Routes>
         </MockedProvider>
       </BranchContext>,
       {