---
title: "Application Metrics"
description: "Metrics allow you to send, view and query counters, gauges and measurements from your Sentry-configured apps to track application health and drill down into related traces, logs, and errors."
url: https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/metrics/
---

# Set Up Metrics for TanStack Start React

## Set up with Sentry CLI

Set up the Sentry TanStack Start SDK with the Sentry CLI. Install the CLI with one of these commands, then follow the Sentry CLI docs to finish setup.

**cURL**

```bash
curl https://cli.sentry.dev/install -fsS | bash
```

**PowerShell**

```powershell
irm https://cli.sentry.dev/install.ps1 | iex
```

**Homebrew**

```bash
brew install getsentry/tools/sentry
```

**npx**

```bash
npx sentry@latest
```

[Learn more about the Sentry CLI](https://cli.sentry.dev/)

With [Sentry's Application Metrics](https://docs.sentry.io/product/metrics.md), you can send counters, gauges, and distributions from your applications to Sentry. Once in Sentry, these metrics can be viewed alongside relevant errors, and searched using their individual attributes.

## [Prerequisites](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/metrics.md#prerequisites)

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

[Make sure you have the SDK set up](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react.md) before proceeding.

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

### [Metric Types](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/metrics.md#metric-types)

| Type           | Use For                                      |
| -------------- | -------------------------------------------- |
| `count`        | Events (orders, clicks, API calls)           |
| `gauge`        | Current values (queue depth, connections)    |
| `distribution` | Value ranges (response times, payload sizes) |

No setup required beyond SDK initialization. Metrics are captured whenever you call `Sentry.metrics.*`.

```javascript
import * as Sentry from "<sdk-package-name>";

// Count occurrences
Sentry.metrics.count("orders_created", 1);

// Track current values
Sentry.metrics.gauge("active_connections", 42);

// Track distributions
Sentry.metrics.distribution("api_latency", 187, {
  unit: "millisecond",
});
```

### [Attributes](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/metrics.md#attributes)

#### [Filtering and Grouping](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/metrics.md#filtering-and-grouping)

Attributes let you filter and group metrics in Sentry. Use them for:

* Environment segmentation
* Feature flag tracking
* User tier analysis

Each metric has a **2KB size limit**. If you exceed this, the metric will be dropped.

```javascript
Sentry.metrics.count("api_calls", 1, {
  attributes: {
    endpoint: "/api/orders",
    user_tier: "pro",
    region: "us-west",
    user_id: user.id,
    order_id: order.id,
  },
});
```

#### [Shared Attributes](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/metrics.md#shared-attributes)

Available since: `v10.61.0`

Use `Sentry.setAttribute` and `Sentry.setAttributes` to attach attributes that apply to all metrics (as well as your logs). These work just like [`Sentry.setTag` and `Sentry.setTags`](https://docs.sentry.io/platforms/javascript/configuration/apis.md#setTag), but accept `string`, `number`, and `boolean` values.

To target a specific scope instead, use the scope APIs.

See [Attributes](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/enriching-events/attributes.md) for more information.

```javascript
// Applied to all metrics and logs
Sentry.setAttributes({
  is_admin: true,
  auth_provider: "google",
});

// Set on a specific scope instead
Sentry.withScope((scope) => {
  scope.setAttribute("step", "authentication");

  // All scope attributes are added
  Sentry.metrics.count("clicks", 1);
  Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" });
});
```

#### [Units](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/metrics.md#units)

For `gauge` and `distribution` metrics, specify a unit to help Sentry display values in a human-readable format.

Common units: `millisecond`, `second`, `byte`, `kilobyte`, `megabyte`. See [supported units](https://develop.sentry.dev/sdk/foundations/data-model/attributes/#units) for the full list.

```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/guides/tanstackstart-react/metrics.md#options)

### [beforeSendMetric](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/metrics.md#beforesendmetric)

Filter or modify metrics before sending. Return `null` to drop a metric.

```javascript
Sentry.init({
  dsn: "https://<key>@o<orgId>.ingest.sentry.io/<projectId>",
  beforeSendMetric: (metric) => {
    // Drop specific metrics
    if (metric.name === "debug_metric") {
      return null;
    }

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

    return metric;
  },
});
```

### [Disable Metrics](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/metrics.md#disable-metrics)

Metrics are only captured when you call `Sentry.metrics.*`, so there is no option to turn them on or off. To stop sending metrics without removing those calls, return `null` from `beforeSendMetric`.

On SDK versions below `11.0.0`, set `enableMetrics: false` in your `Sentry.init` to disable metrics instead.

### [Flush Metrics](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/metrics.md#flush-metrics)

Metrics are buffered and sent periodically. Use this snippet to flush immediately:

```javascript
// Drop all metrics
Sentry.init({
  dsn: "https://<key>@o<orgId>.ingest.sentry.io/<projectId>",
  beforeSendMetric: () => null,
});

// Flush all pending metrics
await Sentry.flush();
```

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

Sentry automatically attaches these attributes to every metric:

| Attribute                            | Description                     | Context     |
| ------------------------------------ | ------------------------------- | ----------- |
| `sentry.environment`                 | Environment from SDK config     | Always      |
| `sentry.release`                     | Release version from SDK config | Always      |
| `sentry.sdk.name`                    | SDK name                        | Always      |
| `sentry.sdk.version`                 | SDK version                     | Always      |
| `user.id`, `user.name`, `user.email` | User identifiers                | If user set |
| `browser.name`, `browser.version`    | Browser info                    | Client-side |
| `sentry.replay_id`                   | Session replay ID               | Client-side |
| `server.address`                     | Server hostname                 | Server-side |

## [Integrations](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/metrics.md#integrations)

* [`elementTimingIntegration`](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/configuration/integrations/elementtiming.md)

  — Automatically collect render and load timing distribution metrics for key UI elements using the browser's Element Timing API.
* [`bfcacheMetricsIntegration`](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/configuration/integrations/bfcache.md)

  — Track browser back/forward cache (bfcache) hit/miss rate and not-restored reasons as metrics.

## [Related Features](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/metrics.md#related-features)

* [Tracing](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/tracing.md) — Drill down from metrics into related traces to understand performance patterns.
* [Logs](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/logs.md) — Combine metrics with logs for full observability into your application's behavior.
* [Error Monitoring](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/usage.md) — Use metrics alongside error tracking to understand the impact of issues.
* [Attributes](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/enriching-events/attributes.md) — Set attributes once and have them automatically included on all your metrics.