PR fixes

dev-packages/browser-integration-tests/suites/integrations/graphqlClient/fetch/test.ts

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/core';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 // Duplicate from subject.js
 const query = `query Test{
@@ -13,7 +13,11 @@ const query = `query Test{
 }`;
 const queryPayload = JSON.stringify({ query });
 
-sentryTest('should update spans for GraphQL Fetch requests', async ({ getLocalTestUrl, page }) => {
+sentryTest('should update spans for GraphQL fetch requests', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    return;
+  }
+
   const url = await getLocalTestUrl({ testDir: __dirname });
 
   await page.route('**/foo', route => {
@@ -57,7 +61,11 @@ sentryTest('should update spans for GraphQL Fetch requests', async ({ getLocalTe
   });
 });
 
-sentryTest('should update breadcrumbs for GraphQL Fetch requests', async ({ getLocalTestUrl, page }) => {
+sentryTest('should update breadcrumbs for GraphQL fetch requests', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    return;
+  }
+
   const url = await getLocalTestUrl({ testDir: __dirname });
 
   await page.route('**/foo', route => {

dev-packages/browser-integration-tests/suites/integrations/graphqlClient/init.js

@@ -1,12 +1,14 @@
 import * as Sentry from '@sentry/browser';
+// Must import this like this to ensure the test transformation for CDN bundles works
+import { graphqlClientIntegration } from '@sentry/browser';
 
 window.Sentry = Sentry;
 
 Sentry.init({
   dsn: 'https://[email protected]/1337',
   integrations: [
     Sentry.browserTracingIntegration(),
-    Sentry.graphqlClientIntegration({
+    graphqlClientIntegration({
       endpoints: ['http://sentry-test.io/foo'],
     }),
   ],

dev-packages/browser-integration-tests/suites/integrations/graphqlClient/xhr/test.ts

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/core';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 // Duplicate from subject.js
 const query = `query Test{
@@ -14,6 +14,10 @@ const query = `query Test{
 const queryPayload = JSON.stringify({ query });
 
 sentryTest('should update spans for GraphQL XHR requests', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    return;
+  }
+
   const url = await getLocalTestUrl({ testDir: __dirname });
 
   await page.route('**/foo', route => {
@@ -58,6 +62,10 @@ sentryTest('should update spans for GraphQL XHR requests', async ({ getLocalTest
 });
 
 sentryTest('should update breadcrumbs for GraphQL XHR requests', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    return;
+  }
+
   const url = await getLocalTestUrl({ testDir: __dirname });
 
   await page.route('**/foo', route => {

dev-packages/browser-integration-tests/utils/generatePlugin.ts

@@ -36,6 +36,7 @@ const IMPORTED_INTEGRATION_CDN_BUNDLE_PATHS: Record<string, string> = {
   reportingObserverIntegration: 'reportingobserver',
   feedbackIntegration: 'feedback',
   moduleMetadataIntegration: 'modulemetadata',
+  graphqlClientIntegration: 'graphqlclient',
   // technically, this is not an integration, but let's add it anyway for simplicity
   makeMultiplexedTransport: 'multiplexedtransport',
 };

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/tests/performance.client.test.ts

@@ -109,30 +109,6 @@ test.describe('client-specific performance events', () => {
           op: 'ui.svelte.init',
           origin: 'auto.ui.svelte',
         }),
-        expect.objectContaining({
-          data: { 'sentry.op': 'ui.svelte.update', 'sentry.origin': 'auto.ui.svelte' },
-          description: '<components/+page>',
-          op: 'ui.svelte.update',
-          origin: 'auto.ui.svelte',
-        }),
-        expect.objectContaining({
-          data: { 'sentry.op': 'ui.svelte.update', 'sentry.origin': 'auto.ui.svelte' },
-          description: '<Component1>',
-          op: 'ui.svelte.update',
-          origin: 'auto.ui.svelte',
-        }),
-        expect.objectContaining({
-          data: { 'sentry.op': 'ui.svelte.update', 'sentry.origin': 'auto.ui.svelte' },
-          description: '<Component2>',
-          op: 'ui.svelte.update',
-          origin: 'auto.ui.svelte',
-        }),
-        expect.objectContaining({
-          data: { 'sentry.op': 'ui.svelte.update', 'sentry.origin': 'auto.ui.svelte' },
-          description: '<Component3>',
-          op: 'ui.svelte.update',
-          origin: 'auto.ui.svelte',
-        }),
       ]),
     );
   });

dev-packages/e2e-tests/test-applications/sveltekit-2/src/routes/components/+page.svelte

@@ -5,7 +5,7 @@
   import Component2 from "./Component2.svelte";
   import Component3 from "./Component3.svelte";
 
-  Sentry.trackComponent({componentName: 'components/+page'})
+  Sentry.trackComponent({componentName: 'components/+page', trackUpdates: true})
 
 </script>
 <h2>Demonstrating Component Tracking</h2>

dev-packages/e2e-tests/test-applications/sveltekit-2/src/routes/components/Component1.svelte

@@ -2,7 +2,7 @@
   import Component2 from "./Component2.svelte";
   import {trackComponent} from '@sentry/sveltekit';
 
-  trackComponent({componentName: 'Component1'});
+  trackComponent({componentName: 'Component1', trackUpdates: true});
 
 </script>
 <h3>Howdy, I'm component 1</h3>

dev-packages/e2e-tests/test-applications/sveltekit-2/src/routes/components/Component2.svelte

@@ -2,7 +2,7 @@
   import Component3 from "./Component3.svelte";
   import {trackComponent} from '@sentry/sveltekit';
 
-  trackComponent({componentName: 'Component2'});
+  trackComponent({componentName: 'Component2', trackUpdates: true});
 </script>
 <h3>Howdy, I'm component 2</h3>
 

dev-packages/e2e-tests/test-applications/sveltekit-2/src/routes/components/Component3.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import * as Sentry from '@sentry/sveltekit';
-  Sentry.trackComponent({componentName: 'Component3'});
+  Sentry.trackComponent({componentName: 'Component3', trackUpdates: true});
 </script>
 
 <h3>Howdy, I'm component 3</h3>

dev-packages/node-integration-tests/suites/tracing/sample-rate-propagation/tracesSampler/server.js

@@ -4,12 +4,8 @@ const Sentry = require('@sentry/node');
 Sentry.init({
   dsn: 'https://[email protected]/1337',
   transport: loggingTransport,
-  tracesSampler: ({ parentSampleRate }) => {
-    if (parentSampleRate) {
-      return parentSampleRate;
-    }
-
-    return 0.69;
+  tracesSampler: ({ inheritOrSampleWith }) => {
+    return inheritOrSampleWith(0.69);
   },
 });
 

dev-packages/node-integration-tests/suites/tracing/sample-rate-propagation/tracesSampler/test.ts

@@ -11,7 +11,7 @@ describe('parentSampleRate propagation with tracesSampler', () => {
     expect((response as any).propagatedData.baggage).toMatch(/sentry-sample_rate=0\.69/);
   });
 
-  test('should propagate sample_rate equivalent to sample rate returned by tracesSampler when there is no incoming sample rate', async () => {
+  test('should propagate sample_rate equivalent to sample rate returned by tracesSampler when there is no incoming sample rate (1 -> because there is a positive sampling decision and inheritOrSampleWith was used)', async () => {
     const runner = createRunner(__dirname, 'server.js').start();
     const response = await runner.makeRequest('get', '/check', {
       headers: {
@@ -20,6 +20,30 @@ describe('parentSampleRate propagation with tracesSampler', () => {
       },
     });
 
+    expect((response as any).propagatedData.baggage).toMatch(/sentry-sample_rate=1/);
+  });
+
+  test('should propagate sample_rate equivalent to sample rate returned by tracesSampler when there is no incoming sample rate (0 -> because there is a negative sampling decision and inheritOrSampleWith was used)', async () => {
+    const runner = createRunner(__dirname, 'server.js').start();
+    const response = await runner.makeRequest('get', '/check', {
+      headers: {
+        'sentry-trace': '530699e319cc067ce440315d74acb312-414dc2a08d5d1dac-0',
+        baggage: '',
+      },
+    });
+
+    expect((response as any).propagatedData.baggage).toMatch(/sentry-sample_rate=0/);
+  });
+
+  test('should propagate sample_rate equivalent to sample rate returned by tracesSampler when there is no incoming sample rate (the fallback value -> because there is no sampling decision and inheritOrSampleWith was used)', async () => {
+    const runner = createRunner(__dirname, 'server.js').start();
+    const response = await runner.makeRequest('get', '/check', {
+      headers: {
+        'sentry-trace': '530699e319cc067ce440315d74acb312-414dc2a08d5d1dac',
+        baggage: '',
+      },
+    });
+
     expect((response as any).propagatedData.baggage).toMatch(/sentry-sample_rate=0\.69/);
   });
 

packages/browser/rollup.bundle.config.mjs

@@ -12,6 +12,7 @@ const reexportedPluggableIntegrationFiles = [
   'rewriteframes',
   'feedback',
   'modulemetadata',
+  'graphqlclient',
 ];
 
 browserPluggableIntegrationFiles.forEach(integrationName => {

packages/browser/src/integrations-bundle/index.graphqlclient.ts

@@ -0,0 +1 @@
+export { graphqlClientIntegration } from '../integrations/graphqlClient';

packages/browser/src/integrations/graphqlClient.ts

@@ -193,6 +193,7 @@ export function getGraphQLRequestPayload(payload: string): GraphQLRequestPayload
 }
 
 /**
- * GraphQL Client integration for the browser.
+ * This integration ensures that GraphQL requests made in the browser
+ * have their GraphQL-specific data captured and attached to spans and breadcrumbs.
  */
 export const graphqlClientIntegration = defineIntegration(_graphqlClientIntegration);

packages/browser/src/utils/lazyLoadIntegration.ts

@@ -15,6 +15,7 @@ const LazyLoadableIntegrations = {
   linkedErrorsIntegration: 'linkederrors',
   dedupeIntegration: 'dedupe',
   extraErrorDataIntegration: 'extraerrordata',
+  graphqlClientIntegration: 'graphqlclient',
   httpClientIntegration: 'httpclient',
   reportingObserverIntegration: 'reportingobserver',
   rewriteFramesIntegration: 'rewriteframes',

packages/core/src/tracing/sampling.ts

@@ -27,7 +27,24 @@ export function sampleSpan(
   // work; prefer the hook if so
   let sampleRate;
   if (typeof options.tracesSampler === 'function') {
-    sampleRate = options.tracesSampler(samplingContext);
+    sampleRate = options.tracesSampler({
+      ...samplingContext,
+      inheritOrSampleWith: fallbackSampleRate => {
+        // If we have an incoming parent sample rate, we'll just use that one.
+        // The sampling decision will be inherited because of the sample_rand that was generated when the trace reached the incoming boundaries of the SDK.
+        if (typeof samplingContext.parentSampleRate === 'number') {
+          return samplingContext.parentSampleRate;
+        }
+
+        // Fallback if parent sample rate is not on the incoming trace (e.g. if there is no baggage)
+        // This is to provide backwards compatibility if there are incoming traces from older SDKs that don't send a parent sample rate or a sample rand. In these cases we just want to force either a sampling decision on the downstream traces via the sample rate.
+        if (typeof samplingContext.parentSampled === 'boolean') {
+          return Number(samplingContext.parentSampled);
+        }
+
+        return fallbackSampleRate;
+      },
+    });
     localSampleRateWasApplied = true;
   } else if (samplingContext.parentSampled !== undefined) {
     sampleRate = samplingContext.parentSampled;

packages/core/src/types-hoist/options.ts

@@ -2,7 +2,7 @@ import type { CaptureContext } from '../scope';
 import type { Breadcrumb, BreadcrumbHint } from './breadcrumb';
 import type { ErrorEvent, EventHint, TransactionEvent } from './event';
 import type { Integration } from './integration';
-import type { SamplingContext } from './samplingcontext';
+import type { TracesSamplerSamplingContext } from './samplingcontext';
 import type { SdkMetadata } from './sdkmetadata';
 import type { SpanJSON } from './span';
 import type { StackLineParser, StackParser } from './stacktrace';
@@ -243,7 +243,7 @@ export interface ClientOptions<TO extends BaseTransportOptions = BaseTransportOp
    * @returns A sample rate between 0 and 1 (0 drops the trace, 1 guarantees it will be sent). Returning `true` is
    * equivalent to returning 1 and returning `false` is equivalent to returning 0.
    */
-  tracesSampler?: (samplingContext: SamplingContext) => number | boolean;
+  tracesSampler?: (samplingContext: TracesSamplerSamplingContext) => number | boolean;
 
   /**
    * An event-processing callback for error and message events, guaranteed to be invoked after all other event

packages/core/src/types-hoist/samplingcontext.ts

@@ -10,9 +10,7 @@ export interface CustomSamplingContext {
 }
 
 /**
- * Data passed to the `tracesSampler` function, which forms the basis for whatever decisions it might make.
- *
- * Adds default data to data provided by the user.
+ * Auxiliary data for various sampling mechanisms in the Sentry SDK.
  */
 export interface SamplingContext extends CustomSamplingContext {
   /**
@@ -42,3 +40,13 @@ export interface SamplingContext extends CustomSamplingContext {
   /** Initial attributes that have been passed to the span being sampled. */
   attributes?: SpanAttributes;
 }
+
+/**
+ * Auxiliary data passed to the `tracesSampler` function.
+ */
+export interface TracesSamplerSamplingContext extends SamplingContext {
+  /**
+   * Returns a sample rate value that matches the sampling decision from the incoming trace, or falls back to the provided `fallbackSampleRate`.
+   */
+  inheritOrSampleWith: (fallbackSampleRate: number) => number;
+}

packages/core/test/lib/tracing/trace.test.ts

@@ -608,6 +608,7 @@ describe('startSpan', () => {
         test2: 'aa',
         test3: 'bb',
       },
+      inheritOrSampleWith: expect.any(Function),
     });
   });
 

packages/feedback/src/screenshot/components/CropIcon.tsx

@@ -0,0 +1,23 @@
+import type { VNode, h as hType } from 'preact';
+
+interface FactoryParams {
+  h: typeof hType;
+}
+
+export default function CropIconFactory({
+  h, // eslint-disable-line @typescript-eslint/no-unused-vars
+}: FactoryParams) {
+  return function CropIcon(): VNode {
+    return (
+      <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  };
+}

packages/feedback/src/screenshot/components/PenIcon.tsx

@@ -9,7 +9,7 @@ export default function PenIconFactory({
 }: FactoryParams) {
   return function PenIcon(): VNode {
     return (
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M8.5 12L12 8.5L14 11L11 14L8.5 12Z"
           stroke="currentColor"