feat(rum): Capture browser navigator information

Author: dashed

packages/tracing/src/browser/metrics.ts

@@ -8,12 +8,23 @@ import { Transaction } from '../transaction';
 import { msToSec } from '../utils';
 import { getFID } from './web-vitals/getFID';
 import { getLCP } from './web-vitals/getLCP';
+import { NavigatorDeviceMemory, NavigatorNetworkInformation } from './web-vitals/types';
 
 const global = getGlobalObject<Window>();
 
+type FooNavigator = Navigator & NavigatorNetworkInformation & NavigatorDeviceMemory;
+
+type BrowserContext = {
+  effectiveConnectionType?: string;
+  deviceMemory?: number;
+  // number of CPUs
+  hardwareConcurrency?: number;
+};
+
 /** Class tracking metrics  */
 export class MetricsInstrumentation {
   private _measurements: Measurements = {};
+  private _browserContext: BrowserContext = {};
 
   private _performanceCursor: number = 0;
 
@@ -25,6 +36,7 @@ export class MetricsInstrumentation {
 
       this._trackLCP();
       this._trackFID();
+      this._trackNavigator();
     }
   }
 
@@ -122,10 +134,44 @@ export class MetricsInstrumentation {
 
     // Measurements are only available for pageload transactions
     if (transaction.op === 'pageload') {
+      this._trackNavigator();
+      transaction.setContexts({ browser: this._browserContext });
       transaction.setMeasurements(this._measurements);
     }
   }
 
+  /**
+   * Capture the information of the user agent.
+   */
+  private _trackNavigator(): void {
+    const navigator = window.navigator as null | FooNavigator;
+
+    // track network connectivity
+
+    const connection = navigator?.connection;
+    if (connection) {
+      if (connection.effectiveType) {
+        this._browserContext.effectiveConnectionType = connection.effectiveType;
+      }
+
+      if (typeof connection.rtt === 'number') {
+        this._measurements['connection.rtt'] = { value: connection.rtt };
+      }
+
+      if (typeof connection.downlink === 'number') {
+        this._measurements['connection.downlink'] = { value: connection.downlink };
+      }
+    }
+
+    if (typeof navigator?.deviceMemory === 'number') {
+      this._browserContext.deviceMemory = navigator.deviceMemory;
+    }
+
+    if (typeof navigator?.hardwareConcurrency === 'number') {
+      this._browserContext.hardwareConcurrency = navigator.hardwareConcurrency;
+    }
+  }
+
   /** Starts tracking the Largest Contentful Paint on the current page. */
   private _trackLCP(): void {
     getLCP(metric => {

packages/tracing/src/browser/web-vitals/types.ts

@@ -43,3 +43,42 @@ export interface Metric {
 export interface ReportHandler {
   (metric: Metric): void;
 }
+
+// http://wicg.github.io/netinfo/#navigatornetworkinformation-interface
+export interface NavigatorNetworkInformation {
+  readonly connection?: NetworkInformation;
+}
+
+// http://wicg.github.io/netinfo/#connection-types
+type ConnectionType = 'bluetooth' | 'cellular' | 'ethernet' | 'mixed' | 'none' | 'other' | 'unknown' | 'wifi' | 'wimax';
+
+// http://wicg.github.io/netinfo/#effectiveconnectiontype-enum
+type EffectiveConnectionType = '2g' | '3g' | '4g' | 'slow-2g';
+
+// http://wicg.github.io/netinfo/#dom-megabit
+type Megabit = number;
+// http://wicg.github.io/netinfo/#dom-millisecond
+type Millisecond = number;
+
+// http://wicg.github.io/netinfo/#networkinformation-interface
+interface NetworkInformation extends EventTarget {
+  // http://wicg.github.io/netinfo/#type-attribute
+  readonly type?: ConnectionType;
+  // http://wicg.github.io/netinfo/#effectivetype-attribute
+  readonly effectiveType?: EffectiveConnectionType;
+  // http://wicg.github.io/netinfo/#downlinkmax-attribute
+  readonly downlinkMax?: Megabit;
+  // http://wicg.github.io/netinfo/#downlink-attribute
+  readonly downlink?: Megabit;
+  // http://wicg.github.io/netinfo/#rtt-attribute
+  readonly rtt?: Millisecond;
+  // http://wicg.github.io/netinfo/#savedata-attribute
+  readonly saveData?: boolean;
+  // http://wicg.github.io/netinfo/#handling-changes-to-the-underlying-connection
+  onchange?: EventListener;
+}
+
+// https://w3c.github.io/device-memory/#sec-device-memory-js-api
+export interface NavigatorDeviceMemory {
+  readonly deviceMemory?: number;
+}

packages/tracing/src/transaction.ts

@@ -1,5 +1,5 @@
 import { getCurrentHub, Hub } from '@sentry/hub';
-import { Event, Measurements, Transaction as TransactionInterface, TransactionContext } from '@sentry/types';
+import { Contexts, Event, Measurements, Transaction as TransactionInterface, TransactionContext } from '@sentry/types';
 import { isInstanceOf, logger } from '@sentry/utils';
 
 import { Span as SpanClass, SpanRecorder } from './span';
@@ -8,6 +8,7 @@ import { Span as SpanClass, SpanRecorder } from './span';
 export class Transaction extends SpanClass implements TransactionInterface {
   public name: string;
   private _measurements: Measurements = {};
+  private _contexts: Contexts = {};
 
   /**
    * The reference to the current hub.
@@ -64,6 +65,13 @@ export class Transaction extends SpanClass implements TransactionInterface {
     this._measurements = { ...measurements };
   }
 
+  /**
+   *
+   */
+  public setContexts(contexts: Contexts): void {
+    this._contexts = contexts;
+  }
+
   /**
    * @inheritDoc
    */
@@ -100,6 +108,7 @@ export class Transaction extends SpanClass implements TransactionInterface {
 
     const transaction: Event = {
       contexts: {
+        ...this._contexts,
         trace: this.getTraceContext(),
       },
       spans: finishedSpans,