Merge branch 'main' into alwx/experiment/cirrus-labs

Author: alwx

.github/workflows/native-tests.yml

@@ -49,17 +49,36 @@ jobs:
         working-directory: packages/core/RNSentryCocoaTester
         run: pod install
 
+      - name: List Available Simulators
+        run: xcrun simctl list devices available iPhone
+
       - name: Run iOS Tests
         working-directory: packages/core/RNSentryCocoaTester
         env:
           SCHEME: RNSentryCocoaTester
           CONFIGURATION: Release
-          DESTINATION: 'platform=iOS Simulator,OS=latest,name=iPhone 16'
         run: |
+          # Find first available iPhone simulator from latest iOS runtime
+          DEVICE_ID=$(xcrun simctl list devices available iPhone -j | jq -r '
+            .devices |
+            to_entries |
+            map(select(.key | startswith("com.apple.CoreSimulator.SimRuntime.iOS-"))) |
+            sort_by(.key) |
+            reverse |
+            .[0].value[] |
+            select(.isAvailable == true) |
+            .udid
+          ' | head -1)
+          if [ -z "$DEVICE_ID" ]; then
+            echo "No iPhone simulators available"
+            exit 1
+          fi
+          echo "Using simulator: $DEVICE_ID"
+
           env NSUnbufferedIO=YES \
             xcodebuild -workspace *.xcworkspace \
             -scheme $SCHEME -configuration $CONFIGURATION \
-            -destination "$DESTINATION" \
+            -destination "id=$DEVICE_ID" \
             -quiet \
             test
 

CHANGELOG.md

@@ -6,6 +6,32 @@
 > make sure you follow our [migration guide](https://docs.sentry.io/platforms/react-native/migration/) first.
 <!-- prettier-ignore-end -->
 
+## Unreleased
+
+### Features
+
+- Add experimental `sentry-span-attributes` prop to attach custom attributes to user interaction spans ([#5569](https://github.com/getsentry/sentry-react-native/pull/5569))
+  ```tsx
+  <Pressable
+    sentry-label="checkout"
+    sentry-span-attributes={{
+      'user.type': 'premium',
+      'cart.value': 150
+    }}
+    onPress={handleCheckout}>
+    <Text>Checkout</Text>
+  </Pressable>
+  ```
+
+### Dependencies
+
+- Bump Bundler Plugins from v4.7.0 to v4.8.0 ([#5581](https://github.com/getsentry/sentry-react-native/pull/5581))
+  - [changelog](https://github.com/getsentry/sentry-javascript-bundler-plugins/blob/main/CHANGELOG.md#480)
+  - [diff](https://github.com/getsentry/sentry-javascript-bundler-plugins/compare/4.7.0...4.8.0)
+- Bump JavaScript SDK from v10.36.0 to v10.37.0 ([#5589](https://github.com/getsentry/sentry-react-native/pull/5589))
+  - [changelog](https://github.com/getsentry/sentry-javascript/blob/develop/CHANGELOG.md#10370)
+  - [diff](https://github.com/getsentry/sentry-javascript/compare/10.36.0...10.37.0)
+
 ## 7.10.0
 
 ### Fixes

dev-packages/e2e-tests/package.json

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-typescript": "^7.18.6",
-    "@sentry/core": "10.36.0",
+    "@sentry/core": "10.37.0",
     "@sentry/react-native": "7.10.0",
     "@types/node": "^20.9.3",
     "@types/react": "^18.2.64",

packages/core/package.json

@@ -68,21 +68,21 @@
     "react-native": ">=0.65.0"
   },
   "dependencies": {
-    "@sentry/babel-plugin-component-annotate": "4.7.0",
-    "@sentry/browser": "10.36.0",
+    "@sentry/babel-plugin-component-annotate": "4.8.0",
+    "@sentry/browser": "10.37.0",
     "@sentry/cli": "2.58.4",
-    "@sentry/core": "10.36.0",
-    "@sentry/react": "10.36.0",
-    "@sentry/types": "10.36.0"
+    "@sentry/core": "10.37.0",
+    "@sentry/react": "10.37.0",
+    "@sentry/types": "10.37.0"
   },
   "devDependencies": {
     "@babel/core": "^7.26.7",
     "@expo/metro-config": "~0.20.0",
     "@mswjs/interceptors": "^0.25.15",
     "@react-native/babel-preset": "0.80.0",
-    "@sentry-internal/eslint-config-sdk": "10.36.0",
-    "@sentry-internal/eslint-plugin-sdk": "10.36.0",
-    "@sentry-internal/typescript": "10.36.0",
+    "@sentry-internal/eslint-config-sdk": "10.37.0",
+    "@sentry-internal/eslint-plugin-sdk": "10.37.0",
+    "@sentry-internal/typescript": "10.37.0",
     "@sentry/wizard": "6.11.0",
     "@testing-library/react-native": "^13.2.2",
     "@types/jest": "^29.5.13",

packages/core/src/js/touchevents.tsx

@@ -1,4 +1,4 @@
-import type { SeverityLevel } from '@sentry/core';
+import type { SeverityLevel, SpanAttributeValue } from '@sentry/core';
 import { addBreadcrumb, debug, dropUndefinedKeys, getClient, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/core';
 import * as React from 'react';
 import type { GestureResponderEvent } from 'react-native';
@@ -39,6 +39,13 @@ export type TouchEventBoundaryProps = {
    * Label Name used to identify the touched element.
    */
   labelName?: string;
+  /**
+   * Custom attributes to add to user interaction spans.
+   * Accepts an object with string keys and values that are strings, numbers, booleans, or arrays.
+   *
+   * @experimental This API is experimental and may change in future releases.
+   */
+  spanAttributes?: Record<string, SpanAttributeValue>;
 };
 
 const touchEventStyles = StyleSheet.create({
@@ -52,6 +59,7 @@ const DEFAULT_BREADCRUMB_TYPE = 'user';
 const DEFAULT_MAX_COMPONENT_TREE_SIZE = 20;
 
 const SENTRY_LABEL_PROP_KEY = 'sentry-label';
+const SENTRY_SPAN_ATTRIBUTES_PROP_KEY = 'sentry-span-attributes';
 const SENTRY_COMPONENT_PROP_KEY = 'data-sentry-component';
 const SENTRY_ELEMENT_PROP_KEY = 'data-sentry-element';
 const SENTRY_FILE_PROP_KEY = 'data-sentry-source-file';
@@ -204,6 +212,28 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
     });
     if (span) {
       span.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SPAN_ORIGIN_AUTO_INTERACTION);
+
+      // Apply custom attributes from sentry-span-attributes prop
+      // Traverse the component tree to find custom attributes
+      let instForAttributes: ElementInstance | undefined = e._targetInst;
+      let customAttributes: Record<string, SpanAttributeValue> | undefined;
+
+      while (instForAttributes) {
+        if (instForAttributes.elementType?.displayName === TouchEventBoundary.displayName) {
+          break;
+        }
+
+        customAttributes = getSpanAttributes(instForAttributes);
+        if (customAttributes && Object.keys(customAttributes).length > 0) {
+          break;
+        }
+
+        instForAttributes = instForAttributes.return;
+      }
+
+      if (customAttributes && Object.keys(customAttributes).length > 0) {
+        span.setAttributes(customAttributes);
+      }
     }
   }
 
@@ -291,6 +321,26 @@ function getLabelValue(props: Record<string, unknown>, labelKey: string | undefi
       : undefined;
 }
 
+function getSpanAttributes(currentInst: ElementInstance): Record<string, SpanAttributeValue> | undefined {
+  if (!currentInst.memoizedProps) {
+    return undefined;
+  }
+
+  const props = currentInst.memoizedProps;
+  const attributes = props[SENTRY_SPAN_ATTRIBUTES_PROP_KEY];
+
+  // Validate that it's an object (not null, not array)
+  if (
+    typeof attributes === 'object' &&
+    attributes !== null &&
+    !Array.isArray(attributes)
+  ) {
+    return attributes as Record<string, SpanAttributeValue>;
+  }
+
+  return undefined;
+}
+
 /**
  * Convenience Higher-Order-Component for TouchEventBoundary
  * @param WrappedComponent any React Component