# @opentelemetry/web-common

> Common utilities for web instrumentation

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

## Install

```sh
npm install @opentelemetry/web-common
pnpm add @opentelemetry/web-common
yarn add @opentelemetry/web-common
bun add @opentelemetry/web-common
```

## Health

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

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

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.222.0 |
| Published | 2026-08-31 |
| First published | 2024-10-23 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | ^18.19.0 \|\| >=20.6.0 |
| Dependencies | 3 |
| Unpacked size | 136.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 3468 |
| Author | OpenTelemetry Authors |
| Maintainers | dyladan, pichlermarc, overbalance, npmjs-account, trentm, martinkuba |
| Keywords | opentelemetry, web, tracing, profiling, stats, monitoring |

## Links

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

## Dependencies (3)

- [@opentelemetry/sdk-logs](https://npm.io/package/@opentelemetry/sdk-logs.md) 0.222.0
- [@opentelemetry/sdk-trace](https://npm.io/package/@opentelemetry/sdk-trace.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.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
- 0.209.0 — 2026-01-08
- … 21 more at https://npm.io/package/@opentelemetry/web-common/versions

## README

# OpenTelemetry Web Utils

[![NPM Published Version][npm-img]][npm-url]
[![Apache License][license-image]][license-image]

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

This package contains classes and utils that are common for web use cases.

## Installation

```bash
npm install --save @opentelemetry/web-common
```

## Sessions

Sessions correlate multiple traces, events and logs that happen within a given time period. Sessions are represented as span/log attributes prefixed with the `session.` namespace. For additional information, see [documentation in semantic conventions](https://github.com/open-telemetry/semantic-conventions/blob/main/docs/general/session.md).

We provide a default implementation of managing sessions that:

- abstracts persisting sessions across page loads, with default implementation based on LocalStorage
- abstracts generating session IDs
- provides a mechanism for resetting the active session after maximum defined duration
- provides a mechanism for resetting the active session after a defined inactivity duration

Example:

```js
const {
  createSessionSpanProcessor,
  createSessionLogRecordProcessor,
  createDefaultSessionIdGenerator,
  createSessionManager,
  SessionManager,
  DefaultIdGenerator,
  LocalStorageSessionStore
} = require('@opentelemetry/web-common');

// session manager
const sessionManager = createSessionManager({
  sessionIdGenerator: createDefaultSessionIdGenerator(),
  sessionStore: new LocalStorageSessionStore(),
  maxDuration: 7200, // 4 hours
  inactivityTimeout: 1800 // 30 minutes
});

// restore or start session
sessionManager.start();

// configure tracer
const tracerProvider = new WebTracerProvider({
  spanProcessors: [
    createSessionSpanProcessor(sessionManager),
  ]
});

// configure logger
const loggerProvider = new LoggerProvider({
  processors: [
    createSessionLogRecordProcessor(sessionManager),
  ]
});
```

The above implementation can be customized by providing different implementations of SessionStore and SessionIdGenerator.

### Observing sessions

The SessionManager class provides a mechanism for observing sessions. This is useful when other components should be notified when a session is started or ended.

```js
sessionManager.addObserver({
  onSessionStarted: (newSession, previousSession) => {
    console.log('Session started', newSession, previousSession);
  },
  onSessionEnded: (session) => {
    console.log('Session ended', session);
  }
});
```

### Custom implementation of managing sessions

If you require a completely custom solution for managing sessions, you can still use the processors that attach attributes to spans/logs. Here is an example:

```js
function getSessionId() {
  return 'abcd1234';
}

// configure tracer
const tracerProvider = new WebTracerProvider({
  spanProcessors: [
    createSessionSpanProcessor({
      getSessionId: getSessionId
    }),
  ]
});

// configure logger
const loggerProvider = new LoggerProvider({
  processors: [
    createSessionLogRecordProcessor({
      getSessionId: getSessionId
    }),
  ]
});
```

## Useful links

- For more information on OpenTelemetry, visit: <https://opentelemetry.io/>
- For more about OpenTelemetry JavaScript: <https://github.com/open-telemetry/opentelemetry-js>
- For help or feedback on this project, join us in [GitHub Discussions][discussions-url]

## License

Apache 2.0 - See [LICENSE][license-url] for more information.

[discussions-url]: https://github.com/open-telemetry/opentelemetry-js/discussions
[license-url]: https://github.com/open-telemetry/opentelemetry-js/blob/main/LICENSE
[license-image]: https://img.shields.io/badge/license-Apache_2.0-green.svg?style=flat
[npm-url]: https://www.npmjs.com/package/@opentelemetry/web-common
[npm-img]: https://badge.fury.io/js/@opentelemetry%2Fweb-common.svg

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