From cf70bcb631b8d1516f952ecf8841f07f7e9ae702 Mon Sep 17 00:00:00 2001 From: t2t2 Date: Thu, 26 Aug 2021 10:41:48 +0300 Subject: [PATCH 1/2] fix(user-interaction): event listeners have wrong this when listening for bubbled events --- .../src/instrumentation.ts | 4 ++-- .../test/userInteraction.nozone.test.ts | 17 ++++++++++++++++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/plugins/web/opentelemetry-instrumentation-user-interaction/src/instrumentation.ts b/plugins/web/opentelemetry-instrumentation-user-interaction/src/instrumentation.ts index 6e0cbb9283..06972fee38 100644 --- a/plugins/web/opentelemetry-instrumentation-user-interaction/src/instrumentation.ts +++ b/plugins/web/opentelemetry-instrumentation-user-interaction/src/instrumentation.ts @@ -267,7 +267,7 @@ export class UserInteractionInstrumentation extends InstrumentationBase useCapture: any ) { const once = useCapture && useCapture.once; - const patchedListener = (...args: any[]) => { + const patchedListener = function (this: HTMLElement, ...args: any[]) { let parentSpan: api.Span | undefined; const event: Event | undefined = args[0]; const target = event?.target; @@ -285,7 +285,7 @@ export class UserInteractionInstrumentation extends InstrumentationBase return api.context.with( api.trace.setSpan(api.context.active(), span), () => { - const result = plugin._invokeListener(listener, target, args); + const result = plugin._invokeListener(listener, this, args); // no zone so end span immediately span.end(); return result; diff --git a/plugins/web/opentelemetry-instrumentation-user-interaction/test/userInteraction.nozone.test.ts b/plugins/web/opentelemetry-instrumentation-user-interaction/test/userInteraction.nozone.test.ts index 0a48d71e71..e88280fb8b 100644 --- a/plugins/web/opentelemetry-instrumentation-user-interaction/test/userInteraction.nozone.test.ts +++ b/plugins/web/opentelemetry-instrumentation-user-interaction/test/userInteraction.nozone.test.ts @@ -486,7 +486,11 @@ describe('UserInteractionInstrumentation', () => { btn2.setAttribute('id', 'btn2'); root.appendChild(btn2); - root.addEventListener('click', event => { + const listenerThis: EventTarget[] = []; + root.addEventListener('click', function (event) { + // Assert here with failure would also affect other tests due to setTimeout bellow + listenerThis.push(this); + switch (event.target) { case btn1: getData(FILE_URL, () => { @@ -506,6 +510,17 @@ describe('UserInteractionInstrumentation', () => { sandbox.clock.tick(1000); originalSetTimeout(() => { + assert.strictEqual( + listenerThis[0], + root, + 'this inside event listener matches listened target (0)' + ); + assert.strictEqual( + listenerThis[1], + root, + 'this inside event listener matches listened target (1)' + ); + assert.equal(exportSpy.args.length, 4, 'should export 4 spans'); const span1: tracing.ReadableSpan = exportSpy.args[0][0][0]; From 3077123cd2b18c341cbbb07ff291d0452794701e Mon Sep 17 00:00:00 2001 From: t2t2 Date: Fri, 27 Aug 2021 18:06:06 +0300 Subject: [PATCH 2/2] Also fix this when span isn't generated --- .../src/instrumentation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/web/opentelemetry-instrumentation-user-interaction/src/instrumentation.ts b/plugins/web/opentelemetry-instrumentation-user-interaction/src/instrumentation.ts index 97465d927d..da499ec1a9 100644 --- a/plugins/web/opentelemetry-instrumentation-user-interaction/src/instrumentation.ts +++ b/plugins/web/opentelemetry-instrumentation-user-interaction/src/instrumentation.ts @@ -292,7 +292,7 @@ export class UserInteractionInstrumentation extends InstrumentationBase } ); } else { - return plugin._invokeListener(listener, target, args); + return plugin._invokeListener(listener, this, args); } }; if (plugin.addPatchedListener(this, type, listener, patchedListener)) {