VIA-579 AJ/AS Fix eslint errors in ClientUnhandledErrorLogger.tsx

Author: ankur-jain-nhs

src/app/_components/client-unhandled-error-logger/ClientUnhandledErrorLogger.tsx

@@ -3,57 +3,55 @@
 import logClientSideError from "@src/utils/client-side-error-logger/client-side-error-logger";
 import { ClientSideErrorTypes } from "@src/utils/constants";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-
-let router;
-
-const reportClientSideUnhandledError = (errorEvent: ErrorEvent) => {
-  errorEvent.preventDefault();
-
-  logClientSideError(ClientSideErrorTypes.UNHANDLED_ERROR)
-    .then((logOnClientConsole: boolean) => {
-      if (logOnClientConsole) {
-        console.log("Unhandled error event", errorEvent);
-      }
-    })
-    .catch(() => {
-      // do not show anything to the user; catching prevents an infinite loop if the logger itself throws an error which is unhandled
-    });
-
-  router.push("/service-failure");
-};
-
-const reportClientSideUnhandledPromiseRejectionError = (promiseRejectionEvent: PromiseRejectionEvent) => {
-  promiseRejectionEvent.preventDefault();
-
-  logClientSideError(ClientSideErrorTypes.UNHANDLED_PROMISE_REJECT_ERROR)
-    .then((logOnClientConsole: boolean) => {
-      if (logOnClientConsole) {
-        console.log("Unhandled promise rejection event", promiseRejectionEvent);
-      }
-    })
-    .catch(() => {
-      // do not show anything to the user; catching prevents an infinite loop if the logger itself throws an error which is unhandled
-    });
-
-  router.push("/service-failure");
-};
+import { useCallback, useEffect } from "react";
 
 const ClientUnhandledErrorLogger = (): null => {
-  router = useRouter();
+  const router = useRouter();
+
+  const reportUnhandledError = useCallback((errorEvent: ErrorEvent) => {
+    errorEvent.preventDefault();
+
+    logClientSideError(ClientSideErrorTypes.UNHANDLED_ERROR)
+      .then((logOnClientConsole: boolean) => {
+        if (logOnClientConsole) {
+          console.log("Unhandled error event", errorEvent);
+        }
+      })
+      .catch(() => {
+        // do not show anything to the user; catching prevents an infinite loop if the logger itself throws an error which is unhandled
+      });
+
+    router.push("/service-failure");
+  }, [router]);
+
+  const reportPromiseRejectionError = useCallback((promiseRejectionEvent: PromiseRejectionEvent) => {
+    promiseRejectionEvent.preventDefault();
+
+    logClientSideError(ClientSideErrorTypes.UNHANDLED_PROMISE_REJECT_ERROR)
+      .then((logOnClientConsole: boolean) => {
+        if (logOnClientConsole) {
+          console.log("Unhandled promise rejection event", promiseRejectionEvent);
+        }
+      })
+      .catch(() => {
+        // do not show anything to the user; catching prevents an infinite loop if the logger itself throws an error which is unhandled
+      });
+
+    router.push("/service-failure");
+  }, [router]);
 
   useEffect(() => {
-    window.addEventListener("unhandledrejection", (event) => reportClientSideUnhandledPromiseRejectionError(event));
-    window.addEventListener("error", (event) => reportClientSideUnhandledError(event));
+    console.log("mounted");
+    window.addEventListener("unhandledrejection", reportPromiseRejectionError);
+    window.addEventListener("error", reportUnhandledError);
 
     // on component unmount
     return () => {
-      window.removeEventListener("unhandledrejection", (event) =>
-        reportClientSideUnhandledPromiseRejectionError(event),
-      );
-      window.removeEventListener("error", (event) => reportClientSideUnhandledError(event));
+      console.log("unmounted");
+      window.removeEventListener("unhandledrejection", reportPromiseRejectionError);
+      window.removeEventListener("error", reportUnhandledError);
     };
-  }, []);
+  }, [reportUnhandledError, reportPromiseRejectionError]);
 
   return null;
 };