@opentelemetry/instrumentation-fetch

OpenTelemetry Fetch Instrumentation for web

@opentelemetry/instrumentation-fetch is deprecated. Vendors and users should plan moving to instrumentations being developed in the opentelemetry-browser repository, specifically @opentelemetry/browser-instrumentation/experimental/fetch. Note that while the @opentelemetry/browser-instrumentation instrumentations cover the same Browser technologies, the emitted telemetry differs significantly.

This module provides auto instrumentation for web using fetch. (Note: This instrumentation does not instrument Node.js' fetch. See @opentelemetry/instrumentation-undici for that.)

Installation

npm install --save @opentelemetry/instrumentation-fetch

Usage

import { context, trace } from '@opentelemetry/api';
import {
  ConsoleSpanExporter,
  SimpleSpanProcessor,
  TracerProvider,
} from '@opentelemetry/sdk-trace';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';

const provider = new TracerProvider({
  spanProcessors: [new SimpleSpanProcessor(new ConsoleSpanExporter())]
});

context.setGlobalContextManager(new ZoneContextManager().enable());
trace.setGlobalTracerProvider(provider);

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 TracerProvider({
  spanProcessors: [new SimpleSpanProcessor(new ConsoleSpanExporter())]
});
context.setGlobalContextManager(new ZoneContextManager().enable());
trace.setGlobalTracerProvider(provider);
fetchInstrumentation.setTracerProvider(provider);

// and some test

fetch('http://localhost:8090/fetch.js');

Example Screenshots

See 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	FetchCustomAttributeFunction	Function for adding custom attributes
requestHook	FetchRequestHookFunction	Function for adding custom attributes or headers before the request is handled
ignoreNetworkEvents	boolean	Disable network events being added as span events (network events are added by default)
measureRequestSize	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.
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: 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

License

Apache 2.0 - See LICENSE for more information.