Improve browser logs

Omit trace and debug logs from log buffer to avoid potentially sensitive data from showing up in bug tracking reports in case of a fatal error Improve http request logging to only show pertinent details
jetstreamapp · Nov 23, 2024 · 4cbe4cd · 4cbe4cd
1 parent 3730be6
commit 4cbe4cd
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 15 deletions.
diff --git a/apps/jetstream/src/app/components/core/AppInitializer.tsx b/apps/jetstream/src/app/components/core/AppInitializer.tsx
@@ -43,16 +43,24 @@ export const AppInitializer: FunctionComponent<AppInitializerProps> = ({ onAnnou
   const invalidOrg = useObservable(orgConnectionError$);
 
   useEffect(() => {
-    console.log(`
-     ██╗███████╗████████╗███████╗████████╗██████╗ ███████╗ █████╗ ███╗   ███╗
-     ██║██╔════╝╚══██╔══╝██╔════╝╚══██╔══╝██╔══██╗██╔════╝██╔══██╗████╗ ████║
-     ██║█████╗     ██║   ███████╗   ██║   ██████╔╝█████╗  ███████║██╔████╔██║
-██   ██║██╔══╝     ██║   ╚════██║   ██║   ██╔══██╗██╔══╝  ██╔══██║██║╚██╔╝██║
-╚█████╔╝███████╗   ██║   ███████║   ██║   ██║  ██║███████╗██║  ██║██║ ╚═╝ ██║
- ╚════╝ ╚══════╝   ╚═╝   ╚══════╝   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝
+    console.log(
+      `
+%c     ██╗███████╗████████╗███████╗████████╗██████╗ ███████╗ █████╗ ███╗   ███╗
+%c     ██║██╔════╝╚══██╔══╝██╔════╝╚══██╔══╝██╔══██╗██╔════╝██╔══██╗████╗ ████║
+%c     ██║█████╗     ██║   ███████╗   ██║   ██████╔╝█████╗  ███████║██╔████╔██║
+%c██   ██║██╔══╝     ██║   ╚════██║   ██║   ██╔══██╗██╔══╝  ██╔══██║██║╚██╔╝██║
+%c╚█████╔╝███████╗   ██║   ███████║   ██║   ██║  ██║███████╗██║  ██║██║ ╚═╝ ██║
+%c ╚════╝ ╚══════╝   ╚═╝   ╚══════╝   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝
 
 APP VERSION ${version}
- `);
+`,
+      'background: #222; color: #555555',
+      'background: #222; color: #777777',
+      'background: #222; color: #999999',
+      'background: #222; color: #BBBBBB',
+      'background: #222; color: #DDDDDD',
+      'background: #222; color: #FFFFFF'
+    );
   }, [version]);
 
   useEffect(() => {

diff --git a/libs/shared/client-logger/src/lib/client-logger.ts b/libs/shared/client-logger/src/lib/client-logger.ts
@@ -4,6 +4,10 @@
 export const logBuffer: any[] = [];
 const LOG_BUFFER_SIZE = 5;
 
+function LOG_NOOP_NO_BUFFER(...logs: any[]) {
+  // no-op
+}
+
 function LOG_NOOP(...logs: any[]) {
   logBuffer.unshift(logs);
   logBuffer.splice(LOG_BUFFER_SIZE + 1);
@@ -72,8 +76,8 @@ function clearLoggingEnabledState() {
 
 export const logger: Logger = {
   isEnabled: false,
-  trace: LOG_NOOP,
-  debug: LOG_NOOP,
+  trace: LOG_NOOP_NO_BUFFER,
+  debug: LOG_NOOP_NO_BUFFER,
   log: LOG_NOOP,
   info: LOG_NOOP,
   warn: LOG_NOOP,
@@ -87,8 +91,8 @@ export const enableLogger = (enable: boolean, logLevel: LogLevel = 'debug') => {
   logger.isEnabled = enable;
   if (!enable) {
     clearLoggingEnabledState();
-    logger.trace = LOG_NOOP;
-    logger.debug = LOG_NOOP;
+    logger.trace = LOG_NOOP_NO_BUFFER;
+    logger.debug = LOG_NOOP_NO_BUFFER;
     logger.log = LOG_NOOP;
     logger.info = LOG_NOOP;
     logger.warn = LOG_NOOP;

diff --git a/libs/shared/data/src/lib/client-data-data-helper.ts b/libs/shared/data/src/lib/client-data-data-helper.ts
@@ -119,7 +119,6 @@ export async function handleRequest<T = any>(config: AxiosRequestConfig, options
  */
 function requestInterceptor<T>(options: RequestOptions) {
   return async (config: InternalAxiosRequestConfig) => {
-    logger.info(`[HTTP][REQ][${config.method?.toUpperCase()}]`, config.url, { request: config });
     const { org, targetOrg, useCache, skipRequestCache, skipCacheIfOlderThan, useQueryParamsInCacheKey, useBodyInCacheKey } = options;
     // add request headers
     config.headers = config.headers || ({} as any);
@@ -184,6 +183,14 @@ function requestInterceptor<T>(options: RequestOptions) {
       }
     }
 
+    logger.info(`[HTTP][REQ][${config.method?.toUpperCase()}]`, config.url, {
+      request: {
+        headers: config.headers.toJSON(),
+        params: config.params,
+        data: config.data,
+      },
+    });
+
     return config;
   };
 }
@@ -226,9 +233,9 @@ function responseInterceptor<T>(options: RequestOptions): (response: AxiosRespon
     const { org, useCache, useQueryParamsInCacheKey, useBodyInCacheKey } = options;
     const cachedResponse = getHeader(response.headers, HTTP.HEADERS.X_CACHE_RESPONSE) === '1';
     if (cachedResponse) {
-      logger.info(`[HTTP][RES][${response.config.method?.toUpperCase()}][CACHE]`, response.config.url, { response: response.data });
+      logger.debug(`[HTTP][RES][${response.config.method?.toUpperCase()}][CACHE]`, response.config.url, { response: response.data });
     } else {
-      logger.info(`[HTTP][RES][${response.config.method?.toUpperCase()}][${response.status}]`, response.config.url, {
+      logger.debug(`[HTTP][RES][${response.config.method?.toUpperCase()}][${response.status}]`, response.config.url, {
         clientRequestId: response.headers['x-client-request-id'],
         requestId: response.headers['x-request-id'],
         response: response.data,