feat(logging): improve client-side error logging format in CloudWatch (#173)

- Add global console.error override to format HttpErrorResponse objects
- Create structured JSON logs matching backend Pino format
- Add 'source: client' field to differentiate frontend from backend logs
- Prevent verbose 30+ line error expansions in CloudWatch
- Enable queryable error logs by status_code, err.type, and source

LFXV2-782

Generated with [Claude Code](https://claude.ai/code)

Signed-off-by: Asitha de Silva <[email protected]>

Author: asithade

apps/lfx-one/src/app/shared/utils/console-override.ts

@@ -0,0 +1,60 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+import { HttpErrorResponse } from '@angular/common/http';
+
+/**
+ * Overrides console.error to automatically format HttpErrorResponse objects
+ * This prevents verbose object expansion in CloudWatch logs and matches backend Pino log format
+ */
+export function initializeConsoleOverride(): void {
+  const originalConsoleError = console.error;
+
+  console.error = (...args: any[]) => {
+    const formattedArgs = args.map((arg) => {
+      // Format HttpErrorResponse objects to match backend logging structure
+      if (arg instanceof HttpErrorResponse) {
+        return formatHttpError(arg);
+      }
+      return arg;
+    });
+
+    originalConsoleError.apply(console, formattedArgs);
+  };
+}
+
+/**
+ * Formats HttpErrorResponse into structured error object matching backend Pino format
+ * Uses 'err' field convention consistent with server-side logging
+ */
+function formatHttpError(error: HttpErrorResponse): Record<string, any> {
+  // Extract backend error details if available
+  let errorMessage = error.statusText;
+  let errorCode: string | undefined;
+
+  if (error.error) {
+    if (typeof error.error === 'string') {
+      errorMessage = error.error;
+    } else if (error.error.error) {
+      errorMessage = error.error.error;
+      errorCode = error.error.code;
+    } else if (error.error.message) {
+      errorMessage = error.error.message;
+    }
+  }
+
+  // Return structured error object matching backend format with client-side indicator
+  return {
+    source: 'client',
+    err: {
+      type: 'HttpErrorResponse',
+      message: errorMessage,
+      statusCode: error.status,
+      statusText: error.statusText,
+      url: error.url || undefined,
+      code: errorCode,
+    },
+    status_code: error.status,
+    url: error.url || undefined,
+  };
+}

apps/lfx-one/src/main.ts

@@ -1,6 +1,11 @@
 // Copyright The Linux Foundation and each contributor to LFX.
 // SPDX-License-Identifier: MIT
 
+// Initialize console override BEFORE any other imports to catch all errors
+import { initializeConsoleOverride } from './app/shared/utils/console-override';
+
+initializeConsoleOverride();
+
 import { bootstrapApplication } from '@angular/platform-browser';
 import '@linuxfoundation/lfx-ui-core';