TASK-376 Error modal doesn't appear on app error

src/app.tsx

@@ -24,8 +24,6 @@ import ScssVars from "./assets/styles/styles/custom/_variables.module.scss";
 import { ApplicationStateModel } from "./state/models/application-state.model";
 import { ScheduleKey } from "./api/persistance-store.model";
 import { AppMode, useAppConfig } from "./state/app-config-context";
-import * as Sentry from "@sentry/react";
-import AppErrorModal from "./components/common-components/modal/app-error-modal/app-error.modal.component";
 import { cropScheduleDMToMonthDM } from "./logic/schedule-container-convertion/schedule-container-convertion";
 
 const useStyles = makeStyles(() => ({
@@ -104,39 +102,25 @@ function App(): JSX.Element {
     fetchGlobalState();
   }, [fetchGlobalState]);
 
-  const [open, setIsOpen] = useState(false);
-  const fallback = useCallback(
-    ({ resetError }): JSX.Element => (
-      <AppErrorModal onClick={resetError} open={open} setOpen={setIsOpen} />
-    ),
-    [open, setIsOpen]
-  );
-
-  const onError = useCallback((): void => {
-    setIsOpen(true);
-  }, [setIsOpen]);
-
   return (
-    <Sentry.ErrorBoundary fallback={fallback} onError={onError}>
-      <NotificationProvider>
-        <JiraLikeDrawerProvider>
-          <Switch>
-            <Route path="/">
-              <Box className={classes.root}>
-                <Box className={classes.content}>
-                  <HeaderComponent />
-                  <RouteButtonsComponent tabs={tabs} disabled={disableRouteButtons} />
-                </Box>
-                <Box className={classes.drawer}>
-                  <JiraLikeDrawer width={690} />
-                </Box>
+    <NotificationProvider>
+      <JiraLikeDrawerProvider>
+        <Switch>
+          <Route path="/">
+            <Box className={classes.root}>
+              <Box className={classes.content}>
+                <HeaderComponent />
+                <RouteButtonsComponent tabs={tabs} disabled={disableRouteButtons} />
+              </Box>
+              <Box className={classes.drawer}>
+                <JiraLikeDrawer width={690} />
               </Box>
-              {isElectron() ? <></> : <NetlifyProFooter />}
-            </Route>
-          </Switch>
-        </JiraLikeDrawerProvider>
-      </NotificationProvider>
-    </Sentry.ErrorBoundary>
+            </Box>
+            {isElectron() ? <></> : <NetlifyProFooter />}
+          </Route>
+        </Switch>
+      </JiraLikeDrawerProvider>
+    </NotificationProvider>
   );
 }
 

src/components/app-error-boundary/app-error-boundary.component.tsx

@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import React, { ReactNode, useCallback, useState } from "react";
+import AppErrorModal from "../common-components/modal/app-error-modal/app-error.modal.component";
+import * as Sentry from "@sentry/react";
+
+interface AppErrorBoundaryOptions {
+  children: ReactNode;
+}
+
+export function AppErrorBoundary(props: AppErrorBoundaryOptions): JSX.Element {
+  const [open, setIsOpen] = useState(false);
+  const fallback = useCallback(
+    ({ resetError }): JSX.Element => (
+      <AppErrorModal onClick={resetError} open={open} setOpen={setIsOpen} />
+    ),
+    [open, setIsOpen]
+  );
+
+  const onError = useCallback((): void => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  return <Sentry.ErrorBoundary fallback={fallback} onError={onError} {...props} />;
+}

src/components/common-components/modal/report-issue-modal/report-issue-modal.component.tsx

@@ -117,6 +117,14 @@ export default function ReportIssueModal(options: ReportIssueModalOptions): JSX.
       });
   }
 
+  // Only for testing purposes
+  if (
+    process.env.REACT_APP_TEST_MODE &&
+    issueDescription.toLowerCase() === process.env.REACT_APP_ERROR_WORKER
+  ) {
+    throw new Error("[TEST MODE] Error message was entered");
+  }
+
   const body = (
     <div className="report-issue-modal-body">
       {isSent && <p>Wysłano powiadomienie o błędzie.</p>}

src/components/schedule-page/table/schedule/schedule.component.tsx

@@ -35,7 +35,7 @@ export function ScheduleComponent({
       .map((worker) => worker.toLowerCase())
       .includes(process.env.REACT_APP_ERROR_WORKER ?? "ERROR")
   ) {
-    throw new Error("Schedule in dev mode includes error user");
+    throw new Error("[TEST MODE] Error user was added");
   }
 
   return (

src/index.tsx

@@ -19,6 +19,7 @@ import thunkMiddleware from "redux-thunk";
 import { appReducer } from "./state/app.reducer";
 import { createBrowserHistory } from "history";
 import { composeWithDevTools } from "redux-devtools-extension";
+import { AppErrorBoundary } from "./components/app-error-boundary/app-error-boundary.component";
 
 const history = createBrowserHistory();
 
@@ -42,17 +43,19 @@ const composedEnhancer = composeWithDevTools(
 export const appStore = createStore(appReducer, composedEnhancer);
 
 ReactDOM.render(
-  <DndProvider backend={HTML5Backend}>
-    <Router history={history}>
-      <React.StrictMode>
-        <Provider store={appStore}>
-          <AppConfigProvider>
-            <App />
-          </AppConfigProvider>
-        </Provider>
-      </React.StrictMode>
-    </Router>
-  </DndProvider>,
+  <AppErrorBoundary>
+    <DndProvider backend={HTML5Backend}>
+      <Router history={history}>
+        <React.StrictMode>
+          <Provider store={appStore}>
+            <AppConfigProvider>
+              <App />
+            </AppConfigProvider>
+          </Provider>
+        </React.StrictMode>
+      </Router>
+    </DndProvider>
+  </AppErrorBoundary>,
   document.getElementById("root")
 );
 /* eslint-disable @typescript-eslint/no-explicit-any */