feat(react): Add React version to events (#12390)

Given React 19 has changes with error handling, we may want to treat it
differently in the product. (see
https://www.notion.so/sentry/React-JS-19-23a7a2c5f88d4ef59a4b9647c84333a3?d=98df57f2272d482fa12a3c0618b43fc4#9bb5d5f0a9604508bb290fd7405fcce0
as an example).

To make this easier, we now attach the react version as context on all
outgoing events.

Author: AbhiPrasad

dev-packages/e2e-tests/test-applications/create-next-app/tests/client-transactions.test.ts

@@ -17,6 +17,9 @@ test('Sends a pageload transaction to Sentry', async ({ page }) => {
       transaction_info: { source: 'route' },
       type: 'transaction',
       contexts: {
+        react: {
+          version: '18.2.0',
+        },
         trace: {
           span_id: expect.any(String),
           trace_id: expect.any(String),
@@ -60,6 +63,9 @@ test('captures a navigation transcation to Sentry', async ({ page }) => {
       transaction_info: { source: 'route' },
       type: 'transaction',
       contexts: {
+        react: {
+          version: '18.2.0',
+        },
         trace: {
           span_id: expect.any(String),
           trace_id: expect.any(String),

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/transactions.test.ts

@@ -19,6 +19,9 @@ test('Sends a pageload transaction', async ({ page }) => {
       transaction_info: { source: 'url' },
       type: 'transaction',
       contexts: {
+        react: {
+          version: expect.any(String),
+        },
         trace: {
           span_id: expect.any(String),
           trace_id: expect.any(String),

packages/react/src/sdk.ts

@@ -1,7 +1,9 @@
 import type { BrowserOptions } from '@sentry/browser';
-import { init as browserInit } from '@sentry/browser';
+import { init as browserInit, setContext } from '@sentry/browser';
 import { applySdkMetadata } from '@sentry/core';
 
+import { version } from 'react';
+
 /**
  * Inits the React SDK
  */
@@ -11,6 +13,6 @@ export function init(options: BrowserOptions): void {
   };
 
   applySdkMetadata(opts, 'react');
-
+  setContext('react', { version });
   browserInit(opts);
 }

packages/react/test/sdk.test.ts

@@ -0,0 +1,14 @@
+import * as SentryBrowser from '@sentry/browser';
+import { version } from 'react';
+import { init } from '../src/sdk';
+
+describe('init', () => {
+  it('sets the React version (if available) in the global scope', () => {
+    const setContextSpy = jest.spyOn(SentryBrowser, 'setContext');
+
+    init({});
+
+    expect(setContextSpy).toHaveBeenCalledTimes(1);
+    expect(setContextSpy).toHaveBeenCalledWith('react', { version });
+  });
+});