PIMS-1291 React Error Boundary

express-api/src/controllers/reports/errorReportSchema.ts

@@ -0,0 +1,26 @@
+import z from 'zod';
+
+/**
+ * @description Zod schema for validating frontend error reports.
+ */
+export const errorReportSchema = z.object({
+  // Only specified the fields we're using.
+  user: z.object({
+    client_roles: z.array(z.string()).optional(),
+    email: z.string().email(),
+    preferred_username: z.string(),
+    display_name: z.string(),
+  }),
+  userMessage: z.string(),
+  error: z.object({
+    message: z.string(),
+    stack: z.string(),
+  }),
+  timestamp: z.string(),
+});
+
+/**
+ * @description Type inferred from Zod schema errorReportSchema
+ * @type ErrorReport
+ */
+export type ErrorReport = z.infer<typeof errorReportSchema>;

express-api/src/controllers/reports/reportsController.ts

@@ -1,5 +1,7 @@
+import logger from '@/utilities/winstonLogger';
 import { stubResponse } from '../../utilities/stubResponse';
 import { Request, Response } from 'express';
+import { ErrorReport, errorReportSchema } from '@/controllers/reports/errorReportSchema';
 
 /**
  * @description Get all reports as a CSV or Excel file.
@@ -51,3 +53,22 @@ export const getSpreadsheetUsersReports = async (req: Request, res: Response) =>
    */
   return stubResponse(res);
 };
+
+export const submitErrorReport = async (req: Request, res: Response) => {
+  /**
+   * #swagger.tags = ['Reports']
+   * #swagger.description = 'Accepts an error report from the frontend and sends an email to administrators.'
+   * #swagger.security = [{
+   *   "bearerAuth" : []
+   * }]
+   */
+  const info: ErrorReport = req.body;
+  logger.info(info);
+  try {
+    errorReportSchema.parse(info);
+  } catch (e) {
+    return res.status(400).send(e);
+  }
+  // TODO: Add email component after CHES is in. Response depends on that outcome.
+  return res.status(200).send(info);
+};

express-api/src/routes/reportsRouter.ts

@@ -25,4 +25,7 @@ router.route('/users').get(controllers.getSpreadsheetUsersReports);
  * ie. /reports/properties?include=agency,classification,type
  */
 
+// For errors submitted by the frontend Error Boundary.
+router.route('/error').post(controllers.submitErrorReport);
+
 export default router;

express-api/tests/unit/controllers/reports/reportsController.test.ts

@@ -4,7 +4,11 @@ import {
   getSpreadsheetProjectsReports,
   getSpreadsheetPropertiesReports,
   getSpreadsheetUsersReports,
+  submitErrorReport,
 } from '@/controllers/reports/reportsController';
+import { ErrorReport } from '@/controllers/reports/errorReportSchema';
+import { Roles } from '@/constants/roles';
+import logger from '@/utilities/winstonLogger';
 
 describe('UNIT - Reports', () => {
   let mockRequest: Request & MockReq, mockResponse: Response & MockRes;
@@ -86,4 +90,39 @@ describe('UNIT - Reports', () => {
       expect(mockResponse.statusValue).toBe(200);
     });
   });
+
+  // TODO: Add additional test cases when this endpoint starts using CHES
+  describe('POST /reports/error', () => {
+    const error: ErrorReport = {
+      user: {
+        client_roles: [Roles.ADMIN],
+        preferred_username: '123@idir',
+        display_name: 'Tester',
+        email: 'tester@gov.bc.ca',
+      },
+      userMessage: 'Help, it broke.',
+      timestamp: new Date().toLocaleString(),
+      error: new Error('Bad Error'),
+    };
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+    it('should return 200 status and error info in body', async () => {
+      mockRequest.body = error;
+      const mockLogger = jest.spyOn(logger, 'info');
+      await submitErrorReport(mockRequest, mockResponse);
+      expect(mockLogger).toHaveBeenCalledTimes(1);
+      expect(mockResponse.statusValue).toBe(200);
+      expect(mockResponse.sendValue).toBe(error);
+    });
+
+    it('should return 400 status when body does not match zod schema', async () => {
+      mockRequest.body = {
+        fakeFields: 'Should fail check',
+      };
+      await submitErrorReport(mockRequest, mockResponse);
+      expect(mockResponse.statusValue).toBe(400);
+    });
+  });
 });

react-app/package.json

@@ -26,6 +26,7 @@
     "node-xlsx": "0.23.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-error-boundary": "4.0.12",
     "react-hook-form": "7.50.1",
     "react-router-dom": "6.22.0"
   },

react-app/src/App.tsx

@@ -11,62 +11,66 @@ import AuthRouteGuard from './guards/AuthRouteGuard';
 import BaseLayout from './components/layout/BaseLayout';
 import { AccessRequest } from './pages/AccessRequest';
 import UsersManagement from './pages/UsersManagement';
+import { ErrorBoundary } from 'react-error-boundary';
+import ErrorFallback from '@/pages/ErrorFallback';
 
 const Router = () => {
   return (
-    <ConfigContextProvider>
-      <AuthContextProvider>
-        <Routes>
-          <Route
-            index
-            element={
-              <BaseLayout displayFooter>
-                <Home />
-              </BaseLayout>
-            }
-          />
-          <Route
-            path="/access-request"
-            element={
-              <BaseLayout displayFooter>
-                <AuthRouteGuard>
-                  <AccessRequest />
-                </AuthRouteGuard>
-              </BaseLayout>
-            }
-          />
-          <Route
-            path="/dev"
-            element={
-              <BaseLayout>
-                <AuthRouteGuard>
-                  <Dev />
-                </AuthRouteGuard>
-              </BaseLayout>
-            }
-          />
-          <Route path="/admin">
-            <Route
-              path="users"
-              element={
-                <BaseLayout>
-                  <AuthRouteGuard>
-                    <UsersManagement />
-                  </AuthRouteGuard>
-                </BaseLayout>
-              }
-            />
-          </Route>
-        </Routes>
-      </AuthContextProvider>
-    </ConfigContextProvider>
+    <Routes>
+      <Route
+        index
+        element={
+          <BaseLayout displayFooter>
+            <Home />
+          </BaseLayout>
+        }
+      />
+      <Route
+        path="/access-request"
+        element={
+          <BaseLayout displayFooter>
+            <AuthRouteGuard>
+              <AccessRequest />
+            </AuthRouteGuard>
+          </BaseLayout>
+        }
+      />
+      <Route
+        path="/dev"
+        element={
+          <BaseLayout>
+            <AuthRouteGuard>
+              <Dev />
+            </AuthRouteGuard>
+          </BaseLayout>
+        }
+      />
+      <Route path="/admin">
+        <Route
+          path="users"
+          element={
+            <BaseLayout>
+              <AuthRouteGuard>
+                <UsersManagement />
+              </AuthRouteGuard>
+            </BaseLayout>
+          }
+        />
+      </Route>
+    </Routes>
   );
 };
 
 const App = () => {
   return (
     <ThemeProvider theme={appTheme}>
-      <Router />
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <ConfigContextProvider>
+          <AuthContextProvider>
+            <Router />
+          </AuthContextProvider>
+        </ConfigContextProvider>
+      </ErrorBoundary>
     </ThemeProvider>
   );
 };