docs(instrumentation-fetch): document applyCustomAttributesOnSpan

Author: niekert

packages/opentelemetry-instrumentation-fetch/README.md

@@ -59,6 +59,14 @@ fetch('http://localhost:8090/fetch.js');
 
 See [examples/tracer-web/fetch](https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/tracer-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/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L47) | `HttpCustomAttributeFunction` | Function for adding custom attributes |
+
 ## Useful links
 
 - For more information on OpenTelemetry, visit: <https://opentelemetry.io/>

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

@@ -198,16 +198,14 @@ export class FetchInstrumentation extends InstrumentationBase<
     }
     const method = (options.method || 'GET').toUpperCase();
     const spanName = `HTTP ${method}`;
-    const span = this.tracer.startSpan(spanName, {
+    return this.tracer.startSpan(spanName, {
       kind: api.SpanKind.CLIENT,
       attributes: {
         [AttributeNames.COMPONENT]: this.moduleName,
         [HttpAttribute.HTTP_METHOD]: method,
         [HttpAttribute.HTTP_URL]: url,
       },
     });
-
-    return span;
   }
 
   /**
@@ -320,7 +318,6 @@ export class FetchInstrumentation extends InstrumentationBase<
         ) {
           try {
             plugin._applyAttributesAfterFetch(span, options, response);
-
             if (response.status >= 200 && response.status < 400) {
               plugin._endSpan(span, spanData, response);
             } else {

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

@@ -59,7 +59,6 @@ const getData = (url: string, method?: string) =>
 
 const customAttributeFunction = (span: api.Span): void => {
   span.setAttribute('span kind', api.SpanKind.CLIENT);
-  span.setAttribute('custom', 'custom-attribute-value');
 };
 
 const defaultResource = {
@@ -337,48 +336,51 @@ describe('fetch', () => {
       const keys = Object.keys(attributes);
 
       assert.ok(
-        attributes[keys[0]] !== '',
+        attributes[AttributeNames.COMPONENT] !== '',
         `attributes ${AttributeNames.COMPONENT} is not defined`
       );
       assert.strictEqual(
-        attributes[keys[1]],
+        attributes[HttpAttribute.HTTP_METHOD],
         'GET',
         `attributes ${HttpAttribute.HTTP_METHOD} is wrong`
       );
       assert.strictEqual(
-        attributes[keys[2]],
+        attributes[HttpAttribute.HTTP_URL],
         url,
         `attributes ${HttpAttribute.HTTP_URL} is wrong`
       );
       assert.strictEqual(
-        attributes[keys[3]],
+        attributes[HttpAttribute.HTTP_STATUS_CODE],
         200,
         `attributes ${HttpAttribute.HTTP_STATUS_CODE} is wrong`
       );
       assert.ok(
-        attributes[keys[4]] === 'OK' || attributes[keys[4]] === '',
+        attributes[HttpAttribute.HTTP_STATUS_TEXT] === 'OK' ||
+          attributes[HttpAttribute.HTTP_STATUS_TEXT] === '',
         `attributes ${HttpAttribute.HTTP_STATUS_TEXT} is wrong`
       );
       assert.ok(
-        (attributes[keys[5]] as string).indexOf('localhost') === 0,
+        (attributes[HttpAttribute.HTTP_HOST] as string).indexOf('localhost') ===
+          0,
         `attributes ${HttpAttribute.HTTP_HOST} is wrong`
       );
       assert.ok(
-        attributes[keys[6]] === 'http' || attributes[keys[6]] === 'https',
+        attributes[HttpAttribute.HTTP_SCHEME] === 'http' ||
+          attributes[HttpAttribute.HTTP_SCHEME] === 'https',
         `attributes ${HttpAttribute.HTTP_SCHEME} is wrong`
       );
       assert.ok(
-        attributes[keys[7]] !== '',
+        attributes[HttpAttribute.HTTP_USER_AGENT] !== '',
         `attributes ${HttpAttribute.HTTP_USER_AGENT} is not defined`
       );
       assert.ok(
-        (attributes[keys[8]] as number) > 0,
+        (attributes[HttpAttribute.HTTP_RESPONSE_CONTENT_LENGTH] as number) > 0,
         `attributes ${HttpAttribute.HTTP_RESPONSE_CONTENT_LENGTH} is <= 0`
       );
 
       assert.strictEqual(attributes['span kind'], api.SpanKind.CLIENT);
 
-      assert.strictEqual(keys.length, 9, 'number of attributes is wrong');
+      assert.strictEqual(keys.length, 10, 'number of attributes is wrong');
     });
 
     it('span should have correct events', () => {
@@ -610,11 +612,15 @@ describe('fetch', () => {
   describe('when request is NOT successful (wrong url)', () => {
     beforeEach(done => {
       const propagateTraceHeaderCorsUrls = badUrl;
-      prepareData(done, badUrl, { propagateTraceHeaderCorsUrls });
+      prepareData(done, badUrl, {
+        propagateTraceHeaderCorsUrls,
+        applyCustomAttributesOnSpan: customAttributeFunction,
+      });
     });
     afterEach(() => {
       clearData();
     });
+
     it('should create a span with correct root span', () => {
       const span: tracing.ReadableSpan = exportSpy.args[1][0][0];
       assert.strictEqual(
@@ -623,6 +629,17 @@ describe('fetch', () => {
         'parent span is not root span'
       );
     });
+
+    it('should apply custom attributes', () => {
+      const span: tracing.ReadableSpan = exportSpy.args[1][0][0];
+      const attributes = span.attributes;
+
+      assert.strictEqual(
+        attributes['span kind'],
+        api.SpanKind.CLIENT,
+        'Custom attribute was not applied'
+      );
+    });
   });
 
   describe('when request is NOT successful (405)', () => {