Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(tracing): create spans for all click events #9002

Closed
wants to merge 11 commits into from

Conversation

DominikB2014
Copy link
Contributor

@DominikB2014 DominikB2014 commented Sep 11, 2023

Some work towards #getsentry/team-sdks/issues/32

This ensures interaction transactions are created with the appropriate OP for click, mousedown, mouseup, and contextmenu events.

  1. Click - Click events work the same as before, an idle transaction is created in the event handler, and the performance entry for the click will be added as a span if available. The op is ui.action.left.click

  2. Mousedown/mouseup - Mousedown will start a regular transaction, a mousedown span is added, the transaction will end when a mouseup occurs and a mouseup span will be added. The op is ui.action.left.mousedown.
    Unfortunately the performance entry needs more work to be added here. The performance entry handler fires after the three event handlers, 'mouseup', 'moundown` and 'click' occurs, which is after the mousedown transaction finishes.

  3. Contextmenu (aka right click) - context menu work the same as clicks, an idle transaction is created, the performance entry is added as a span if available. The op is ui.action.right.contextmenu. Handling mouseup/mousedown for right click is a bit more involved, so i didn't handle it here.

This seems to work well with the demo app i've created, but i'm going to leave this as draft until I test it a bit more. Early feedback is encouraged! If this is good behaviour for transaction creation, then getting better spans and grouping interaction is a good next step!

@github-actions
Copy link
Contributor

github-actions bot commented Sep 11, 2023

size-limit report 📦

Path Size
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped) 75.89 KB (+0.41% 🔺)
@sentry/browser (incl. Tracing) - Webpack (gzipped) 31.78 KB (+1% 🔺)
@sentry/browser - Webpack (gzipped) 22.06 KB (0%)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped) 70.57 KB (+0.42% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped) 28.89 KB (+1.12% 🔺)
@sentry/browser - ES6 CDN Bundle (gzipped) 20.65 KB (+0.01% 🔺)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed) 223.04 KB (+0.38% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed) 87.4 KB (+0.96% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed) 61.42 KB (0%)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped) 31.64 KB (+0.67% 🔺)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped) 75.92 KB (+0.42% 🔺)
@sentry/react - Webpack (gzipped) 22.09 KB (0%)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped) 93.7 KB (+0.24% 🔺)
@sentry/nextjs Client - Webpack (gzipped) 51.28 KB (+0.48% 🔺)

@@ -26,7 +26,7 @@ const BUNDLE_VARIANTS = ['.js', '.min.js', '.debug.min.js'];
export function makeBaseBundleConfig(options) {
const { bundleType, entrypoints, jsVersion, licenseTitle, outputFileBase, packageSpecificConfig } = options;

const isEs5 = jsVersion.toLowerCase() === 'es5';
const isEs5 = jsVersion && jsVersion.toLowerCase() === 'es5';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had some compliation errors without this 🤷
I can delete if we want, but i don't see any harm in keeping it.

This reverts commit fd5c666.
Comment on lines +419 to +424
inflightInteractionTransaction.startChild({
description: htmlTreeAsString(target),
op,
startTimestamp: timestampInSeconds(),
endTimestamp: timestampInSeconds() + 0.001,
});
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally we can get the timestamps from performance entries, but for now i'm just marking this in the event handler.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we also need to set a finish reason here?

@DominikB2014 DominikB2014 marked this pull request as ready for review September 26, 2023 18:59
Copy link
Contributor

@edwardgou-sentry edwardgou-sentry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it lgtm, maybe we can get @AbhiPrasad to take a quick look over the code before me merge?

Comment on lines +419 to +424
inflightInteractionTransaction.startChild({
description: htmlTreeAsString(target),
op,
startTimestamp: timestampInSeconds(),
endTimestamp: timestampInSeconds() + 0.001,
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we also need to set a finish reason here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants