chore: fixing running task in a proper zone preserving the active zone

plugins/web/opentelemetry-plugin-user-interaction/package.json

@@ -46,6 +46,7 @@
     "@opentelemetry/context-zone-peer-dep": "0.8.3",
     "@opentelemetry/plugin-xml-http-request": "0.8.3",
     "@opentelemetry/tracing": "0.8.3",
+    "@opentelemetry/context-base": "0.8.3",
     "@types/jquery": "3.3.38",
     "@types/mocha": "7.0.2",
     "@types/node": "12.12.47",

plugins/web/opentelemetry-plugin-user-interaction/src/userInteraction.ts

@@ -313,28 +313,31 @@ export class UserInteractionPlugin extends BasePlugin<unknown> {
       ): Zone {
         const target: HTMLElement | undefined = plugin._getClickedElement(task);
         let span: api.Span | undefined;
+        const activeZone = this;
         if (target) {
           span = plugin._createSpan(target, 'click');
           if (span) {
             plugin._incrementTask(span);
-            try {
-              return plugin._tracer.withSpan(span, () => {
-                const currentZone = Zone.current;
-                task._zone = currentZone;
-                return original.call(currentZone, task, applyThis, applyArgs);
-              });
-            } finally {
-              plugin._decrementTask(span);
-            }
+            return activeZone.run(() => {
+              try {
+                return plugin._tracer.withSpan(span as api.Span, () => {
+                  const currentZone = Zone.current;
+                  task._zone = currentZone;
+                  return original.call(currentZone, task, applyThis, applyArgs);
+                });
+              } finally {
+                plugin._decrementTask(span as api.Span);
+              }
+            });
           }
         } else {
-          span = plugin._getCurrentSpan(this);
+          span = plugin._getCurrentSpan(activeZone);
         }
 
         try {
-          return original.call(this, task, applyThis, applyArgs);
+          return original.call(activeZone, task, applyThis, applyArgs);
         } finally {
-          if (span && plugin._shouldCountTask(task, Zone.current)) {
+          if (span && plugin._shouldCountTask(task, activeZone)) {
             plugin._decrementTask(span);
           }
         }

plugins/web/opentelemetry-plugin-user-interaction/test/userInteraction.test.ts

@@ -17,7 +17,7 @@
 // because of zone original timeout needs to be patched to be able to run
 // code outside zone.js. This needs to be done before all
 const originalSetTimeout = window.setTimeout;
-
+import { Context } from '@opentelemetry/context-base';
 import { context } from '@opentelemetry/api';
 import { isWrapped, LogLevel } from '@opentelemetry/core';
 import { XMLHttpRequestPlugin } from '@opentelemetry/plugin-xml-http-request';
@@ -40,6 +40,21 @@ import {
 const FILE_URL =
   'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/master/package.json';
 
+// this is needed until this is merged and released
+// https://github.com/open-telemetry/opentelemetry-js/pull/1209
+const ZONE_CONTEXT_KEY = 'OT_ZONE_CONTEXT';
+function createZone(zoneName: string, context: unknown): Zone {
+  return Zone.current.fork({
+    name: zoneName,
+    properties: {
+      [ZONE_CONTEXT_KEY]: context,
+    },
+  });
+}
+interface ContextManagerWithPrivate {
+  _createZone: Function;
+}
+
 describe('UserInteractionPlugin', () => {
   describe('when zone.js is available', () => {
     let contextManager: ZoneContextManager;
@@ -51,6 +66,12 @@ describe('UserInteractionPlugin', () => {
     let requests: sinon.SinonFakeXMLHttpRequest[] = [];
     beforeEach(() => {
       contextManager = new ZoneContextManager().enable();
+
+      // this is needed until this is merged and released
+      // https://github.com/open-telemetry/opentelemetry-js/pull/1209
+      const contextManagerWithPrivate = (contextManager as unknown) as ContextManagerWithPrivate;
+      contextManagerWithPrivate._createZone = createZone;
+
       context.setGlobalContextManager(contextManager);
       sandbox = sinon.createSandbox();
       history.pushState({ test: 'testing' }, '', `${location.pathname}`);
@@ -200,6 +221,38 @@ describe('UserInteractionPlugin', () => {
       });
     });
 
+    it('should run task from different zone - angular test', done => {
+      const context = Context.ROOT_CONTEXT;
+      const rootZone = Zone.current;
+      const newZone = createZone('test', context);
+
+      const element = createButton();
+      element.addEventListener('click', () => {
+        assert.ok(
+          Zone.current !== newZone,
+          'Current zone for 2nd listener click is wrong'
+        );
+        assert.ok(
+          Zone.current.parent === rootZone,
+          'Parent Zone for 2nd listener click is wrong'
+        );
+      });
+
+      newZone.run(() => {
+        assert.ok(Zone.current === newZone, 'New zone is wrong');
+        fakeInteraction(() => {
+          assert.ok(
+            Zone.current.parent === newZone,
+            'Parent zone for click is wrong'
+          );
+          const spanClick: tracing.ReadableSpan = exportSpy.args[0][0][0];
+          assertClickSpan(spanClick);
+
+          done();
+        }, element);
+      });
+    });
+
     it('should ignore interaction when element is disabled', done => {
       const btn = createButton(true);
       let called = false;