# @opentelemetry/instrumentation-user-interaction

> OpenTelemetry instrumentation for user interactions as click events in a web application

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

## Install

```sh
npm install @opentelemetry/instrumentation-user-interaction
pnpm add @opentelemetry/instrumentation-user-interaction
yarn add @opentelemetry/instrumentation-user-interaction
bun add @opentelemetry/instrumentation-user-interaction
```

## 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.66.0 |
| Published | 2026-08-31 |
| First published | 2021-02-10 |
| 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 | 215.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 927 |
| Author | OpenTelemetry Authors |
| Maintainers | dyladan, pichlermarc, overbalance, npmjs-account, trentm, martinkuba |
| Keywords | opentelemetry, web, tracing, profiling, metrics, stats, user-interaction |

## Links

- npm: https://www.npmjs.com/package/@opentelemetry/instrumentation-user-interaction
- Repository: https://github.com/open-telemetry/opentelemetry-js-contrib
- Homepage: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/packages/instrumentation-user-interaction#readme
- Issues: https://github.com/open-telemetry/opentelemetry-js-contrib/issues
- npm.io page: https://npm.io/package/@opentelemetry/instrumentation-user-interaction

## Dependencies (3)

- [@opentelemetry/core](https://npm.io/package/@opentelemetry/core.md) ^2.0.0
- [@opentelemetry/sdk-trace-web](https://npm.io/package/@opentelemetry/sdk-trace-web.md) ^2.0.0
- [@opentelemetry/instrumentation](https://npm.io/package/@opentelemetry/instrumentation.md) ^0.222.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.66.0 (latest) — 2026-08-31
- 0.65.0 — 2026-07-23
- 0.64.0 — 2026-07-03
- 0.63.0 — 2026-06-11
- 0.62.0 — 2026-05-13
- 0.61.0 — 2026-05-06
- 0.60.0 — 2026-04-29
- 0.59.0 — 2026-04-17
- 0.58.0 — 2026-03-26
- 0.57.0 — 2026-03-04
- 0.56.0 — 2026-02-17
- 0.55.0 — 2026-01-22
- 0.54.0 — 2026-01-15
- 0.53.0 — 2025-11-06
- 0.52.0 — 2025-10-21
- … 50 more at https://npm.io/package/@opentelemetry/instrumentation-user-interaction/versions

## README

# OpenTelemetry UserInteraction Instrumentation for web

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

This module provides automatic instrumentation for *user interactions* for Web applications, which may be loaded using the [`@opentelemetry/sdk-trace-web`](https://www.npmjs.com/package/@opentelemetry/sdk-trace-web) package.

If total installation size is not constrained, it is recommended to use the [`@opentelemetry/auto-instrumentations-web`](https://www.npmjs.com/package/@opentelemetry/auto-instrumentations-web) bundle with [`@opentelemetry/sdk-trace-web`](https://www.npmjs.com/package/@opentelemetry/sdk-trace-web) for the most seamless instrumentation experience.

Compatible with OpenTelemetry JS API and SDK `1.0+`.

This module can work either with [zone-js] or without it, with [zone-js] and ZoneContextManager it will fully support the async operations. Without [zone-js] it will still work but with limited support.
If you use Angular or [@opentelemetry/context-zone] you will have [zone-js] included.

## Installation

```bash
npm install --save @opentelemetry/instrumentation-user-interaction
```

## Usage

### Initialize

```js
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
// or if you already have zone.js
// import { ZoneContextManager } from '@opentelemetry/context-zone-peer-dep';

const provider = new WebTracerProvider({
  contextManager: new ZoneContextManager(),
  spanProcessors: [
    new SimpleSpanProcessor({ exporter: new ConsoleSpanExporter() }),
  ],
});

provider.register();

registerInstrumentations({
  instrumentations: [
    new UserInteractionInstrumentation(),
  ],
});

// and some test
const btn1 = document.createElement('button');
btn1.append(document.createTextNode('btn1'));
btn1.addEventListener('click', () => {
  console.log('clicked');
});
document.querySelector('body').append(btn1);

const btn2 = document.createElement('button');
btn2.append(document.createTextNode('btn2'));
btn2.addEventListener('click', () => {
  getData('https://httpbin.org/get').then(() => {
    getData('https://httpbin.org/get').then(() => {
      console.log('data downloaded 2');
    });
    getData('https://httpbin.org/get').then(() => {
      console.log('data downloaded 3');
    });
    console.log('data downloaded 1');
  });
});
document.querySelector('body').append(btn2);

function getData(url) {
  return new Promise(async (resolve) => {
    const req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.setRequestHeader('Content-Type', 'application/json');
    req.setRequestHeader('Accept', 'application/json');
    req.send();
    req.onload = function () {
      resolve();
    };
  });
}

// now click on buttons

```

### Send spans for different events

By default, only `click` events are automatically instrumented. To automatically instrument other events, specify the events that should be captured for telemetry. Most [HTMLElement interface events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement#events) are supported.

```js
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { registerInstrumentations } from '@opentelemetry/instrumentation';

// ...general opentelemetry configuration

registerInstrumentations({
  instrumentations: [
    new UserInteractionInstrumentation({
      eventNames: ['submit', 'click', 'keypress'],
    }),
  ],
});
```

### Prevent spans from recording

```js
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { registerInstrumentations } from '@opentelemetry/instrumentation';


// ...general opentelemetry configuration

registerInstrumentations({
  instrumentations: [
    new UserInteractionInstrumentation({
      shouldPreventSpanCreation: () => {
        return true;
      },
    }),
  ],
});
```

### Add extra attributes to spans

To attach extra attributes to user interaction spans, provide a callback function to the `shouldPreventSpanCreation` option:

```js
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { registerInstrumentations } from '@opentelemetry/instrumentation';

// ...general opentelemetry configuration

registerInstrumentations({
  instrumentations: [
    new UserInteractionInstrumentation({
      shouldPreventSpanCreation: (event, element, span) => {
        span.setAttribute('target.id', element.id);
        // etc..
      }
    }),
  ],
});
```

## Example Screenshots

![Screenshot of the running example](images/main.jpg)
![Screenshot of the running example](images/click.jpg)
![Screenshot of the running example](images/main-sync.jpg)
![Screenshot of the running example](images/click-sync.jpg)

## Semantic Conventions

This package does not currently generate any attributes from semantic conventions.

## 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-contrib/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/instrumentation-user-interaction
[npm-img]: https://badge.fury.io/js/%40opentelemetry%2Finstrumentation-user-interaction.svg
[zone-js]: https://www.npmjs.com/package/zone.js
[@opentelemetry/context-zone]: https://www.npmjs.com/package/@opentelemetry/context-zone

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