fix: Correctly handle events that utilize handleEvent object (getsentry#2149)

kamilogorek · web-flow · commit bb319b6a643c · 2019-07-05T10:36:08.000+02:00
diff --git a/packages/browser/src/integrations/breadcrumbs.ts b/packages/browser/src/integrations/breadcrumbs.ts
@@ -157,7 +157,12 @@ export class Breadcrumbs implements Integration {
               });
             }
             if (eventName === 'keypress') {
-              fill(fn, 'handleEvent', keypressEventHandler());
+              fill(fn, 'handleEvent', function(innerOriginal: () => void): (caughtEvent: Event) => void {
+                return function(this: any, event: Event): (event: Event) => void {
+                  keypressEventHandler()(event);
+                  return innerOriginal.call(this, event);
+                };
+              });
             }
           } else {
             if (eventName === 'click') {
diff --git a/packages/browser/test/integration/test.js b/packages/browser/test/integration/test.js
@@ -1673,6 +1673,84 @@ for (var idx in frames) {
           );
         });
 
+        it('should record click events that were handled using an object with handleEvent property and call original callback', function(done) {
+          var iframe = this.iframe;
+
+          iframeExecute(
+            iframe,
+            done,
+            function() {
+              var frame = this;
+              frame.handleEventCalled = false;
+
+              var input = document.getElementsByTagName('input')[0];
+              input.addEventListener('click', {
+                handleEvent() {
+                  frame.handleEventCalled = true;
+                },
+              });
+              input.dispatchEvent(new MouseEvent('click'));
+
+              Sentry.captureMessage('test');
+            },
+            function(sentryData) {
+              if (IS_LOADER) {
+                // The async loader doesn't wrap event listeners, but we should receive the event without breadcrumbs
+                assert.lengthOf(sentryData, 1);
+                return done();
+              }
+              var breadcrumbs = iframe.contentWindow.sentryBreadcrumbs;
+
+              assert.equal(breadcrumbs.length, 1);
+              assert.equal(breadcrumbs[0].category, 'ui.click');
+              assert.equal(breadcrumbs[0].message, 'body > form#foo-form > input[name="foo"]');
+
+              assert.equal(iframe.contentWindow.handleEventCalled, true);
+
+              done();
+            }
+          );
+        });
+
+        it('should record keypress events that were handled using an object with handleEvent property and call original callback', function(done) {
+          var iframe = this.iframe;
+
+          iframeExecute(
+            iframe,
+            done,
+            function() {
+              var frame = this;
+              frame.handleEventCalled = false;
+
+              var input = document.getElementsByTagName('input')[0];
+              input.addEventListener('keypress', {
+                handleEvent() {
+                  frame.handleEventCalled = true;
+                },
+              });
+              input.dispatchEvent(new KeyboardEvent('keypress'));
+
+              Sentry.captureMessage('test');
+            },
+            function(sentryData) {
+              if (IS_LOADER) {
+                // The async loader doesn't wrap event listeners, but we should receive the event without breadcrumbs
+                assert.lengthOf(sentryData, 1);
+                return done();
+              }
+              var breadcrumbs = iframe.contentWindow.sentryBreadcrumbs;
+
+              assert.equal(breadcrumbs.length, 1);
+              assert.equal(breadcrumbs[0].category, 'ui.input');
+              assert.equal(breadcrumbs[0].message, 'body > form#foo-form > input[name="foo"]');
+
+              assert.equal(iframe.contentWindow.handleEventCalled, true);
+
+              done();
+            }
+          );
+        });
+
         it(
           _alt('should record history.[pushState|replaceState] changes as navigation breadcrumbs', IS_LOADER),
           function(done) {

Original file line number	Diff line number	Diff line change
`@@ -157,7 +157,12 @@ export class Breadcrumbs implements Integration {`
`157`	`157`	`});`
`158`	`158`	`}`
`159`	`159`	`if (eventName === 'keypress') {`
`160`		`- fill(fn, 'handleEvent', keypressEventHandler());`
	`160`	`+ fill(fn, 'handleEvent', function(innerOriginal: () => void): (caughtEvent: Event) => void {`
	`161`	`+ return function(this: any, event: Event): (event: Event) => void {`
	`162`	`+ keypressEventHandler()(event);`
	`163`	`+ return innerOriginal.call(this, event);`
	`164`	`+ };`
	`165`	`+ });`
`161`	`166`	`}`
`162`	`167`	`} else {`
`163`	`168`	`if (eventName === 'click') {`