getsentry · k-fish · Aug 12, 2022 · Aug 5, 2022 · Aug 5, 2022 · Aug 5, 2022
diff --git a/packages/integration-tests/suites/tracing/metrics/long-tasks/assets/script.js b/packages/integration-tests/suites/tracing/metrics/long-tasks/assets/script.js
@@ -0,0 +1,12 @@
+(() => {
+  const startTime = Date.now();
+
+  function getElasped() {
+    const time = Date.now();
+    return time - startTime;
+  }
+
+  while (getElasped() < 101) {
+    //
+  }
+})();
diff --git a/packages/integration-tests/suites/tracing/metrics/long-tasks/template.html b/packages/integration-tests/suites/tracing/metrics/long-tasks/template.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div>Rendered Before Long Task</div>
+    <script src="https://example.com/path/to/script.js"></script>
+  </body>
+</html>
diff --git a/packages/integration-tests/suites/tracing/metrics/long-tasks/test.ts b/packages/integration-tests/suites/tracing/metrics/long-tasks/test.ts
@@ -0,0 +1,36 @@
+import { expect, Route } from '@playwright/test';
+import { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+
+sentryTest('should capture long task.', async ({ browserName, getLocalTestPath, page }) => {
+  // Long tasks only work on chrome
+  if (browserName !== 'chromium') {
+    sentryTest.skip();
+  }
+
+  await page.route('**/path/to/script.js', (route: Route) => route.fulfill({ path: `${__dirname}/assets/script.js` }));
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui'));
+
+  expect(uiSpans?.length).toBe(1);
+
+  const [firstUISpan] = uiSpans || [];
+  expect(firstUISpan).toEqual(
+    expect.objectContaining({
+      op: 'ui.long-task',
+      description: 'Long Task',
+      parent_span_id: eventData.contexts?.trace.span_id,
+    }),
+  );
+  const start = firstUISpan['start_timestamp'] ?? 0;
+  const end = firstUISpan['timestamp'] ?? 0;
+  const duration = end - start;
+
+  expect(duration).toBeGreaterThanOrEqual(0.1);
+  expect(duration).toBeLessThanOrEqual(0.15);
+});
diff --git a/packages/nextjs/test/integration/test/client/tracingFetch.js b/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',
+      },
     ],
   });
 

diff --git a/packages/tracing/src/browser/browsertracing.ts b/packages/tracing/src/browser/browsertracing.ts
@@ -6,7 +6,7 @@ import { startIdleTransaction } from '../hubextensions';
 import { DEFAULT_FINAL_TIMEOUT, DEFAULT_IDLE_TIMEOUT } from '../idletransaction';
 import { extractTraceparentData } from '../utils';
 import { registerBackgroundTabDetection } from './backgroundtab';
-import { addPerformanceEntries, startTrackingWebVitals } from './metrics';
+import { addPerformanceEntries, startTrackingLongTasks, startTrackingWebVitals } from './metrics';
 import {
   defaultRequestInstrumentationOptions,
   instrumentOutgoingRequests,
@@ -148,6 +148,7 @@ export class BrowserTracing implements Integration {
 
     const { _metricOptions } = this.options;
     startTrackingWebVitals(_metricOptions && _metricOptions._reportAllChanges);
+    startTrackingLongTasks();
   }
 
   /**

diff --git a/packages/tracing/src/browser/metrics/index.ts b/packages/tracing/src/browser/metrics/index.ts
@@ -2,12 +2,14 @@
 import { Measurements } from '@sentry/types';
 import { browserPerformanceTimeOrigin, getGlobalObject, htmlTreeAsString, logger } from '@sentry/utils';
 
+import { IdleTransaction } from '../../idletransaction';
 import { Transaction } from '../../transaction';
-import { msToSec } from '../../utils';
+import { getActiveTransaction, msToSec } from '../../utils';
 import { getCLS, LayoutShift } from '../web-vitals/getCLS';
 import { getFID } from '../web-vitals/getFID';
 import { getLCP, LargestContentfulPaint } from '../web-vitals/getLCP';
 import { getVisibilityWatcher } from '../web-vitals/lib/getVisibilityWatcher';
+import { observe, PerformanceEntryHandler } from '../web-vitals/lib/observe';
 import { NavigatorDeviceMemory, NavigatorNetworkInformation } from '../web-vitals/types';
 import { _startChild, isMeasurementValue } from './utils';
 
@@ -38,6 +40,28 @@ export function startTrackingWebVitals(reportAllChanges: boolean = false): void
   }
 }
 
+/**
+ * Start tracking long tasks.
+ */
+export function startTrackingLongTasks(): void {
+  const entryHandler: PerformanceEntryHandler = (entry: PerformanceEntry): void => {
+    const transaction = getActiveTransaction() as IdleTransaction | undefined;
+    if (!transaction) {
+      return;
+    }
+    const startTime = msToSec(entry.startTime);
+    const duration = msToSec(entry.duration);
+    transaction.startChild({
+      description: 'Long Task',
+      op: 'ui.long-task',
+      startTimestamp: startTime,
+      endTimestamp: startTime + duration,
+    });
+  };
+
+  observe('longtask', entryHandler);
+}
+
 /** Starts tracking the Cumulative Layout Shift on the current page. */
 function _trackCLS(): void {
   // See: