refactor(instr-fetch): move fetch to use SEMATRR (#4632)

* refactor(instr-fetch): move fetch to use SEMATRR

* Update experimental/CHANGELOG.md

Co-authored-by: Trent Mick <[email protected]>

* Apply suggestions from code review

update readme table to use attribute strings

* move changelog entry to unreleased

---------

Co-authored-by: Trent Mick <[email protected]>
Co-authored-by: Jamie Danielson <[email protected]>

Author: 3 people

experimental/CHANGELOG.md

@@ -9,6 +9,8 @@ All notable changes to experimental packages in this project will be documented
 
 ### :rocket: (Enhancement)
 
+* refactor(instrumentation-fetch): move fetch to use SEMATRR [#4632](https://github.com/open-telemetry/opentelemetry-js/pull/4632)
+
 ### :bug: (Bug Fix)
 
 ### :books: (Refine Doc)

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

@@ -72,6 +72,21 @@ Fetch instrumentation plugin has few options available to choose from. You can s
 | [`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) |
 
+## Semantic Conventions
+
+This package uses `@opentelemetry/semantic-conventions` version `1.22+`, which implements Semantic Convention [Version 1.7.0](https://github.com/open-telemetry/opentelemetry-specification/blob/v1.7.0/semantic_conventions/README.md)
+
+Attributes collected:
+
+| Attribute                                   | Short Description                                                              |
+| ------------------------------------------- | ------------------------------------------------------------------------------ |
+| `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                                                            |
+
 ## Useful links
 
 - For more information on OpenTelemetry, visit: <https://opentelemetry.io/>

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

@@ -24,7 +24,14 @@ import {
 import * as core from '@opentelemetry/core';
 import * as web from '@opentelemetry/sdk-trace-web';
 import { AttributeNames } from './enums/AttributeNames';
-import { SemanticAttributes } from '@opentelemetry/semantic-conventions';
+import {
+  SEMATTRS_HTTP_STATUS_CODE,
+  SEMATTRS_HTTP_HOST,
+  SEMATTRS_HTTP_USER_AGENT,
+  SEMATTRS_HTTP_SCHEME,
+  SEMATTRS_HTTP_URL,
+  SEMATTRS_HTTP_METHOD,
+} from '@opentelemetry/semantic-conventions';
 import { FetchError, FetchResponse, SpanData } from './types';
 import { VERSION } from './version';
 import { _globalThis } from '@opentelemetry/core';
@@ -119,20 +126,17 @@ export class FetchInstrumentation extends InstrumentationBase<FetchInstrumentati
     response: FetchResponse
   ): void {
     const parsedUrl = web.parseUrl(response.url);
-    span.setAttribute(SemanticAttributes.HTTP_STATUS_CODE, response.status);
+    span.setAttribute(SEMATTRS_HTTP_STATUS_CODE, response.status);
     if (response.statusText != null) {
       span.setAttribute(AttributeNames.HTTP_STATUS_TEXT, response.statusText);
     }
-    span.setAttribute(SemanticAttributes.HTTP_HOST, parsedUrl.host);
+    span.setAttribute(SEMATTRS_HTTP_HOST, parsedUrl.host);
     span.setAttribute(
-      SemanticAttributes.HTTP_SCHEME,
+      SEMATTRS_HTTP_SCHEME,
       parsedUrl.protocol.replace(':', '')
     );
     if (typeof navigator !== 'undefined') {
-      span.setAttribute(
-        SemanticAttributes.HTTP_USER_AGENT,
-        navigator.userAgent
-      );
+      span.setAttribute(SEMATTRS_HTTP_USER_AGENT, navigator.userAgent);
     }
   }
 
@@ -207,8 +211,8 @@ export class FetchInstrumentation extends InstrumentationBase<FetchInstrumentati
       kind: api.SpanKind.CLIENT,
       attributes: {
         [AttributeNames.COMPONENT]: this.moduleName,
-        [SemanticAttributes.HTTP_METHOD]: method,
-        [SemanticAttributes.HTTP_URL]: url,
+        [SEMATTRS_HTTP_METHOD]: method,
+        [SEMATTRS_HTTP_URL]: url,
       },
     });
   }

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

