Track request body size in XHR and Fetch instrumentations

experimental/CHANGELOG.md

@@ -25,6 +25,7 @@ All notable changes to experimental packages in this project will be documented
 * feat(otlp-transformer): Do not limit @opentelemetry/api upper range peerDependency [#4816](https://github.com/open-telemetry/opentelemetry-js/pull/4816) @mydea
 * feat(instrumentation-http): Allow to opt-out of instrumenting incoming/outgoing requests [#4643](https://github.com/open-telemetry/opentelemetry-js/pull/4643) @mydea
 * feat(sampler-jaeger-remote): added support of jaeger-remote-sampler according to this [spec](https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/trace/sdk.md#jaegerremotesampler) [#4534](https://github.com/open-telemetry/opentelemetry-js/pull/4589) @legalimpurity
+* feat(instrumentation): Track request body size in XHR and Fetch instrumentations [#4706](https://github.com/open-telemetry/opentelemetry-js/pull/4706) @mustafahaddara
 
 ### :bug: (Bug Fix)
 

experimental/packages/opentelemetry-instrumentation-fetch/README.md

@@ -69,8 +69,9 @@ Fetch instrumentation plugin has few options available to choose from. You can s
 
 | Options                                                                                                                                                                  | Type                          | Description                                                                             |
 |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------|-----------------------------------------------------------------------------------------|
-| [`applyCustomAttributesOnSpan`](https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L64) | `HttpCustomAttributeFunction` | Function for adding custom attributes                                                   |
-| [`ignoreNetworkEvents`](https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L67)                      | `boolean`                     | Disable network events being added as span events (network events are added by default) |
+| [`applyCustomAttributesOnSpan`](https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L75) | `HttpCustomAttributeFunction` | Function for adding custom attributes                                                   |
+| [`ignoreNetworkEvents`](https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L77)         | `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#L79)          | `boolean`                     | Measure outgoing request length (outgoing request length is not measured by default)    |
 
 ## Semantic Conventions
 
@@ -80,12 +81,13 @@ Attributes collected:
 
 | Attribute                                   | Short Description                                                              |
 | ------------------------------------------- | ------------------------------------------------------------------------------ |
-| `http.status_code`                          | HTTP response status code                                                       |
+| `http.status_code`                          | HTTP response status code                                                      |
 | `http.host`                                 | The value of the HTTP host header                                              |
 | `http.user_agent`                           | Value of the HTTP User-Agent header sent by the client                         |
 | `http.scheme`                               | The URI scheme identifying the used protocol                                   |
 | `http.url`                                  | Full HTTP request URL                                                          |
 | `http.method`                               | HTTP request method                                                            |
+| `http.request.body.size`                    | Uncompressed size of the request body, if any body exists                      |
 
 ## Useful links
 

experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts

@@ -32,6 +32,7 @@ import {
   SEMATTRS_HTTP_URL,
   SEMATTRS_HTTP_METHOD,
 } from '@opentelemetry/semantic-conventions';
+import { ATTR_HTTP_REQUEST_BODY_SIZE } from '@opentelemetry/semantic-conventions/incubating';
 import { FetchError, FetchResponse, SpanData } from './types';
 import { VERSION } from './version';
 import { _globalThis } from '@opentelemetry/core';
@@ -74,6 +75,8 @@ export interface FetchInstrumentationConfig extends InstrumentationConfig {
   applyCustomAttributesOnSpan?: FetchCustomAttributeFunction;
   // Ignore adding network events as span events
   ignoreNetworkEvents?: boolean;
+  /** Measure outgoing request size */
+  measureRequestSize?: boolean;
 }
 
 /**
@@ -320,6 +323,19 @@ export class FetchInstrumentation extends InstrumentationBase<FetchInstrumentati
         }
         const spanData = plugin._prepareSpanData(url);
 
+        if (plugin.getConfig().measureRequestSize) {
+          web
+            .getFetchBodyLength(...args)
+            .then(length => {
+              if (!length) return;
+
+              createdSpan.setAttribute(ATTR_HTTP_REQUEST_BODY_SIZE, length);
+            })
+            .catch(error => {
+              plugin._diag.warn('getFetchBodyLength', error);
+            });
+        }
+
         function endSpanOnError(span: api.Span, error: FetchError) {
           plugin._applyAttributesAfterFetch(span, options, error);
           plugin._endSpan(span, spanData, {