chore(compass-web): do not expose internal logger details to web onLog hook

packages/compass-web/package.json

@@ -121,6 +121,7 @@
     "mongodb": "^6.16.0",
     "mongodb-connection-string-url": "^3.0.1",
     "mongodb-data-service": "^22.27.0",
+    "mongodb-log-writer": "^2.3.4",
     "mongodb-ns": "^2.4.2",
     "nyc": "^15.1.0",
     "os-browserify": "^0.3.0",

packages/compass-web/polyfills/@mongodb-js/devtools-proxy-support/index.ts

@@ -22,5 +22,4 @@ export function resetSystemCACache(): never {
 
 // Explicitly web-compatible
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error TS resolution doesn't match webpack resolution
 export * from '@mongodb-js/devtools-proxy-support/proxy-options';

packages/compass-web/polyfills/net/index.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error import vs require
 import { ipVersion } from 'is-ip';
 import type { ConnectionOptions } from 'mongodb-data-service';
 import { Duplex } from 'stream';
@@ -150,6 +151,7 @@ class Socket extends Duplex {
   }
 }
 
+// @ts-expect-error import vs require
 export { isIPv4, isIPv6 } from 'is-ip';
 export const isIP = (input: string) => ipVersion(input) ?? 0;
 export const createConnection = (options: { host: string; port: number }) => {

packages/compass-web/sandbox/sandbox-logger.ts

@@ -1,14 +1,13 @@
 import createDebug from 'debug';
+import type { LogMessage } from '../src/logger-and-telemetry';
 
-const logging: { name: string; component: string; args: any[] }[] = ((
-  globalThis as any
-).logging = []);
+const logging: LogMessage[] = ((globalThis as any).logging = []);
 
 const debug = createDebug(`mongodb-compass:compass-web-sandbox`);
 
 export const sandboxLogger = {
-  log: (name: string, component: string, ...args: any[]) => {
-    logging.push({ name, component, args });
+  log: (event: any) => {
+    logging.push(event);
   },
 
   debug,

packages/compass-web/src/logger-and-telemetry.spec.tsx

@@ -42,7 +42,8 @@ describe('useCompassWebLoggerAndTelemetry', function () {
   beforeEach(cleanup);
 
   it('should call callback props when logger is called', function () {
-    const onLog = Sinon.stub();
+    const logs: any[] = [];
+    const onLog = Sinon.stub().callsFake((entry) => logs.push(entry));
     const onTrack = Sinon.stub();
     const onDebug = Sinon.stub();
 
@@ -54,13 +55,16 @@ describe('useCompassWebLoggerAndTelemetry', function () {
     loggerAndTelemetry.log.info(mongoLogId(123), 'Ctx', 'msg', { attr: 1 });
 
     expect(onDebug).to.have.been.calledOnceWith('TEST', 'foo bar');
-    expect(onLog).to.have.been.calledOnceWith(
-      'info',
-      'TEST',
-      mongoLogId(123),
-      'Ctx',
-      'msg',
-      { attr: 1 }
-    );
+    expect(logs).to.deep.equal([
+      {
+        t: logs[0].t,
+        s: 'I',
+        c: 'TEST',
+        id: 123,
+        ctx: 'Ctx',
+        msg: 'msg',
+        attr: { attr: 1 },
+      },
+    ]);
   });
 });

packages/compass-web/src/logger-and-telemetry.tsx

@@ -1,8 +1,6 @@
-import type {
-  Logger,
-  MongoLogWriter,
-} from '@mongodb-js/compass-logging/provider';
-import { Writable } from 'stream';
+import type { Logger } from '@mongodb-js/compass-logging/provider';
+import { MongoLogWriter } from 'mongodb-log-writer/mongo-log-writer';
+import { PassThrough } from 'stream';
 import { mongoLogId } from '@mongodb-js/compass-logging/provider';
 import { useRef } from 'react';
 
@@ -11,83 +9,19 @@ export type TrackFunction = (
   properties: Record<string, any>
 ) => void;
 
-export type LogFunction = (
-  type: 'debug' | 'info' | 'warn' | 'error' | 'fatal',
-  ...args: any[]
-) => void;
+export type LogMessage = {
+  id: number;
+  t: { $date: string };
+  s: 'F' | 'E' | 'W' | 'I' | 'D1' | 'D2' | 'D3' | 'D4' | 'D5';
+  c: string;
+  ctx: string;
+  msg: string;
+  attr?: any;
+};
+export type LogFunction = (message: LogMessage) => void;
 
 export type DebugFunction = (...args: any[]) => void;
 
-class CompassWebLogWriter extends Writable implements MongoLogWriter {
-  _logId = '';
-  get logId() {
-    return this._logId;
-  }
-  _logFilePath = null;
-  get logFilePath() {
-    return this._logFilePath;
-  }
-  _target = {} as Writable;
-  get target() {
-    return this._target;
-  }
-  _now = () => {
-    return new Date();
-  };
-  constructor(private callbackRef: { current: { onLog?: LogFunction } }) {
-    super();
-  }
-  private _log = (
-    type: 'debug' | 'info' | 'warn' | 'error' | 'fatal',
-    ...args: any[]
-  ) => {
-    this.callbackRef?.current.onLog?.(type, ...args);
-  };
-  mongoLogId = mongoLogId;
-  flush = () => {
-    return Promise.resolve();
-  };
-  debug = (...args: any[]) => {
-    this._log('debug', ...args);
-  };
-  info = (...args: any[]) => {
-    this._log('info', ...args);
-  };
-  warn = (...args: any[]) => {
-    this._log('warn', ...args);
-  };
-  error = (...args: any[]) => {
-    this._log('error', ...args);
-  };
-  fatal = (...args: any[]) => {
-    this._log('fatal', ...args);
-  };
-  bindComponent = (component: string) => {
-    return {
-      component,
-      unbound: this as CompassWebLogWriter,
-      debug: (...args: any[]) => {
-        return this.info(component, ...args);
-      },
-      info: (...args: any[]) => {
-        return this.info(component, ...args);
-      },
-      warn: (...args: any[]) => {
-        return this.warn(component, ...args);
-      },
-      error: (...args: any[]) => {
-        return this.error(component, ...args);
-      },
-      fatal: (...args: any[]) => {
-        return this.fatal(component, ...args);
-      },
-      write: () => {
-        return true;
-      },
-    };
-  };
-}
-
 type Debugger = Logger['debug'];
 
 function createCompassWebDebugger(
@@ -133,9 +67,13 @@ export class CompassWebLoggerAndTelemetry implements Logger {
       };
     }
   ) {
-    this.log = new CompassWebLogWriter(this.callbackRef).bindComponent(
+    const passThrough = new PassThrough({ objectMode: true });
+    this.log = new MongoLogWriter('', '', passThrough).bindComponent(
       this.component
     );
+    passThrough.on('data', (line) => {
+      callbackRef.current.onLog?.(JSON.parse(line));
+    });
 
     this.debug = createCompassWebDebugger(this.component, this.callbackRef);
   }

packages/compass-web/tsconfig.json

@@ -1,7 +1,9 @@
 {
   "extends": "@mongodb-js/tsconfig-compass/tsconfig.react.json",
   "compilerOptions": {
-    "outDir": "dist"
+    "outDir": "dist",
+    "moduleResolution": "node16",
+    "module": "node16"
   },
   "include": [
     "src/**/*",