@@ -41,7 +41,15 @@ import {
   FetchCustomAttributeFunction,
 } from '../src';
 import { AttributeNames } from '../src/enums/AttributeNames';
-import { SemanticAttributes } from '@opentelemetry/semantic-conventions';
+import {
+  SEMATTRS_HTTP_HOST,
+  SEMATTRS_HTTP_METHOD,
+  SEMATTRS_HTTP_RESPONSE_CONTENT_LENGTH,
+  SEMATTRS_HTTP_SCHEME,
+  SEMATTRS_HTTP_STATUS_CODE,
+  SEMATTRS_HTTP_URL,
+  SEMATTRS_HTTP_USER_AGENT,
+} from '@opentelemetry/semantic-conventions';
 
 class DummySpanExporter implements tracing.SpanExporter {
   export(spans: any) {}
@@ -374,37 +382,37 @@ describe('fetch', () => {
       assert.strictEqual(
         attributes[keys[1]],
         'GET',
-        `attributes ${SemanticAttributes.HTTP_METHOD} is wrong`
+        `attributes ${SEMATTRS_HTTP_METHOD} is wrong`
       );
       assert.strictEqual(
         attributes[keys[2]],
         url,
-        `attributes ${SemanticAttributes.HTTP_URL} is wrong`
+        `attributes ${SEMATTRS_HTTP_URL} is wrong`
       );
       assert.strictEqual(
         attributes[keys[3]],
         200,
-        `attributes ${SemanticAttributes.HTTP_STATUS_CODE} is wrong`
+        `attributes ${SEMATTRS_HTTP_STATUS_CODE} is wrong`
       );
       assert.ok(
         attributes[keys[4]] === 'OK' || attributes[keys[4]] === '',
         `attributes ${AttributeNames.HTTP_STATUS_TEXT} is wrong`
       );
       assert.ok(
         (attributes[keys[5]] as string).indexOf('localhost') === 0,
-        `attributes ${SemanticAttributes.HTTP_HOST} is wrong`
+        `attributes ${SEMATTRS_HTTP_HOST} is wrong`
       );
       assert.ok(
         attributes[keys[6]] === 'http' || attributes[keys[6]] === 'https',
-        `attributes ${SemanticAttributes.HTTP_SCHEME} is wrong`
+        `attributes ${SEMATTRS_HTTP_SCHEME} is wrong`
       );
       assert.ok(
         attributes[keys[7]] !== '',
-        `attributes ${SemanticAttributes.HTTP_USER_AGENT} is not defined`
+        `attributes ${SEMATTRS_HTTP_USER_AGENT} is not defined`
       );
       assert.ok(
         (attributes[keys[8]] as number) > 0,
-        `attributes ${SemanticAttributes.HTTP_RESPONSE_CONTENT_LENGTH} is <= 0`
+        `attributes ${SEMATTRS_HTTP_RESPONSE_CONTENT_LENGTH} is <= 0`
       );
 
       assert.strictEqual(keys.length, 9, 'number of attributes is wrong');
@@ -865,9 +873,9 @@ describe('fetch', () => {
       const attributes = span.attributes;
 
       assert.strictEqual(
-        attributes[SemanticAttributes.HTTP_URL],
+        attributes[SEMATTRS_HTTP_URL],
         location.origin + '/get',
-        `attributes ${SemanticAttributes.HTTP_URL} is wrong`
+        `attributes ${SEMATTRS_HTTP_URL} is wrong`
       );
     });
   });
@@ -934,7 +942,7 @@ describe('fetch', () => {
       assert.strictEqual(
         attributes[keys[3]],
         200,
-        `Missing basic attribute ${SemanticAttributes.HTTP_STATUS_CODE}`
+        `Missing basic attribute ${SEMATTRS_HTTP_STATUS_CODE}`
       );
     });
   });