VIA-357 MD/DB Add event listener for unhandled asynchronous client side error logging

Note that this will result in all unhandled errors in the client
outputting a log line stating that an unhandled error has happened.
COntext on what happened is impossible to pass in without accepting raw
text from an endpoint which may present a security risk. Error types can
be intercepted and directly specified in client-error-logger if
required.

Author: donna-belsey-nhs

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

@@ -0,0 +1,17 @@
+"use client";
+
+import logClientSideError from "@src/utils/client-side-error-logger/client-side-error-logger";
+import { ClientSideErrorTypes } from "@src/utils/constants";
+import { useEffect } from "react";
+
+const ClientUnhandledErrorLogger = (): undefined => {
+  useEffect(() => {
+    window.addEventListener("unhandledrejection", function () {
+      logClientSideError(ClientSideErrorTypes.UNHANDLED_ERROR).catch(() => {
+        // do not show anything to the user; catching prevents an infinite loop if the logger itself throws an error which is unhandled
+      });
+    });
+  }, []);
+};
+
+export { ClientUnhandledErrorLogger };

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import "@public/css/app.css";
 import "@public/css/nhsapp-3.1.0.min.css";
 import "@public/css/nhsuk-9.6.1.min.css";
+import { ClientUnhandledErrorLogger } from "@src/app/_components/client-unhandled-error-logger/ClientUnhandledErrorLogger";
 import { ClientProviders } from "@src/app/_components/context/ClientProviders";
 import { NoJsMessage } from "@src/app/_components/static/NoJsMessage";
 import { StaticFooter } from "@src/app/_components/static/StaticFooter";
@@ -43,6 +44,7 @@ export default function RootLayout({
           <NoJsMessage />
           <StaticFooter />
         </noscript>
+        <ClientUnhandledErrorLogger />
         <div id="app-root" className="appLayout">
           <ClientProviders>{children}</ClientProviders>
         </div>