send onlyIfParent

Author: Lms24

dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts

@@ -209,86 +209,3 @@ sentryTest('emits element timing spans on navigation', async ({ getLocalTestUrl,
     navigationStartTime,
   );
 });
-
-// For element timing, we're fine with just always emitting a transaction,
-// regardless of a parent span being present or not (as in this case)
-sentryTest('emits element timing spans if no parent span is active', async ({ getLocalTestUrl, page, browserName }) => {
-  if (shouldSkipTracingTest() || browserName === 'webkit') {
-    sentryTest.skip();
-  }
-
-  serveAssets(page);
-
-  const pageloadEventPromise = waitForTransactionRequest(page, evt => evt.contexts?.trace?.op === 'pageload');
-
-  const elementTimingTransactionPromise1 = waitForTransactionRequest(
-    page,
-    evt => evt.contexts?.trace?.op === 'ui.elementtiming' && evt.transaction === 'element[click-image]',
-  );
-
-  const elementTimingTransactionPromise2 = waitForTransactionRequest(
-    page,
-    evt => evt.contexts?.trace?.op === 'ui.elementtiming' && evt.transaction === 'element[click-text]',
-  );
-
-  const url = await getLocalTestUrl({ testDir: __dirname });
-
-  await page.goto(url);
-
-  await pageloadEventPromise;
-
-  await page.locator('#button2').click();
-
-  const imageElementTimingTransaction = envelopeRequestParser(await elementTimingTransactionPromise1);
-  const textElementTimingTransaction = envelopeRequestParser(await elementTimingTransactionPromise2);
-
-  expect(imageElementTimingTransaction.spans?.length).toEqual(0);
-  expect(textElementTimingTransaction.spans?.length).toEqual(0);
-
-  const imageETattributes = imageElementTimingTransaction.contexts?.trace?.data;
-  const textETattributes = textElementTimingTransaction.contexts?.trace?.data;
-
-  expect(imageETattributes).toEqual({
-    'element.identifier': 'click-image',
-    'element.paint-type': 'image-paint',
-    'element.load-time': expect.any(Number),
-    'element.render-time': expect.any(Number),
-    'element.size': '600x179',
-    'element.type': 'img',
-    'element.url': 'https://sentry-test-site.example/path/to/image-click.png',
-    'sentry.span-start-time-source': 'load-time',
-    'sentry.op': 'ui.elementtiming',
-    'sentry.origin': 'auto.ui.browser.elementtiming',
-    'sentry.source': 'component',
-    route: '/index.html',
-  });
-
-  expect(textETattributes).toEqual({
-    'element.identifier': 'click-text',
-    'element.load-time': 0,
-    'element.render-time': expect.any(Number),
-    'element.paint-type': 'text-paint',
-    'element.type': 'p',
-    'sentry.span-start-time-source': 'render-time',
-    'sentry.op': 'ui.elementtiming',
-    'sentry.origin': 'auto.ui.browser.elementtiming',
-    'sentry.source': 'component',
-    route: '/index.html',
-  });
-});
-
-function serveAssets(page: Page) {
-  page.route(/image-(fast|lazy|navigation|click)\.png/, async (route: Route) => {
-    await new Promise(resolve => setTimeout(resolve, 100));
-    return route.fulfill({
-      path: `${__dirname}/assets/sentry-logo-600x179.png`,
-    });
-  });
-
-  page.route('**/image-slow.png', async (route: Route) => {
-    await new Promise(resolve => setTimeout(resolve, 1500));
-    return route.fulfill({
-      path: `${__dirname}/assets/sentry-logo-600x179.png`,
-    });
-  });
-}

packages/browser-utils/src/metrics/elementTiming.ts

@@ -109,6 +109,7 @@ export const _onElementTiming = ({ entries }: { entries: PerformanceEntry[] }):
         name: `element[${elementEntry.identifier}]`,
         attributes,
         startTime: spanStartTime,
+        onlyIfParent: true,
       },
       span => {
         span.end(spanStartTime + duration);