Implement custom browser logger

Author: nodeexx

src/hooks.client.ts

@@ -7,6 +7,7 @@ import {
   getClientSentryIntegrations,
   setClientPosthogSessionId,
 } from '$lib/client/sentry/utils';
+import { logger } from '$lib/client/logging';
 
 setupBrowserPosthogClient(config.posthog.projectApiKey, config.posthog.apiHost);
 setupSentryClient({
@@ -23,6 +24,8 @@ setupSentryClient({
 });
 setClientPosthogSessionId();
 
+logger.debug('Client app started');
+
 export const handleError = handleErrorWithSentry((async ({ error }) => {
   const message = 'Internal Client Error';
   if (dev) {

src/lib/client/core/config/index.ts

@@ -22,6 +22,16 @@ export const config = {
     organization: PUBLIC_SENTRY_ORGANIZATION,
     projectId: getSentryProjectId(),
   },
+  logger: {
+    get minLogLevel(): string {
+      return globalThis.localStorage.getItem('LOGGER_MIN_LOG_LEVEL') ?? 'info';
+    },
+    get isDebugContextShown(): boolean {
+      return (
+        globalThis.localStorage.getItem('LOGGER_SHOW_DEBUG_CONTEXT') === 'true'
+      );
+    },
+  },
 };
 
 function getSentryProjectId(): number | undefined {

src/lib/client/logging/client.ts

@@ -0,0 +1,78 @@
+import { config } from '$lib/client/core/config';
+import type { LoggerContext } from '$lib/shared/logging/types';
+import {
+  enrichContextWithDebugInfo,
+  enrichLoggerContextWithSentryTraceId,
+} from '$lib/shared/logging/utils';
+import type { LogLevelName } from './types';
+import { logLevelColors, logLevels, logTimestampColors } from './utils';
+
+export const logger = (function () {
+  const createLogger = (methodName: LogLevelName) => {
+    return (
+      message: string,
+      context: LoggerContext = {},
+      stackLevel: number = 3,
+    ) => {
+      if (!shouldBeLogged(methodName)) {
+        return;
+      }
+
+      const contextClone = enrichLoggerContextWithSentryTraceId(context);
+
+      console[methodName](
+        ...createLogPrefixStrings(methodName),
+        message,
+        '\n',
+        config.logger.isDebugContextShown
+          ? enrichContextWithDebugInfo(
+              contextClone,
+              window.location.origin,
+              stackLevel,
+            )
+          : contextClone,
+      );
+
+      // Sentry libraries automatically record breadcrumbs for console logs,
+      // so there is not need to manually record them.
+    };
+  };
+
+  const logger = Object.keys(logLevels).reduce(
+    (acc, methodName) => {
+      acc[methodName as LogLevelName] = createLogger(
+        methodName as LogLevelName,
+      );
+      return acc;
+    },
+    {} as Record<
+      LogLevelName,
+      (message: string, context?: LoggerContext, stackLevel?: number) => void
+    >,
+  );
+
+  return logger;
+})();
+
+function shouldBeLogged(logLevel: LogLevelName): boolean {
+  const requestedLogLevel = logLevels[logLevel];
+  const minLogLevel = logLevels[config.logger.minLogLevel as LogLevelName];
+
+  return requestedLogLevel >= minLogLevel;
+}
+
+function createLogPrefixStrings(logLevel: LogLevelName): string[] {
+  const currentUtcTime = new Date().toISOString();
+  const logTimestampColor = logTimestampColors[logLevel];
+  const logLevelColor = logLevelColors[logLevel];
+  const logLevelCommonStyles =
+    'font-weight: bold; padding: 2px 4px; border-radius: 2px;';
+
+  return [
+    `%c[${currentUtcTime}]%c\t%c${logLevel}%c\t:`,
+    `color: ${logTimestampColor.color}; font-weight: bold;`,
+    '',
+    `background-color: ${logLevelColor.backgroundColor}; color: ${logLevelColor.color}; ${logLevelCommonStyles}`,
+    '',
+  ];
+}

src/lib/client/logging/index.ts

@@ -0,0 +1 @@
+export * from './client';

src/lib/client/logging/types/index.ts

@@ -0,0 +1,3 @@
+import type { logLevels } from '../utils';
+
+export type LogLevelName = keyof typeof logLevels;

src/lib/client/logging/utils/index.ts

@@ -0,0 +1,54 @@
+import type { LogLevelName } from '../types';
+
+export const logLevels = {
+  debug: 10,
+  log: 20,
+  info: 30,
+  warn: 40,
+  error: 50,
+} as const;
+
+export const logLevelColors = {
+  debug: {
+    backgroundColor: '#666',
+    color: '#fff',
+  },
+  error: {
+    backgroundColor: '#f05033',
+    color: '#fff',
+  },
+  info: {
+    backgroundColor: '#3174f1',
+    color: '#fff',
+  },
+  log: {
+    backgroundColor: '#712bde',
+    color: '#fff',
+  },
+  warn: {
+    backgroundColor: '#f5a623',
+    color: '#000',
+  },
+} satisfies {
+  [key in LogLevelName]: { backgroundColor: string; color: string };
+};
+
+export const logTimestampColors = {
+  debug: {
+    color: '#999',
+  },
+  error: {
+    color: '#ff1a1a',
+  },
+  info: {
+    color: '#3291ff',
+  },
+  log: {
+    color: '#8367d3',
+  },
+  warn: {
+    color: '#f7b955',
+  },
+} satisfies {
+  [key in LogLevelName]: { color: string };
+};