# @opentelemetry/opentelemetry-browser-detector

> OpenTelemetry Resource Detector for Browser

Latest version **0.222.0** (published 2026-08-31) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @opentelemetry/opentelemetry-browser-detector
pnpm add @opentelemetry/opentelemetry-browser-detector
yarn add @opentelemetry/opentelemetry-browser-detector
bun add @opentelemetry/opentelemetry-browser-detector
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.222.0 |
| Published | 2026-08-31 |
| First published | 2022-11-09 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | ^18.19.0 \|\| >=20.6.0 |
| Dependencies | 2 |
| Unpacked size | 66.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 3465 |
| Author | OpenTelemetry Authors |
| Maintainers | dyladan, pichlermarc, overbalance, npmjs-account, trentm, martinkuba |
| Keywords | opentelemetry, browser, resource, detector |

## Links

- npm: https://www.npmjs.com/package/@opentelemetry/opentelemetry-browser-detector
- Repository: https://github.com/open-telemetry/opentelemetry-js
- Homepage: https://github.com/open-telemetry/opentelemetry-js/tree/main/experimental/packages/browser-detector
- Issues: https://github.com/open-telemetry/opentelemetry-js/issues
- npm.io page: https://npm.io/package/@opentelemetry/opentelemetry-browser-detector

## Dependencies (2)

- [@opentelemetry/resources](https://npm.io/package/@opentelemetry/resources.md) 2.11.0
- [@opentelemetry/semantic-conventions](https://npm.io/package/@opentelemetry/semantic-conventions.md) ^1.29.0

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.222.0 (latest) — 2026-08-31
- 0.222.0-development.0 (canary) — 2026-08-31
- 0.34.0 (next) — 2022-11-09
- 0.221.0 — 2026-07-21
- 0.220.0 — 2026-07-02
- 0.219.0 — 2026-06-11
- 0.218.0 — 2026-05-13
- 0.217.0 — 2026-05-06
- 0.216.0 — 2026-04-29
- 0.215.0 — 2026-04-17
- 0.214.0 — 2026-03-25
- 0.213.0 — 2026-03-03
- 0.212.0 — 2026-02-12
- 0.211.0 — 2026-01-21
- 0.210.0 — 2026-01-14
- … 50 more at https://npm.io/package/@opentelemetry/opentelemetry-browser-detector/versions

## README

# OpenTelemetry Browser Detector

**Note: This is an experimental package under active development. New releases may include breaking changes.**

This module provides detector for browser environments

## Installation

```bash
npm install --save @opentelemetry/opentelemetry-browser-detector
```

## Usage

```js
import { resourceFromAttributes, detectResources } from '@opentelemetry/resources';
import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions';
import { browserDetector } from '@opentelemetry/opentelemetry-browser-detector';

async function start(){
  let resource = resourceFromAttributes({
    [ATTR_SERVICE_NAME]: 'Test App Name',
  });
  let detectedResources= await detectResources({detectors:[browserDetector]});
  resource=resource.merge(detectedResources);
  const provider = new WebTracerProvider({
    resource,
    spanProcessors: [
      new BatchSpanProcessor(
        new OTLPTraceExporter({ url:CONF.url, headers: {} }),
        {
          exportTimeoutMillis: CONF.timeOutMillis,
          scheduledDelayMillis:CONF.delayMillis
        }
      )
    ]
  });

  provider.register({
    // Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
    contextManager: new ZoneContextManager(),
  });

// Registering instrumentations

  registerInstrumentations({
    instrumentations: [
      new DocumentLoadInstrumentation(),
      new XMLHttpRequestInstrumentation(),
      new FetchInstrumentation(),
    ],
  });
}


start().then(()=> console.log("Instrumentation started"));

```

The browser identification attributes will be added to the resource spans when traces are created.
These attributes include platform, brands, mobile, language if the browser supports
the userAgentData api, otherwise it will contain only the user_agent information

---
_Source: https://npm.io/package/@opentelemetry/opentelemetry-browser-detector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._