feat(instrumentation-document-load): add custom root span to document page load instrumentation

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

@@ -41,6 +41,15 @@ import {
   getPerformanceNavigationEntries,
 } from './utils';
 
+/**
+ * DocumentLoadInstrumentationConfig Config
+ */
+export interface DocumentLoadInstrumentationConfig
+  extends InstrumentationConfig {
+  // Custom root span
+  rootSpan?: Span;
+}
+
 /**
  * This class represents a document load plugin
  */
@@ -53,12 +62,16 @@ export class DocumentLoadInstrumentation extends InstrumentationBase<unknown> {
    *
    * @param config
    */
-  constructor(config: InstrumentationConfig = {}) {
+  constructor(config: DocumentLoadInstrumentationConfig = {}) {
     super('@opentelemetry/instrumentation-document-load', VERSION, config);
   }
 
   init() {}
 
+  private _getConfig(): DocumentLoadInstrumentationConfig {
+    return this._config;
+  }
+
   /**
    * callback to be executed when page is loaded
    */
@@ -89,20 +102,37 @@ export class DocumentLoadInstrumentation extends InstrumentationBase<unknown> {
    * Collects information about performance and creates appropriate spans
    */
   private _collectPerformance() {
-    const metaElement = Array.from(document.getElementsByTagName('meta')).find(
-      e => e.getAttribute('name') === TRACE_PARENT_HEADER
-    );
     const entries = getPerformanceNavigationEntries();
+    let rootSpan = this._getConfig().rootSpan;
+
+    if (rootSpan) {
+      this._instrumentRootSpan(rootSpan, entries);
+    } else {
+      const metaElement = Array.from(
+        document.getElementsByTagName('meta')
+      ).find(e => e.getAttribute('name') === TRACE_PARENT_HEADER);
       const traceparent = (metaElement && metaElement.content) || '';
       context.with(propagation.extract(ROOT_CONTEXT, { traceparent }), () => {
-      const rootSpan = this._startSpan(
+        rootSpan = this._startSpan(
           AttributeNames.DOCUMENT_LOAD,
           PTN.FETCH_START,
           entries
         );
+      });
+
       if (!rootSpan) {
         return;
       }
+
+      this._instrumentRootSpan(rootSpan, entries);
+      this._endSpan(rootSpan, PTN.LOAD_EVENT_END, entries);
+    }
+  }
+
+  /**
+   * Adds child spans and tags to the root span
+   */
+  private _instrumentRootSpan(rootSpan: Span, entries: PerformanceEntries) {
     context.with(trace.setSpan(context.active(), rootSpan), () => {
       const fetchSpan = this._startSpan(
         AttributeNames.DOCUMENT_FETCH,
@@ -130,20 +160,13 @@ export class DocumentLoadInstrumentation extends InstrumentationBase<unknown> {
     addSpanNetworkEvent(rootSpan, PTN.UNLOAD_EVENT_START, entries);
     addSpanNetworkEvent(rootSpan, PTN.UNLOAD_EVENT_END, entries);
     addSpanNetworkEvent(rootSpan, PTN.DOM_INTERACTIVE, entries);
-      addSpanNetworkEvent(
-        rootSpan,
-        PTN.DOM_CONTENT_LOADED_EVENT_START,
-        entries
-      );
+    addSpanNetworkEvent(rootSpan, PTN.DOM_CONTENT_LOADED_EVENT_START, entries);
     addSpanNetworkEvent(rootSpan, PTN.DOM_CONTENT_LOADED_EVENT_END, entries);
     addSpanNetworkEvent(rootSpan, PTN.DOM_COMPLETE, entries);
     addSpanNetworkEvent(rootSpan, PTN.LOAD_EVENT_START, entries);
     addSpanNetworkEvent(rootSpan, PTN.LOAD_EVENT_END, entries);
 
     addSpanPerformancePaintEvents(rootSpan);
-
-      this._endSpan(rootSpan, PTN.LOAD_EVENT_END, entries);
-    });
   }
 
   /**

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

@@ -44,6 +44,7 @@ import { EventNames } from '../src/enums/EventNames';
 const exporter = new InMemorySpanExporter();
 const provider = new BasicTracerProvider();
 const spanProcessor = new SimpleSpanProcessor(exporter);
+const tracer = provider.getTracer('default');
 
 provider.addSpanProcessor(spanProcessor);
 provider.register();
@@ -653,6 +654,60 @@ describe('DocumentLoad Instrumentation', () => {
     });
     shouldExportCorrectSpan();
   });
+
+  describe('when custom root span is passed', () => {
+    let spyEntries: any;
+    beforeEach(() => {
+      spyEntries = sandbox.stub(window.performance, 'getEntriesByType');
+      spyEntries.withArgs('navigation').returns([entries]);
+      spyEntries.withArgs('resource').returns(resources);
+      spyEntries.withArgs('paint').returns([]);
+    });
+    afterEach(() => {
+      spyEntries.restore();
+    });
+
+    it('should add child spans to the custom root span', done => {
+      const customRootSpan = tracer.startSpan('customRootSpan');
+      plugin = new DocumentLoadInstrumentation({
+        enabled: false,
+        rootSpan: customRootSpan,
+      });
+      plugin.setTracerProvider(provider);
+      plugin.enable();
+      setTimeout(() => {
+        const spanResource1 = exporter.getFinishedSpans()[1] as ReadableSpan;
+        const spanResource2 = exporter.getFinishedSpans()[2] as ReadableSpan;
+
+        const srEvents1 = spanResource1.events;
+        const srEvents2 = spanResource2.events;
+
+        assert.strictEqual(
+          spanResource1.parentSpanId,
+          customRootSpan.spanContext().spanId
+        );
+        assert.strictEqual(
+          spanResource2.parentSpanId,
+          customRootSpan.spanContext().spanId
+        );
+
+        assert.strictEqual(
+          spanResource1.attributes[SemanticAttributes.HTTP_URL],
+          'http://localhost:8090/bundle.js'
+        );
+        assert.strictEqual(
+          spanResource2.attributes[SemanticAttributes.HTTP_URL],
+          'http://localhost:8090/sockjs-node/info?t=1572620894466'
+        );
+
+        ensureNetworkEventsExists(srEvents1);
+        ensureNetworkEventsExists(srEvents2);
+
+        assert.strictEqual(exporter.getFinishedSpans().length, 3);
+        done();
+      });
+    });
+  });
 });
 
 /**