feat: Add parentSpanIsAlwaysRootSpan is true by default (#4084)

Author: krystofwoldrich

CHANGELOG.md

@@ -21,6 +21,7 @@
 
 ### Changes
 
+- Set `parentSpanIsAlwaysRootSpan` to `true` to make parent of network requests predictable ([#4084](https://github.com/getsentry/sentry-react-native/pull/4084))
 - Remove deprecated `enableSpotlight` and `spotlightSidecarUrl` ([#4086](https://github.com/getsentry/sentry-react-native/pull/4086))
 - `tracePropagationTargets` defaults to all targets on mobile and same origin on the web ([#4083](https://github.com/getsentry/sentry-react-native/pull/4083))
 - Move `_experiments.profilesSampleRate` to `profilesSampleRate` root options object [#3851](https://github.com/getsentry/sentry-react-native/pull/3851))

packages/core/src/js/client.ts

@@ -40,6 +40,9 @@ export class ReactNativeClient extends BaseClient<ReactNativeClientOptions> {
     ignoreRequireCycleLogs();
     options._metadata = options._metadata || {};
     options._metadata.sdk = options._metadata.sdk || defaultSdkInfo;
+    // We default this to true, as it is the safer scenario
+    options.parentSpanIsAlwaysRootSpan =
+      options.parentSpanIsAlwaysRootSpan === undefined ? true : options.parentSpanIsAlwaysRootSpan;
     super(options);
 
     this._outcomesBuffer = [];

packages/core/test/client.test.ts

@@ -356,6 +356,25 @@ describe('Tests ReactNativeClient', () => {
     });
   });
 
+  describe('parentSpanIsAlwaysRootSpan', () => {
+    it('default is true', () => {
+      const client = new ReactNativeClient({
+        ...DEFAULT_OPTIONS,
+        dsn: EXAMPLE_DSN,
+      });
+      expect(client.getOptions().parentSpanIsAlwaysRootSpan).toBe(true);
+    });
+
+    it('can be set to false', () => {
+      const client = new ReactNativeClient({
+        ...DEFAULT_OPTIONS,
+        dsn: EXAMPLE_DSN,
+        parentSpanIsAlwaysRootSpan: false,
+      });
+      expect(client.getOptions().parentSpanIsAlwaysRootSpan).toBe(false);
+    });
+  });
+
   describe('envelopeHeader SdkInfo', () => {
     let mockTransportSend: jest.Mock;
     let client: ReactNativeClient;

packages/core/test/trace.test.ts

@@ -0,0 +1,47 @@
+import { setCurrentClient, spanToJSON, startSpan } from '@sentry/core';
+
+import { getDefaultTestClientOptions, TestClient } from './mocks/client';
+
+describe('parentSpanIsAlwaysRootSpan', () => {
+  let client: TestClient;
+
+  it('creates a span as child of root span if parentSpanIsAlwaysRootSpan=true', () => {
+    const options = getDefaultTestClientOptions({
+      tracesSampleRate: 1,
+      parentSpanIsAlwaysRootSpan: true,
+    });
+    client = new TestClient(options);
+    setCurrentClient(client);
+    client.init();
+
+    startSpan({ name: 'parent span' }, span => {
+      expect(spanToJSON(span).parent_span_id).toBe(undefined);
+      startSpan({ name: 'child span' }, childSpan => {
+        expect(spanToJSON(childSpan).parent_span_id).toBe(span.spanContext().spanId);
+        startSpan({ name: 'grand child span' }, grandChildSpan => {
+          expect(spanToJSON(grandChildSpan).parent_span_id).toBe(span.spanContext().spanId);
+        });
+      });
+    });
+  });
+
+  it('does not creates a span as child of root span if parentSpanIsAlwaysRootSpan=false', () => {
+    const options = getDefaultTestClientOptions({
+      tracesSampleRate: 1,
+      parentSpanIsAlwaysRootSpan: false,
+    });
+    client = new TestClient(options);
+    setCurrentClient(client);
+    client.init();
+
+    startSpan({ name: 'parent span' }, span => {
+      expect(spanToJSON(span).parent_span_id).toBe(undefined);
+      startSpan({ name: 'child span' }, childSpan => {
+        expect(spanToJSON(childSpan).parent_span_id).toBe(span.spanContext().spanId);
+        startSpan({ name: 'grand child span' }, grandChildSpan => {
+          expect(spanToJSON(grandChildSpan).parent_span_id).toBe(childSpan.spanContext().spanId);
+        });
+      });
+    });
+  });
+});