L-841 [browser] Add context automatically (#99)

Author: PetrHeinz

packages/browser/src/browser.ts

@@ -1,6 +1,11 @@
 import "cross-fetch/polyfill";
 
-import { ILogtailLog, ILogtailOptions } from "@logtail/types";
+import {
+  Context,
+  ILogLevel,
+  ILogtailLog,
+  ILogtailOptions,
+} from "@logtail/types";
 import { Base } from "@logtail/core";
 
 // Awaiting: https://bugs.chromium.org/p/chromium/issues/detail?id=571722
@@ -41,7 +46,50 @@ export class Browser extends Base {
     this.configureFlushOnPageLeave();
   }
 
-  private configureFlushOnPageLeave() {
+  /**
+   * Override `Base` log to add browser-specific context
+   *
+   * @param message: string - Log message
+   * @param level (LogLevel) - Level to log at (debug|info|warn|error)
+   * @param context: (Context) - Log context for passing structured data
+   * @returns Promise<ILogtailLog> after syncing
+   */
+  public async log<TContext extends Context>(
+    message: string,
+    level?: ILogLevel,
+    context: TContext = {} as TContext,
+  ) {
+    // Wrap context in an object, if it's not already
+    if (typeof context !== "object") {
+      const wrappedContext: unknown = { extra: context };
+      context = wrappedContext as TContext;
+    }
+    if (context instanceof Error) {
+      const wrappedContext: unknown = { error: context };
+      context = wrappedContext as TContext;
+    }
+
+    context = { ...this.getCurrentContext(), ...context };
+
+    return super.log(message, level, context);
+  }
+
+  protected getCurrentContext(): Context {
+    return {
+      context: {
+        url: window.location.href,
+        user_locale: (navigator as any).userLanguage || navigator.language,
+        user_agent: navigator.userAgent,
+        device_pixel_ratio: window.devicePixelRatio,
+        screen_width: window.screen.width,
+        screen_height: window.screen.height,
+        window_width: window.innerWidth,
+        window_height: window.innerHeight,
+      },
+    };
+  }
+
+  private configureFlushOnPageLeave(): void {
     if (typeof document === "undefined") {
       return;
     }