VIA-545 AJ/DB Server decides whether to print console logs on client

Author: ankur-jain-nhs

.env.template

@@ -3,7 +3,6 @@ SSM_PREFIX=/local/
 
 # logging
 PINO_LOG_LEVEL=info
-NEXT_PUBLIC_SUPRESS_CONSOLE=false
 PROFILE_PERFORMANCE=true
 DEPLOY_ENVIRONMENT=local
 

.gitignore

@@ -124,3 +124,4 @@ terraform.tfstate*
 
 # Content validation
 *.temp.json
+/performance/report/

eslint.config.mjs

@@ -23,7 +23,8 @@ const eslintConfig = [{
     "**/.terraform/**",
     ".open-next/**",
     "playwright-report/**",
-    "pact/**"
+    "pact/**",
+    "performance/report",
   ]
 }, ...compat.extends(
   "next/core-web-vitals",

infrastructure/environments/dev/locals.tf

@@ -25,10 +25,9 @@ locals {
   application_environment_variables = {
     SSM_PREFIX = "/${local.prefix}/"
 
-    PINO_LOG_LEVEL              = "info"
-    NEXT_PUBLIC_SUPRESS_CONSOLE = "false"
-    DEPLOY_ENVIRONMENT          = local.environment
-    PROFILE_PERFORMANCE         = "true"
+    PINO_LOG_LEVEL      = "info"
+    DEPLOY_ENVIRONMENT  = local.environment
+    PROFILE_PERFORMANCE = "true"
 
     CONTENT_API_ENDPOINT                     = "https://int.api.service.nhs.uk/"
     CONTENT_CACHE_PATH                       = "s3://${local.content_cache_bucket_name}"

infrastructure/environments/preprod/locals.tf

@@ -25,10 +25,9 @@ locals {
   application_environment_variables = {
     SSM_PREFIX = "/${local.prefix}/"
 
-    PINO_LOG_LEVEL              = "info"
-    NEXT_PUBLIC_SUPRESS_CONSOLE = "false"
-    DEPLOY_ENVIRONMENT          = local.environment
-    PROFILE_PERFORMANCE         = "true"
+    PINO_LOG_LEVEL      = "info"
+    DEPLOY_ENVIRONMENT  = local.environment
+    PROFILE_PERFORMANCE = "true"
 
     CONTENT_API_ENDPOINT                     = "https://int.api.service.nhs.uk/"
     CONTENT_CACHE_PATH                       = "s3://${local.content_cache_bucket_name}"

infrastructure/environments/prod/locals.tf

@@ -25,10 +25,9 @@ locals {
   application_environment_variables = {
     SSM_PREFIX = "/${local.prefix}/"
 
-    PINO_LOG_LEVEL              = "info"
-    NEXT_PUBLIC_SUPRESS_CONSOLE = "true"
-    DEPLOY_ENVIRONMENT          = local.environment
-    PROFILE_PERFORMANCE         = "true"
+    PINO_LOG_LEVEL      = "info"
+    DEPLOY_ENVIRONMENT  = local.environment
+    PROFILE_PERFORMANCE = "true"
 
     CONTENT_API_ENDPOINT                     = "https://api.service.nhs.uk/"
     CONTENT_CACHE_PATH                       = "s3://${local.content_cache_bucket_name}"

infrastructure/environments/test/locals.tf

@@ -25,10 +25,9 @@ locals {
   application_environment_variables = {
     SSM_PREFIX = "/${local.prefix}/"
 
-    PINO_LOG_LEVEL              = "debug"
-    NEXT_PUBLIC_SUPRESS_CONSOLE = "true"
-    DEPLOY_ENVIRONMENT          = local.environment
-    PROFILE_PERFORMANCE         = "true"
+    PINO_LOG_LEVEL      = "debug"
+    DEPLOY_ENVIRONMENT  = local.environment
+    PROFILE_PERFORMANCE = "true"
 
     CONTENT_API_ENDPOINT                     = "https://int.api.service.nhs.uk/"
     CONTENT_CACHE_PATH                       = "s3://${local.content_cache_bucket_name}"

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

@@ -5,38 +5,53 @@ import { ClientSideErrorTypes } from "@src/utils/constants";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
-const supressConsole = (process.env.NEXT_PUBLIC_SUPRESS_CONSOLE ?? "true") !== "false";
 let router;
 
 const reportClientSideUnhandledError = (errorEvent: ErrorEvent) => {
-  if (supressConsole) errorEvent.preventDefault();
+  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
+    });
 
-  logClientSideError(ClientSideErrorTypes.UNHANDLED_ERROR).catch((err: Error) => {
-    if (!supressConsole) console.error(err.message);
-    // 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 = () => {
-  logClientSideError(ClientSideErrorTypes.UNHANDLED_PROMISE_REJECT_ERROR).catch((err: Error) => {
-    if (!supressConsole) console.error(err.message);
-    // do not show anything to the user; catching prevents an infinite loop if the logger itself throws an error which is unhandled
-  });
+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");
 };
 
 const ClientUnhandledErrorLogger = (): undefined => {
   router = useRouter();
 
   useEffect(() => {
-    window.addEventListener("unhandledrejection", reportClientSideUnhandledPromiseRejectionError);
-    window.addEventListener("error", (event: ErrorEvent) => reportClientSideUnhandledError(event));
+    window.addEventListener("unhandledrejection", (event) => reportClientSideUnhandledPromiseRejectionError(event));
+    window.addEventListener("error", (event) => reportClientSideUnhandledError(event));
 
     // on component unmount
     return () => {
-      window.removeEventListener("unhandledrejection", reportClientSideUnhandledPromiseRejectionError);
-      window.removeEventListener("error", (event: ErrorEvent) => reportClientSideUnhandledError(event));
+      window.removeEventListener("unhandledrejection", (event) =>
+        reportClientSideUnhandledPromiseRejectionError(event),
+      );
+      window.removeEventListener("error", (event) => reportClientSideUnhandledError(event));
     };
   }, []);
 };

src/utils/client-side-error-logger/client-side-error-logger.ts

@@ -7,17 +7,19 @@ import { Logger } from "pino";
 
 const log: Logger = logger.child({ module: "client-side-error-logger" });
 
-const logClientSideError = async (clientSideErrorType: ClientSideErrorTypes): Promise<void> => {
+const logClientSideError = async (clientSideErrorType: ClientSideErrorTypes): Promise<boolean> => {
   return requestScopedStorageWrapper(logClientSideErrorAction, clientSideErrorType);
 };
 
-const logClientSideErrorAction = async (clientSideErrorType: ClientSideErrorTypes): Promise<void> => {
+const logClientSideErrorAction = async (clientSideErrorType: ClientSideErrorTypes): Promise<boolean> => {
   const validClientSideErrorTypes = Object.values(ClientSideErrorTypes) as string[];
   const validatedErrorType = validClientSideErrorTypes.includes(clientSideErrorType)
     ? clientSideErrorType
     : ClientSideErrorTypes.UNKNOWN_ERROR_REASON;
 
   log.error({ context: { clientSideErrorType: validatedErrorType } }, "Client side error occurred");
+
+  return process.env.DEPLOY_ENVIRONMENT !== "prod" && process.env.DEPLOY_ENVIRONMENT !== "production";
 };
 
 export default logClientSideError;