feat(tracing): Add long task collection #5529

k-fish · 2022-08-05T15:46:12Z

Summary

This adds long task collection to represent long running ui behaviour as spans in your frontend transactions. Behind an unexposed option for now.

For context, we've been collecting long tasks in our main sentry UI now, and they can be quite helpful to determine where and when the ui is being blocked (and might hint where to add custom spans if a user chose to do so).

Screenshot

Example of us using it in Sentry already

This adds long task collection to represent long running ui behaviour as spans in your frontend transactions. Behind an unexposed option for now.

k-fish · 2022-08-05T15:46:57Z

packages/tracing/src/browser/browsertracing.ts

@@ -69,7 +69,7 @@ export interface BrowserTracingOptions extends RequestInstrumentationOptions {
   *
   * Default: undefined
   */
-  _metricOptions?: Partial<{ _reportAllChanges: boolean }>;
+  _metricOptions?: Partial<{ _reportAllChanges: boolean, _reportLongTasks: boolean }>;


I didn't really want to make another option bundle here, re-using something called 'metric options' when it makes spans doesn't sound totally right to me though.

Can we just turn it on by default? Do we really need to gate to an option?

k-fish · 2022-08-05T15:47:39Z

packages/tracing/src/browser/metrics/index.ts

+  const transaction = getActiveTransaction() as IdleTransaction | undefined;
+  let po : PerformanceObserver | undefined = undefined;
+  const entryHandler: PerformanceEntryHandler = (entry: PerformanceEntry): void => {
+    if (transaction?.endTimestamp && po) {


Checking for transaction being finished using end, if that still works, otherwise this just makes a span for long tasks, just keeping it simple to start, we can add attribution etc. later if it seems helpful.

Why do we need to do this? Let's just attach it to any running transaction. Also we can't use optional chaining - it's increased final bundle as it's esnext feature.

AbhiPrasad · 2022-08-05T15:48:32Z

On my review list for today

AbhiPrasad

We'll need to add tests before we can merge to validate.

We have browser integration tests - we can test if the span gets added here (and muck around with different scenarios and compare between chrome/safari/firefox): https://github.com/getsentry/sentry-javascript/tree/master/packages/integration-tests

https://github.com/getsentry/sentry-javascript/tree/master/packages/integration-tests/suites/tracing/metrics

AbhiPrasad · 2022-08-05T18:04:36Z

packages/tracing/src/browser/metrics/index.ts

+  const transaction = getActiveTransaction() as IdleTransaction | undefined;
+  let po : PerformanceObserver | undefined = undefined;
+  const entryHandler: PerformanceEntryHandler = (entry: PerformanceEntry): void => {
+    if (transaction?.endTimestamp && po) {


Why do we need to do this? Let's just attach it to any running transaction. Also we can't use optional chaining - it's increased final bundle as it's esnext feature.

AbhiPrasad · 2022-08-05T18:04:58Z

packages/tracing/src/browser/browsertracing.ts

@@ -148,6 +148,7 @@ export class BrowserTracing implements Integration {

    const { _metricOptions } = this.options;
    startTrackingWebVitals(_metricOptions && _metricOptions._reportAllChanges);
+    startTrackingLongTasks(_metricOptions && _metricOptions._reportLongTasks);


IMO we rm -rf the option and just

yeah I'm fine with that

github-actions · 2022-08-05T19:35:00Z

size-limit report 📦

Path	Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified)	19.39 KB (+0.03% 🔺)
@sentry/browser - ES5 CDN Bundle (minified)	59.99 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified)	17.96 KB (0%)
@sentry/browser - ES6 CDN Bundle (minified)	52.88 KB (0%)
@sentry/browser - Webpack (gzipped + minified)	19.73 KB (0%)
@sentry/browser - Webpack (minified)	64.21 KB (0%)
@sentry/react - Webpack (gzipped + minified)	19.75 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified)	44.39 KB (+0.51% 🔺)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified)	25.89 KB (+0.4% 🔺)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified)	24.26 KB (+0.94% 🔺)

…ollection

AbhiPrasad · 2022-08-09T15:01:56Z

packages/nextjs/test/integration/test/client/tracingFetch.js

@@ -19,6 +19,10 @@ module.exports = async ({ page, url, requests }) => {
        description: 'GET http://example.com',
        op: 'http.client',
      },
+      {
+        description: 'Long Task',
+        op: 'ui.long-task',


0Calories · 2022-08-09T16:02:03Z

Seems like a new experimental feature, but we may be able to use TaskAttributionTiming to get some contextual data for LongTasks, which we could attach as additional data on LongTask spans

AbhiPrasad · 2022-08-09T16:19:45Z

The task attributions doesn't have good details IMO (spec: https://w3c.github.io/longtasks/#sec-TaskAttributionTiming), I don't know how much value we'll get by attaching it to the span.

…ollection

0Calories · 2022-08-09T17:26:03Z

Yeah you're right, that's unfortunate. I was hoping that we might be able to get some useful info from containerName, but didn't realize the possible values were so limited

… index 0 in the list

…ching

…removed if we find it to not be used.

AbhiPrasad

Good to merge this in when you are! We'll need to update the docs page to add the new experimental option: https://github.com/getsentry/sentry-docs/blob/master/src/platforms/javascript/common/performance/instrumentation/automatic-instrumentation.mdx

rfc(perf): Add long task collection

a7995eb

This adds long task collection to represent long running ui behaviour as spans in your frontend transactions. Behind an unexposed option for now.

k-fish requested review from 0Calories, AbhiPrasad and a team August 5, 2022 15:46

k-fish commented Aug 5, 2022

View reviewed changes

k-fish requested review from a team and lobsterkatie and removed request for a team August 5, 2022 15:48

AbhiPrasad reviewed Aug 5, 2022

View reviewed changes

AbhiPrasad added the Feature: Performance label Aug 5, 2022

AbhiPrasad added this to the Performance Issues milestone Aug 5, 2022

k-fish added 2 commits August 5, 2022 15:27

Cleanup and add a playwright test

1df4bf1

Check for active transactions as long tasks occur, not ahead

a0dd40d

k-fish added 2 commits August 5, 2022 15:44

Prettier fix

ce4ad87

Fix test

5a73d4d

k-fish changed the title ~~rfc(perf): Add long task collection~~ feat(perf): Add long task collection Aug 5, 2022

k-fish added 2 commits August 5, 2022 17:29

Fix timestamp names in test

5bebba4

Fix names... again

f662902

vladanpaunovic assigned k-fish Aug 8, 2022

k-fish added 2 commits August 8, 2022 11:06

Remove consoles from test suite mock script

6206e04

Merge remote-tracking branch 'origin/master' into ref/add-long-task-c…

7a7ae98

…ollection

AbhiPrasad approved these changes Aug 8, 2022

View reviewed changes

AbhiPrasad changed the title ~~feat(perf): Add long task collection~~ feat(tracing): Add long task collection Aug 8, 2022

Add span for long task in the transaction

53dc48d

AbhiPrasad reviewed Aug 9, 2022

View reviewed changes

Merge remote-tracking branch 'origin/master' into ref/add-long-task-c…

fe9144a

…ollection

k-fish added 4 commits August 10, 2022 09:52

Remove extra span since it's likely just flaky, not a long task

54664a2

Temporarily improve error message to understand reason for test failure

0b2c253

Rearrange transaction count check

e9a9d9e

Fix newer syntax

7eef4a5

AbhiPrasad mentioned this pull request Aug 10, 2022

meta: Update 7.10.0 CHANGELOG #5559

Merged

k-fish added 8 commits August 10, 2022 14:58

See if removing the long task detection causes next tests to pass

923dd66

Also remove import

ec58516

Wrap in try catch incase there is an internal error

abf11dc

Try again without try and extra logging since local is working

be21d5d

Add origin to start time to stop flaking long tasks from appearing at…

8ae755c

… index 0 in the list

Fix array contains needing exact matches for spans in transaction mat…

b821c0f

…ching

Add experiment flag as a way of disabling this feature, which can be …

5aa7b75

…removed if we find it to not be used.

Fix tests

63a171c

k-fish force-pushed the ref/add-long-task-collection branch from f0879db to 63a171c Compare August 12, 2022 14:50

Don't want to wait for eslint fix

d747811

AbhiPrasad approved these changes Aug 12, 2022

View reviewed changes

k-fish mentioned this pull request Aug 12, 2022

docs(sdk): Add long tasks experiment to docs getsentry/sentry-docs#5417

Merged

k-fish merged commit dbd8340 into master Aug 12, 2022

k-fish deleted the ref/add-long-task-collection branch August 12, 2022 17:59

AbhiPrasad mentioned this pull request Aug 17, 2022

chore(deps): Upgrade @sentry/* JS SDKs from 7.8.0 to 7.11.0 getsentry/sentry#37924

Merged

Uh oh!

feat(tracing): Add long task collection #5529

feat(tracing): Add long task collection #5529

Uh oh!

Conversation

k-fish commented Aug 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshot

Example of us using it in Sentry already

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AbhiPrasad commented Aug 5, 2022

Uh oh!

AbhiPrasad left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Aug 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Choose a reason for hiding this comment

Uh oh!

0Calories commented Aug 9, 2022

Uh oh!

AbhiPrasad commented Aug 9, 2022

Uh oh!

0Calories commented Aug 9, 2022

Uh oh!

AbhiPrasad left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

k-fish commented Aug 5, 2022 •

edited

Loading

AbhiPrasad left a comment •

edited

Loading

github-actions bot commented Aug 5, 2022 •

edited

Loading