feat(browser): Add brower metrics sdk

Author: AbhiPrasad

packages/browser/src/exports.ts

@@ -56,6 +56,11 @@ export {
   withScope,
   FunctionToString,
   InboundFilters,
+  incr,
+  distribution,
+  set,
+  gauge,
+  Metrics,
 } from '@sentry/core';
 
 export { WINDOW } from './helpers';

packages/core/src/baseclient.ts

@@ -49,6 +49,7 @@ import { createEventEnvelope, createSessionEnvelope } from './envelope';
 import { getCurrentHub } from './hub';
 import type { IntegrationIndex } from './integration';
 import { setupIntegration, setupIntegrations } from './integration';
+import type { MetricsAggregator } from './metrics/types';
 import type { Scope } from './scope';
 import { updateSession } from './session';
 import { getDynamicSamplingContextFromClient } from './tracing/dynamicSamplingContext';
@@ -88,6 +89,13 @@ const ALREADY_SEEN_ERROR = "Not capturing exception because it's already been ca
  * }
  */
 export abstract class BaseClient<O extends ClientOptions> implements Client<O> {
+  /**
+   * A reference to a metrics aggregator
+   *
+   * @experimental Note this is alpha API. It may experience breaking changes in the future.
+   */
+  public metricsAggregator: MetricsAggregator | undefined;
+
   /** Options passed to the SDK. */
   protected readonly _options: O;
 
@@ -264,6 +272,9 @@ export abstract class BaseClient<O extends ClientOptions> implements Client<O> {
   public flush(timeout?: number): PromiseLike<boolean> {
     const transport = this._transport;
     if (transport) {
+      if (this.metricsAggregator) {
+        this.metricsAggregator.flush();
+      }
       return this._isClientDoneProcessing(timeout).then(clientFinished => {
         return transport.flush(timeout).then(transportFlushed => clientFinished && transportFlushed);
       });

packages/core/src/index.ts

@@ -63,5 +63,12 @@ export { DEFAULT_ENVIRONMENT } from './constants';
 export { ModuleMetadata } from './integrations/metadata';
 export { RequestData } from './integrations/requestdata';
 import * as Integrations from './integrations';
+export {
+  incr,
+  distribution,
+  set,
+  gauge,
+} from './metrics/exports';
+export { Metrics } from './metrics/integration';
 
 export { Integrations };

packages/core/src/metrics/constants.ts

@@ -0,0 +1,7 @@
+export const COUNTER_METRIC_TYPE = 'c';
+export const GAUGE_METRIC_TYPE = 'g';
+export const SET_METRIC_TYPE = 's';
+export const DISTRIBUTION_METRIC_TYPE = 'd';
+
+export const NAME_AND_TAG_KEY_REGEX = /[^a-zA-Z0-9_/.-]+"/g;
+export const TAG_VALUE_REGEX = /[^\w\d_:/@.{}[\]$-]+/g;

packages/core/src/metrics/index.ts renamed to packages/core/src/metrics/envelope.ts

@@ -1,13 +1,11 @@
-import type { DsnComponents, DynamicSamplingContext, SdkMetadata, StatsdEnvelope, StatsdItem } from '@sentry/types';
-import { createEnvelope, dropUndefinedKeys, dsnToString } from '@sentry/utils';
+import type { DsnComponents, SdkMetadata, StatsdEnvelope, StatsdItem } from '@sentry/types';
+import { createEnvelope, dsnToString } from '@sentry/utils';
 
 /**
  * Create envelope from a metric aggregate.
  */
 export function createMetricEnvelope(
-  // TODO(abhi): Add type for this
   metricAggregate: string,
-  dynamicSamplingContext?: Partial<DynamicSamplingContext>,
   metadata?: SdkMetadata,
   tunnel?: string,
   dsn?: DsnComponents,
@@ -27,17 +25,15 @@ export function createMetricEnvelope(
     headers.dsn = dsnToString(dsn);
   }
 
-  if (dynamicSamplingContext) {
-    headers.trace = dropUndefinedKeys(dynamicSamplingContext) as DynamicSamplingContext;
-  }
-
   const item = createMetricEnvelopeItem(metricAggregate);
   return createEnvelope<StatsdEnvelope>(headers, [item]);
 }
 
 function createMetricEnvelopeItem(metricAggregate: string): StatsdItem {
   const metricHeaders: StatsdItem[0] = {
     type: 'statsd',
+    content_type: 'application/octet-stream',
+    length: metricAggregate.length,
   };
   return [metricHeaders, metricAggregate];
 }

packages/core/src/metrics/exports.ts

@@ -0,0 +1,79 @@
+import type { ClientOptions, MeasurementUnit, Primitive } from '@sentry/types';
+import { logger } from '@sentry/utils';
+import type { BaseClient } from '../baseclient';
+import { DEBUG_BUILD } from '../debug-build';
+import { getCurrentHub } from '../hub';
+import type { MetricType } from './types';
+
+interface MetricData {
+  unit?: MeasurementUnit;
+  tags?: { [key: string]: Primitive };
+  timestamp?: number;
+}
+
+function addToMetricsAggregator(metricType: MetricType, name: string, value: number, data: MetricData = {}): void {
+  const hub = getCurrentHub();
+  const client = hub.getClient() as BaseClient<ClientOptions>;
+  const scope = hub.getScope();
+  if (client) {
+    if (!client.metricsAggregator) {
+      DEBUG_BUILD &&
+        logger.warn('No metrics aggregator enabled. Please add the Metrics integration to use metrics APIs');
+      return;
+    }
+    const { unit, tags, timestamp } = data;
+    const { release, environment } = client.getOptions();
+    const transaction = scope.getTransaction();
+    const metricTags = {
+      ...tags,
+    };
+    if (release) {
+      metricTags.release = release;
+    }
+    if (environment) {
+      metricTags.environment = environment;
+    }
+    if (transaction) {
+      metricTags.transaction = transaction.name;
+    }
+
+    DEBUG_BUILD && logger.log(`Adding value of ${value} to ${metricType} metric ${name}`);
+    client.metricsAggregator.add(metricType, name, value, unit, metricTags, timestamp);
+  }
+}
+
+/**
+ * Adds a value to a counter metric
+ *
+ * @experimental This API is experimental and might having breaking changes in the future.
+ */
+export function incr(name: string, value: number, data?: MetricData): void {
+  addToMetricsAggregator('c', name, value, data);
+}
+
+/**
+ * Adds a value to a distribution metric
+ *
+ * @experimental This API is experimental and might having breaking changes in the future.
+ */
+export function distribution(name: string, value: number, data?: MetricData): void {
+  addToMetricsAggregator('d', name, value, data);
+}
+
+/**
+ * Adds a value to a set metric
+ *
+ * @experimental This API is experimental and might having breaking changes in the future.
+ */
+export function set(name: string, value: number, data?: MetricData): void {
+  addToMetricsAggregator('s', name, value, data);
+}
+
+/**
+ * Adds a value to a gauge metric
+ *
+ * @experimental This API is experimental and might having breaking changes in the future.
+ */
+export function gauge(name: string, value: number, data?: MetricData): void {
+  addToMetricsAggregator('s', name, value, data);
+}

packages/core/src/metrics/instance.ts

@@ -0,0 +1,106 @@
+interface MetricInstance {
+  add(value: number): void;
+  toString(): string;
+}
+
+/**
+ * A metric instance representing a counter.
+ */
+export class CounterMetric implements MetricInstance {
+  public constructor(public value: number) {}
+
+  /** JSDoc */
+  public add(value: number): void {
+    this.value += value;
+  }
+
+  /** JSDoc */
+  public toString(): string {
+    return `${this.value}`;
+  }
+}
+
+/**
+ * A metric instance representing a gauge.
+ */
+export class GaugeMetric implements MetricInstance {
+  public last: number;
+  public min: number;
+  public max: number;
+  public sum: number;
+  public count: number;
+
+  public constructor(public value: number) {
+    this.last = value;
+    this.min = value;
+    this.max = value;
+    this.sum = value;
+    this.count = 1;
+  }
+
+  /** JSDoc */
+  public add(value: number): void {
+    this.value = value;
+    this.last = value;
+    this.min = Math.min(this.min, value);
+    this.max = Math.max(this.max, value);
+    this.sum += value;
+    this.count += 1;
+  }
+
+  /** JSDoc */
+  public toString(): string {
+    return `${this.last}:${this.min}:${this.max}:${this.sum}:${this.count}`;
+  }
+}
+
+/**
+ * A metric instance representing a distribution.
+ */
+export class DistributionMetric implements MetricInstance {
+  public value: number[];
+
+  public constructor(first: number) {
+    this.value = [first];
+  }
+
+  /** JSDoc */
+  public add(value: number): void {
+    this.value.push(value);
+  }
+
+  /** JSDoc */
+  public toString(): string {
+    return this.value.join(':');
+  }
+}
+
+/**
+ * A metric instance representing a set.
+ */
+export class SetMetric implements MetricInstance {
+  public value: Set<number>;
+
+  public constructor(public first: number) {
+    this.value = new Set([first]);
+  }
+
+  /** JSDoc */
+  public add(value: number): void {
+    this.value.add(value);
+  }
+
+  /** JSDoc */
+  public toString(): string {
+    return `${Array.from(this.value).join(':')}`;
+  }
+}
+
+export type Metric = CounterMetric | GaugeMetric | DistributionMetric | SetMetric;
+
+export const METRIC_MAP = {
+  c: CounterMetric,
+  g: GaugeMetric,
+  d: DistributionMetric,
+  s: SetMetric,
+};

packages/core/src/metrics/integration.ts

@@ -0,0 +1,38 @@
+import type { ClientOptions, Integration } from '@sentry/types';
+import type { BaseClient } from '../baseclient';
+import { SimpleMetricsAggregator } from './simpleaggregator';
+
+/**
+ * Enables Sentry metrics monitoring.
+ *
+ * @experimental This API is experimental and might having breaking changes in the future.
+ */
+export class Metrics implements Integration {
+  /**
+   * @inheritDoc
+   */
+  public static id: string = 'Metrics';
+
+  /**
+   * @inheritDoc
+   */
+  public name: string;
+
+  public constructor() {
+    this.name = Metrics.id;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  public setupOnce(): void {
+    // Do nothing
+  }
+
+  /**
+   * @inheritDoc
+   */
+  public setup(client: BaseClient<ClientOptions>): void {
+    client.metricsAggregator = new SimpleMetricsAggregator(client);
+  }
+}