opentelemetry-js/modules/_opentelemetry_instrumentat...

142 lines
27 KiB
HTML

<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>@opentelemetry/instrumentation-fetch | OpenTelemetry SDK</title><meta name="description" content="Documentation for OpenTelemetry SDK"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">OpenTelemetry SDK</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../index.html">OpenTelemetry SDK</a></li><li><a href="_opentelemetry_instrumentation-fetch.html">@opentelemetry/instrumentation-fetch</a></li></ul><h1>Module @opentelemetry/instrumentation-fetch</h1></div><section class="tsd-panel tsd-typography"><a id="opentelemetry-fetch-instrumentation-for-web" class="tsd-anchor"></a><h1 class="tsd-anchor-link">OpenTelemetry Fetch Instrumentation for web<a href="#opentelemetry-fetch-instrumentation-for-web" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p><a href="https://www.npmjs.com/package/@opentelemetry/instrumentation-fetch"><img src="https://badge.fury.io/js/%40opentelemetry%2Finstrumentation-fetch.svg" alt="NPM Published Version"></a>
<a href="https://img.shields.io/badge/license-Apache_2.0-green.svg?style=flat"><img src="https://img.shields.io/badge/license-Apache_2.0-green.svg?style=flat" alt="Apache License"></a></p>
<p><strong>Note: This is an experimental package under active development. New releases may include breaking changes.</strong></p>
<p>This module provides auto instrumentation for web using <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch">fetch</a>.
(Note: This instrumentation does <strong>not</strong> instrument <a href="https://nodejs.org/api/globals.html#fetch">Node.js' fetch</a>. See <a href="https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/plugins/node/instrumentation-undici/"><code>@opentelemetry/instrumentation-undici</code></a> for that.)</p>
<a id="installation" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Installation<a href="#installation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-3">--save</span><span class="hl-1"> </span><span class="hl-2">@opentelemetry/instrumentation-fetch</span>
</code><button type="button">Copy</button></pre>
<a id="usage" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Usage<a href="#usage" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><pre><code class="js"><span class="hl-7">import</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">ConsoleSpanExporter</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">SimpleSpanProcessor</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">WebTracerProvider</span><span class="hl-1">,</span><br/><span class="hl-1">} </span><span class="hl-7">from</span><span class="hl-1"> </span><span class="hl-2">&#39;@opentelemetry/sdk-trace-web&#39;</span><span class="hl-1">;</span><br/><span class="hl-7">import</span><span class="hl-1"> { </span><span class="hl-6">FetchInstrumentation</span><span class="hl-1"> } </span><span class="hl-7">from</span><span class="hl-1"> </span><span class="hl-2">&#39;@opentelemetry/instrumentation-fetch&#39;</span><span class="hl-1">;</span><br/><span class="hl-7">import</span><span class="hl-1"> { </span><span class="hl-6">ZoneContextManager</span><span class="hl-1"> } </span><span class="hl-7">from</span><span class="hl-1"> </span><span class="hl-2">&#39;@opentelemetry/context-zone&#39;</span><span class="hl-1">;</span><br/><span class="hl-7">import</span><span class="hl-1"> { </span><span class="hl-6">registerInstrumentations</span><span class="hl-1"> } </span><span class="hl-7">from</span><span class="hl-1"> </span><span class="hl-2">&#39;@opentelemetry/instrumentation&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">provider</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">WebTracerProvider</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">spanProcessors:</span><span class="hl-1"> [</span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">SimpleSpanProcessor</span><span class="hl-1">(</span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">ConsoleSpanExporter</span><span class="hl-1">())]</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-6">provider</span><span class="hl-1">.</span><span class="hl-0">register</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">contextManager:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">ZoneContextManager</span><span class="hl-1">(),</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-0">registerInstrumentations</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">instrumentations:</span><span class="hl-1"> [</span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">FetchInstrumentation</span><span class="hl-1">()],</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-5">// or plugin can be also initialised separately and then set the tracer provider or meter provider</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">fetchInstrumentation</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">FetchInstrumentation</span><span class="hl-1">();</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">provider</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">WebTracerProvider</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">spanProcessors:</span><span class="hl-1"> [</span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">SimpleSpanProcessor</span><span class="hl-1">(</span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">ConsoleSpanExporter</span><span class="hl-1">())]</span><br/><span class="hl-1">});</span><br/><span class="hl-6">provider</span><span class="hl-1">.</span><span class="hl-0">register</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">contextManager:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">ZoneContextManager</span><span class="hl-1">(),</span><br/><span class="hl-1">});</span><br/><span class="hl-6">fetchInstrumentation</span><span class="hl-1">.</span><span class="hl-0">setTracerProvider</span><span class="hl-1">(</span><span class="hl-6">provider</span><span class="hl-1">);</span><br/><br/><span class="hl-5">// and some test</span><br/><br/><span class="hl-0">fetch</span><span class="hl-1">(</span><span class="hl-2">&#39;http://localhost:8090/fetch.js&#39;</span><span class="hl-1">);</span><br/>
</code><button type="button">Copy</button></pre>
<a id="example-screenshots" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Example Screenshots<a href="#example-screenshots" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><img src="../media/trace1.png" alt="Screenshot of the running example">
<img src="../media/trace2.png" alt="Screenshot of the running example">
<img src="../media/trace3.png" alt="Screenshot of the running example"></p>
<p>See <a href="https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/tracer-web">examples/tracer-web/fetch</a> for a short example.</p>
<a id="fetch-instrumentation-options" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Fetch Instrumentation options<a href="#fetch-instrumentation-options" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Fetch instrumentation plugin has few options available to choose from. You can set the following:</p>
<table>
<thead>
<tr>
<th>Options</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L83"><code>applyCustomAttributesOnSpan</code></a></td>
<td><code>FetchCustomAttributeFunction</code></td>
<td>Function for adding custom attributes</td>
</tr>
<tr>
<td><a href="https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L85"><code>requestHook</code></a></td>
<td><code>FetchRequestHookFunction</code></td>
<td>Function for adding custom attributes or headers before the request is handled</td>
</tr>
<tr>
<td><a href="https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L87"><code>ignoreNetworkEvents</code></a></td>
<td><code>boolean</code></td>
<td>Disable network events being added as span events (network events are added by default)</td>
</tr>
<tr>
<td><a href="https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L89"><code>measureRequestSize</code></a></td>
<td><code>boolean</code></td>
<td>Measure outgoing request length (outgoing request length is not measured by default)</td>
</tr>
<tr>
<td><code>semconvStabilityOptIn</code></td>
<td>string</td>
<td>A comma-separated string of tokens as described for <code>OTEL_SEMCONV_STABILITY_OPT_IN</code> in the <a href="https://github.com/open-telemetry/semantic-conventions/blob/main/docs/non-normative/http-migration.md">HTTP semantic convention stability migration</a> guide. See the &quot;Semantic Conventions&quot; section below.</td>
</tr>
</tbody>
</table>
<a id="semantic-conventions" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Semantic Conventions<a href="#semantic-conventions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Up to and including v0.200.0, <code>instrumentation-fetch</code> generates telemetry using <a href="https://github.com/open-telemetry/opentelemetry-specification/blob/v1.7.0/semantic_conventions/README.md">Semantic Conventions v1.7.0</a>.</p>
<p>HTTP semantic conventions (semconv) were stabilized in semconv v1.23.0, and a <a href="https://github.com/open-telemetry/semantic-conventions/blob/main/docs/non-normative/http-migration.md#http-semantic-convention-stability-migration">migration process</a> was defined. <code>instrumentation-fetch</code> versions 0.201.0 and later include support for migrating to stable HTTP semantic conventions, as described below. The intent is to provide an approximate 6 month time window for users of this instrumentation to migrate to the new HTTP semconv, after which a new minor version will change to use the <em>new</em> semconv by default and drop support for the old semconv. See the <a href="https://github.com/open-telemetry/opentelemetry-js/issues/5646">HTTP semconv migration plan for OpenTelemetry JS instrumentations</a>.</p>
<p>To select which semconv version(s) is emitted from this instrumentation, use the <code>semconvStabilityOptIn</code> configuration option. This option works <a href="https://github.com/open-telemetry/semantic-conventions/blob/main/docs/non-normative/http-migration.md">as described for <code>OTEL_SEMCONV_STABILITY_OPT_IN</code></a>:</p>
<ul>
<li><code>http</code>: emit the new (stable) v1.23.0 semantics</li>
<li><code>http/dup</code>: emit <strong>both</strong> the old v1.7.0 and the new (stable) v1.23.0 semantics</li>
<li>By default, if <code>semconvStabilityOptIn</code> includes neither of the above tokens, the old v1.7.0 semconv is used.</li>
</ul>
<p><strong>Span name:</strong> With the old v1.7.0 semconv the span name is <code>HTTP {method}</code> (for example 'HTTP GET'). Using the stable <a href="https://github.com/open-telemetry/semantic-conventions/blob/v1.23.1/docs/http/http-spans.md#name">semconv v1.23 for HTTP span names</a>, the span name is <code>{method}</code> (for example 'GET'). If both semconv versions are being emitted, the <em>old</em> name wins. (This instrumentation does not currently support adding an <code>{http.route}</code> to the span name.)</p>
<p><strong>Span status:</strong> When the stable semconv is selected, the <a href="https://github.com/open-telemetry/semantic-conventions/blob/main/docs/http/http-spans.md#status">span status</a> is set to ERROR when the response status code is <code>&gt;=400</code>. When just the old semconv is select, the span status is not set.</p>
<p><strong>Span attributes:</strong></p>
<table>
<thead>
<tr>
<th>v1.7.0 semconv</th>
<th>v1.23.0 semconv</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>http.method</code></td>
<td><code>http.request.method</code></td>
<td>HTTP request method. With v1.23.0 semconv <a href="https://github.com/open-telemetry/semantic-conventions/blob/v1.23.1/docs/http/http-spans.md#common-attributes"><code>http.request.method_original</code> may also be included</a>.</td>
</tr>
<tr>
<td><code>http.url</code></td>
<td><code>url.full</code></td>
<td>Full HTTP request URL</td>
</tr>
<tr>
<td><code>http.host</code></td>
<td><code>server.address</code> and <code>server.port</code></td>
<td>The hostname and port of the request URL</td>
</tr>
<tr>
<td><code>http.status_code</code></td>
<td><code>http.response.status_code</code></td>
<td>HTTP response status code</td>
</tr>
<tr>
<td><code>http.request_content_length_uncompressed</code></td>
<td><code>http.request.body.size</code></td>
<td>This is only added if <code>measureRequestSize</code> is <code>true</code>.</td>
</tr>
<tr>
<td><code>http.response_content_length_uncompressed</code></td>
<td>(not included)</td>
<td>Stable HTTP semconv would use <code>http.response.body.size</code>, but this is an <a href="https://github.com/open-telemetry/semantic-conventions/blob/v1.23.1/docs/http/http-spans.md#http-client"><code>Opt-In</code> attribute</a>, so would require adding a configuration option to this instrumentation to enable.</td>
</tr>
<tr>
<td><code>http.response_content_length</code></td>
<td>(not included)</td>
<td>Stable HTTP semconv would use <code>http.response.header.&lt;key&gt;</code>, but this is an <a href="https://github.com/open-telemetry/semantic-conventions/blob/v1.23.1/docs/http/http-spans.md#http-client"><code>Opt-In</code> attribute</a>, so would require adding a configuration option to this instrumentation to enable.</td>
</tr>
<tr>
<td>(no equivalent)</td>
<td><code>error.type</code></td>
<td>The response status (as a string), if the response status was <code>&gt;=400</code>.</td>
</tr>
<tr>
<td><code>http.user_agent</code></td>
<td>(not included)</td>
<td>Stable HTTP semconv would use <code>user_agent.original</code>, but this is an <a href="https://github.com/open-telemetry/semantic-conventions/blob/v1.23.1/docs/http/http-spans.md#http-client"><code>Opt-In</code> attribute</a>, so would require adding a configuration option to this instrumentation to enable.</td>
</tr>
<tr>
<td><code>http.scheme</code></td>
<td>(not included)</td>
<td>Stable HTTP semconv would use <code>url.scheme</code>, but this is an <a href="https://github.com/open-telemetry/semantic-conventions/blob/v1.23.1/docs/http/http-spans.md#http-client"><code>Opt-In</code> attribute</a>, so would require adding a configuration option to this instrumentation to enable.</td>
</tr>
<tr>
<td><code>http.status_text</code></td>
<td>(not included)</td>
<td>This is no longer a documented semantic conventions attribute.</td>
</tr>
<tr>
<td><code>component</code></td>
<td>(no replacement)</td>
<td><code>component</code> was an ancient Span &quot;tag&quot; that was never formalized.</td>
</tr>
</tbody>
</table>
<a id="useful-links" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Useful links<a href="#useful-links" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
<li>For more information on OpenTelemetry, visit: <a href="https://opentelemetry.io/">https://opentelemetry.io/</a></li>
<li>For more about OpenTelemetry JavaScript: <a href="https://github.com/open-telemetry/opentelemetry-js">https://github.com/open-telemetry/opentelemetry-js</a></li>
<li>For help or feedback on this project, join us in <a href="https://github.com/open-telemetry/opentelemetry-js/discussions">GitHub Discussions</a></li>
</ul>
<a id="license" class="tsd-anchor"></a><h2 class="tsd-anchor-link">License<a href="#license" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Apache 2.0 - See <a href="https://github.com/open-telemetry/opentelemetry-js/blob/main/LICENSE">LICENSE</a> for more information.</p>
</section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Classes"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Classes</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary"><a id="fetchinstrumentation" class="tsd-anchor"></a><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="../assets/icons.svg#icon-128"></use></svg><a href="../classes/_opentelemetry_instrumentation-fetch.FetchInstrumentation.html">FetchInstrumentation</a><a href="#fetchinstrumentation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd></dl></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Interfaces"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Interfaces</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary"><a id="fetchcustomattributefunction" class="tsd-anchor"></a><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="../assets/icons.svg#icon-256"></use></svg><a href="../interfaces/_opentelemetry_instrumentation-fetch.FetchCustomAttributeFunction.html">FetchCustomAttributeFunction</a><a href="#fetchcustomattributefunction" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary"><a id="fetchinstrumentationconfig" class="tsd-anchor"></a><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="../assets/icons.svg#icon-256"></use></svg><a href="../interfaces/_opentelemetry_instrumentation-fetch.FetchInstrumentationConfig.html">FetchInstrumentationConfig</a><a href="#fetchinstrumentationconfig" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary"><a id="fetchrequesthookfunction" class="tsd-anchor"></a><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="../assets/icons.svg#icon-256"></use></svg><a href="../interfaces/_opentelemetry_instrumentation-fetch.FetchRequestHookFunction.html">FetchRequestHookFunction</a><a href="#fetchrequesthookfunction" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd></dl></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#opentelemetry-fetch-instrumentation-for-web"><span>Open<wbr/>Telemetry <wbr/>Fetch <wbr/>Instrumentation for web</span></a><ul><li><a href="#installation"><span>Installation</span></a></li><li><a href="#usage"><span>Usage</span></a></li><li><a href="#example-screenshots"><span>Example <wbr/>Screenshots</span></a></li><li><ul><li><a href="#fetch-instrumentation-options"><span>Fetch <wbr/>Instrumentation options</span></a></li></ul></li><li><a href="#semantic-conventions"><span>Semantic <wbr/>Conventions</span></a></li><li><a href="#useful-links"><span>Useful links</span></a></li><li><a href="#license"><span>License</span></a></li></ul><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Classes"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Classes</summary><div><a href="#fetchinstrumentation" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="../assets/icons.svg#icon-128"></use></svg><span>Fetch<wbr/>Instrumentation</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Interfaces"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Interfaces</summary><div><a href="#fetchcustomattributefunction" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="../assets/icons.svg#icon-256"></use></svg><span>Fetch<wbr/>Custom<wbr/>Attribute<wbr/>Function</span></a><a href="#fetchinstrumentationconfig" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="../assets/icons.svg#icon-256"></use></svg><span>Fetch<wbr/>Instrumentation<wbr/>Config</span></a><a href="#fetchrequesthookfunction" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="../assets/icons.svg#icon-256"></use></svg><span>Fetch<wbr/>Request<wbr/>Hook<wbr/>Function</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../index.html">OpenTelemetry SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>