feat(opentelemetry-instrumentation-document-load): Add access to performance resource timing object for custom attributes

plugins/web/opentelemetry-instrumentation-document-load/README.md

@@ -82,7 +82,7 @@ Because the browser does not send a trace context header for the initial page na
 </body>
 ```
 
-## Optional : Add custom attributes to document load span if needed
+## Optional : Add custom attributes to spans if needed
 
 If it is needed to add custom attributes to the document load span,and/or document fetch span and/or resource fetch spans, respective functions to do so needs to be provided
 as a config to the DocumentLoad Instrumentation as shown below. The attributes will be added to the respective spans
@@ -93,11 +93,16 @@ the rest of the process continues.
 const addCustomAttributesToSpan = (span: Span) => {
   span.setAttribute('<custom.attribute.key>','<custom-attribute-value>');
 }
+const addCustomAttributesToResourceFetchSpan = (span: Span, resource: PerformanceResourceTiming) => {
+  span.setAttribute('<custom.attribute.key>','<custom-attribute-value>');
+  span.setAttribute('resource.tcp.duration_ms', resource.connectEnd - resource.connectStart);
+}
 registerInstrumentations({
   instrumentations: [
     new DocumentLoadInstrumentation({
         applyCustomAttributesOnSpan: {
-            documentLoad: addCustomAttributesToSpan
+            documentLoad: addCustomAttributesToSpan,
+            resourceFetch: addCustomAttributesToResourceFetchSpan
         }
     })
     ]

plugins/web/opentelemetry-instrumentation-document-load/src/instrumentation.ts

@@ -36,6 +36,7 @@ import {
 import {
   DocumentLoadCustomAttributeFunction,
   DocumentLoadInstrumentationConfig,
+  ResourceFetchCustomAttributeFunction,
 } from './types';
 import { AttributeNames } from './enums/AttributeNames';
 import { VERSION } from './version';
@@ -197,8 +198,9 @@ export class DocumentLoadInstrumentation extends InstrumentationBase<unknown> {
     if (span) {
       span.setAttribute(SemanticAttributes.HTTP_URL, resource.name);
       addSpanNetworkEvents(span, resource);
-      this._addCustomAttributesOnSpan(
+      this._addCustomAttributesOnResourceSpan(
         span,
+        resource,
         this._getConfig().applyCustomAttributesOnSpan?.resourceFetch
       );
       this._endSpan(span, PTN.RESPONSE_END, resource);
@@ -271,6 +273,31 @@ export class DocumentLoadInstrumentation extends InstrumentationBase<unknown> {
     }
   }
 
+  /**
+   * adds custom attributes to root span if configured
+   */
+  private _addCustomAttributesOnResourceSpan(
+    span: Span,
+    resource: PerformanceResourceTiming,
+    applyCustomAttributesOnSpan:
+      | ResourceFetchCustomAttributeFunction
+      | undefined
+  ) {
+    if (applyCustomAttributesOnSpan) {
+      safeExecuteInTheMiddle(
+        () => applyCustomAttributesOnSpan(span, resource),
+        error => {
+          if (!error) {
+            return;
+          }
+
+          this._diag.error('addCustomAttributesOnSpan', error);
+        },
+        true
+      );
+    }
+  }
+
   /**
    * implements enable function
    */

plugins/web/opentelemetry-instrumentation-document-load/src/types.ts

@@ -20,6 +20,10 @@ export interface DocumentLoadCustomAttributeFunction {
   (span: Span): void;
 }
 
+export interface ResourceFetchCustomAttributeFunction {
+  (span: Span, resource: PerformanceResourceTiming): void;
+}
+
 /**
  * DocumentLoadInstrumentationPlugin Config
  */
@@ -29,6 +33,6 @@ export interface DocumentLoadInstrumentationConfig
   applyCustomAttributesOnSpan?: {
     documentLoad?: DocumentLoadCustomAttributeFunction;
     documentFetch?: DocumentLoadCustomAttributeFunction;
-    resourceFetch?: DocumentLoadCustomAttributeFunction;
+    resourceFetch?: ResourceFetchCustomAttributeFunction;
   };
 }

plugins/web/opentelemetry-instrumentation-document-load/test/documentLoad.test.ts

@@ -706,8 +706,12 @@ describe('DocumentLoad Instrumentation', () => {
       plugin = new DocumentLoadInstrumentation({
         enabled: false,
         applyCustomAttributesOnSpan: {
-          resourceFetch: span => {
+          resourceFetch: (span, resource) => {
             span.setAttribute('custom-key', 'custom-val');
+            span.setAttribute(
+              'resource.tcp.duration_ms',
+              resource.connectEnd - resource.connectStart
+            );
           },
         },
       });
@@ -723,6 +727,14 @@ describe('DocumentLoad Instrumentation', () => {
           resourceSpan2.attributes['custom-key'],
           'custom-val'
         );
+        assert.strictEqual(
+          resourceSpan1.attributes['resource.tcp.duration_ms'],
+          0
+        );
+        assert.strictEqual(
+          resourceSpan2.attributes['resource.tcp.duration_ms'],
+          0
+        );
         assert.strictEqual(exporter.getFinishedSpans().length, 4);
         done();
       });