# Set Up Metrics | Sentry for JavaScript

With Sentry Metrics, you can send counters, gauges, distributions, and sets from your applications to Sentry. Once in Sentry, these metrics can be viewed alongside relevant errors, and searched using their individual attributes.

This feature is currently in open beta. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/discussions/18055) if you have feedback or questions. Features in beta are still in-progress and may have bugs. We recognize the irony.

## [Requirements](https://docs.sentry.io/platforms/javascript/metrics.md#requirements)

Metrics are supported in all Sentry JavaScript SDKs version `10.25.0` and above.

## [Usage](https://docs.sentry.io/platforms/javascript/metrics.md#usage)

Once the SDK is initialized, you can send metrics using the `Sentry.metrics` APIs.

The `metrics` namespace exposes three methods that you can use to capture different types of metric information: `count`, `gauge` and `distribution`.

### [Counter](https://docs.sentry.io/platforms/javascript/metrics.md#counter)

Use `count` to track an incrementing value, such as the number of times a button was clicked or a function was called.

```javascript
Sentry.metrics.count("button_click", 1);
```

### [Gauge](https://docs.sentry.io/platforms/javascript/metrics.md#gauge)

Use `gauge` to track a value that can go up and down, such as the current memory usage or the number of items in a queue.

```javascript
Sentry.metrics.gauge("queue_depth", 42);
```

### [Distribution](https://docs.sentry.io/platforms/javascript/metrics.md#distribution)

Use `distribution` to track the distribution of a value, such as the response time of a request.

```javascript
Sentry.metrics.distribution("response_time", 187.5);
```

### [Adding Attributes](https://docs.sentry.io/platforms/javascript/metrics.md#adding-attributes)

You can also pass additional attributes to any of the metric methods via the `attributes` option. Attributes allow you to filter and group metrics.

```javascript
Sentry.metrics.count("button_click", 1, {
  attributes: {
    browser: "Firefox",
    app_version: "1.0.0",
  },
});
```

With version `10.33.0` and above, you can use scope APIs to set attributes on the SDK's scopes which will be applied to all metrics as long as the respective scopes are active. For the time being, only `string`, `number` and `boolean` attribute values are supported.

```js
Sentry.getGlobalScope().setAttributes({ is_admin: true, auth_provider: 'google' });

Sentry.withScope(scope => {
  scope.setAttribute('step', 'authentication');

  // scope attributes `is_admin`, `auth_provider` and `step` are added
  Sentry.metrics.count('clicks', 1, { attributes: { activeSince: 100 } });
  Sentry.metrics.gauge('time_since_refresh', 4, { unit: 'hour' });
});

// scope attributes `is_admin` and `auth_provider` are added
Sentry.metrics.distribution('response_time', 283.33, { unit: 'millisecond' });
```

### [Specifying Units](https://docs.sentry.io/platforms/javascript/metrics.md#specifying-units)

For `gauge` and `distribution` metrics, you can specify a unit using the `unit` option. This helps Sentry display the metric value in a human-readable format.

```javascript
Sentry.metrics.distribution("response_time", 187.5, {
  unit: "millisecond",
});

Sentry.metrics.gauge("memory_usage", 1024, {
  unit: "byte",
});
```

## [Options](https://docs.sentry.io/platforms/javascript/metrics.md#options)

The Sentry JavaScript SDK provides several options to configure how metrics are captured and sent to Sentry.

### [Filtering and Modifying Metrics](https://docs.sentry.io/platforms/javascript/metrics.md#filtering-and-modifying-metrics)

Use the `beforeSendMetric` callback to filter or modify metrics before they're sent to Sentry. This is useful for:

* Removing sensitive data from metric attributes
* Dropping metrics you don't want to send
* Adding or modifying attributes

The callback receives a metric object and must return either a modified metric or `null` to drop it.

```javascript
Sentry.init({
  // ...
  beforeSendMetric: (metric) => {
    // Drop metrics with specific attributes
    if (metric.attributes?.dropMe === true) {
      return null;
    }

    // Modify metric attributes
    metric.attributes = {
      ...metric.attributes,
      processed: true,
    };

    return metric;
  },
});
```

### [Disabling Metrics](https://docs.sentry.io/platforms/javascript/metrics.md#disabling-metrics)

If you want to disable metrics collection entirely, you can do so by disabling the `enableMetrics` flag:

```javascript
Sentry.init({
  dsn: "___PUBLIC_DSN___",
  enableMetrics: false,
});
```

### [Flushing Metrics](https://docs.sentry.io/platforms/javascript/metrics.md#flushing-metrics)

By default, metrics are buffered and flushed depending on buffer size and time. If you need to manually flush metrics before the automatic interval, you can use the `flush` method:

```javascript
await Sentry.flush();
```

This will flush all pending metrics and events to Sentry.

## [Default Attributes](https://docs.sentry.io/platforms/javascript/metrics.md#default-attributes)

By default the SDK will attach the following attributes to a metric:

* `environment`: The environment set in the SDK if defined. This is sent from the SDK as `sentry.environment`.
* `release`: The release set in the SDK if defined. This is sent from the SDK as `sentry.release`.
* `sdk.name`: The name of the SDK that sent the metric. This is sent from the SDK as `sentry.sdk.name`.
* `sdk.version`: The version of the SDK that sent the metric. This is sent from the SDK as `sentry.sdk.version`.

### [User Attributes](https://docs.sentry.io/platforms/javascript/metrics.md#user-attributes)

If user information is available in the current scope, the following attributes are added to the log:

* `user.id`: The user ID.
* `user.name`: The username.
* `user.email`: The email address.

### [Browser Attributes](https://docs.sentry.io/platforms/javascript/metrics.md#browser-attributes)

The SDK will attach browser information as attributes:

* `browser.name` (added during ingestion)
* `browser.version` (added during ingestion)
* `sentry.replay_id`: The replay id of the session replay that was active when the metric was collected.

### [Server Attributes](https://docs.sentry.io/platforms/javascript/metrics.md#server-attributes)

Backend SDKs (Node.js, Cloudflare, etc.), will attach the following:

* `server.address`: The address of the server that sent the metric. Equivalent to `server_name` that gets attached to Sentry errors.