# @opentelemetry/instrumentation-fetch > OpenTelemetry instrumentation for fetch http client in web browsers Latest version **0.222.0** (published 2026-08-31) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @opentelemetry/instrumentation-fetch pnpm add @opentelemetry/instrumentation-fetch yarn add @opentelemetry/instrumentation-fetch bun add @opentelemetry/instrumentation-fetch ``` ## 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 | 2021-01-21 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | ^18.19.0 \|\| >=20.6.0 | | Dependencies | 4 | | Unpacked size | 253.4 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 | fetch, opentelemetry, browser, tracing, profiling, metrics, stats | ## Links - npm: https://www.npmjs.com/package/@opentelemetry/instrumentation-fetch - Repository: https://github.com/open-telemetry/opentelemetry-js - Homepage: https://github.com/open-telemetry/opentelemetry-js/tree/main/experimental/packages/opentelemetry-instrumentation-fetch - Issues: https://github.com/open-telemetry/opentelemetry-js/issues - npm.io page: https://npm.io/package/@opentelemetry/instrumentation-fetch ## Dependencies (4) - [@opentelemetry/core](https://npm.io/package/@opentelemetry/core.md) 2.11.0 - [@opentelemetry/sdk-trace-web](https://npm.io/package/@opentelemetry/sdk-trace-web.md) 2.11.0 - [@opentelemetry/instrumentation](https://npm.io/package/@opentelemetry/instrumentation.md) 0.222.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 - … 201 more at https://npm.io/package/@opentelemetry/instrumentation-fetch/versions ## README # OpenTelemetry Fetch Instrumentation for web [![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 module provides auto instrumentation for web using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/fetch). (Note: This instrumentation does **not** instrument [Node.js' fetch](https://nodejs.org/api/globals.html#fetch). See [`@opentelemetry/instrumentation-undici`](https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/packages/instrumentation-undici) for that.) ## Installation ```bash npm install --save @opentelemetry/instrumentation-fetch ``` ## Usage ```js import { ConsoleSpanExporter, SimpleSpanProcessor, WebTracerProvider, } from '@opentelemetry/sdk-trace-web'; import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch'; import { ZoneContextManager } from '@opentelemetry/context-zone'; import { registerInstrumentations } from '@opentelemetry/instrumentation'; const provider = new WebTracerProvider({ spanProcessors: [new SimpleSpanProcessor(new ConsoleSpanExporter())] }); provider.register({ contextManager: new ZoneContextManager(), }); registerInstrumentations({ instrumentations: [new FetchInstrumentation()], }); // or plugin can be also initialised separately and then set the tracer provider or meter provider const fetchInstrumentation = new FetchInstrumentation(); const provider = new WebTracerProvider({ spanProcessors: [new SimpleSpanProcessor(new ConsoleSpanExporter())] }); provider.register({ contextManager: new ZoneContextManager(), }); fetchInstrumentation.setTracerProvider(provider); // and some test fetch('http://localhost:8090/fetch.js'); ``` ## Example Screenshots ![Screenshot of the running example](images/trace1.png) ![Screenshot of the running example](images/trace2.png) ![Screenshot of the running example](images/trace3.png) See [examples/opentelemetry-web](https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/opentelemetry-web) for a short example. ### Fetch Instrumentation options Fetch instrumentation plugin has few options available to choose from. You can set the following: | Options | Type | Description | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`applyCustomAttributesOnSpan`](https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L83) | `FetchCustomAttributeFunction` | Function for adding custom attributes | | [`requestHook`](https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L85) | `FetchRequestHookFunction` | Function for adding custom attributes or headers before the request is handled | | [`ignoreNetworkEvents`](https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L87) | `boolean` | Disable network events being added as span events (network events are added by default) | | [`measureRequestSize`](https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L89) | `boolean` | Measure outgoing request length (outgoing request length is not measured by default) | ## Semantic Conventions The `instrumentation-fetch` versions v0.220.0 and later emit the stable v1.23.0+ semantic conventions. **Span attributes:** | v1.23.0 semconv | Notes | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `http.request.method` | HTTP request method. With v1.23.0 semconv [`http.request.method_original` may also be included](https://github.com/open-telemetry/semantic-conventions/blob/v1.23.1/docs/http/http-spans.md#common-attributes). | | `url.full` | Full HTTP request URL | | `server.address` and `server.port` | The hostname and port of the request URL | | `http.response.status_code` | HTTP response status code | | `http.request.body.size` | This is only added if `measureRequestSize` is `true`. | | `error.type` | The response status (as a string), if the response status was `>=400`. | ## Useful links - For more information on OpenTelemetry, visit: - For more about OpenTelemetry JavaScript: - 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/instrumentation-fetch [npm-img]: https://badge.fury.io/js/%40opentelemetry%2Finstrumentation-fetch.svg --- _Source: https://npm.io/package/@opentelemetry/instrumentation-fetch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._