ref(react, browser): make @sentry/react tree-shakeable by default

CHANGELOG.md

@@ -2,6 +2,32 @@
 
 ## Unreleased
 
+### Important Changes
+
+- **ref(react, browser): make `@sentry/react` tree-shakeable by default ([#22168](https://github.com/getsentry/sentry-javascript/pull/22168))**
+
+  The `@sentry/react` root entry no longer star-exports the full `@sentry/browser` surface. Optional/heavy features
+  (Session Replay, Feedback, AI instrumenters, feature-flag integrations, browser profiling, …) and React
+  Router/Redux helpers are off the root export list so bundlers that materialize a dynamic `import('@sentry/react')`
+  namespace (e.g. Rolldown when destructuring) do not pull them into the critical path.
+
+  **Migration** — import optional browser APIs from `@sentry/browser`, `@sentry/react/optional-browser-api`, or a
+  dedicated package; import router/Redux helpers from package subpaths:
+
+  ```ts
+  // Before
+  import { replayIntegration, tanstackRouterBrowserTracingIntegration, createReduxEnhancer } from '@sentry/react';
+
+  // After
+  import { replayIntegration } from '@sentry/browser'; // or @sentry/react/optional-browser-api / @sentry/replay
+  import { tanstackRouterBrowserTracingIntegration } from '@sentry/react/tanstackrouter';
+  import { createReduxEnhancer } from '@sentry/react/redux';
+  ```
+
+  Framework SDKs (`@sentry/nextjs`, `@sentry/gatsby`, `@sentry/remix`, `@sentry/tanstackstart-react`)
+  re-export `optional-browser-api` (and `createReduxEnhancer` on nextjs/gatsby/remix) so
+  `import * as Sentry from '@sentry/…'` keeps the previous surface for those symbols.
+
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
 Work in this release was contributed by @martijnwalraven. Thank you for your contribution!

dev-packages/e2e-tests/test-applications/lighthouse-react/src/main.tsx

@@ -1,4 +1,5 @@
 import * as Sentry from '@sentry/react';
+import { replayIntegration } from '@sentry/react/optional-browser-api';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 
@@ -19,7 +20,7 @@ if (import.meta.env.MODE === 'tracing-replay') {
     dsn: import.meta.env.VITE_E2E_TEST_DSN as string | undefined,
     release: 'lighthouse-fixture',
     environment: 'qa',
-    integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+    integrations: [Sentry.browserTracingIntegration(), replayIntegration()],
     tracesSampleRate: 1.0,
     replaysSessionSampleRate: 1.0,
     replaysOnErrorSampleRate: 1.0,

dev-packages/e2e-tests/test-applications/react-17/src/index.tsx

@@ -1,4 +1,6 @@
 import * as Sentry from '@sentry/react';
+import { replayIntegration } from '@sentry/react/optional-browser-api';
+import { reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing } from '@sentry/react/reactrouterv6';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {
@@ -13,13 +15,13 @@ import {
 import Index from './pages/Index';
 import User from './pages/User';
 
-const replay = Sentry.replayIntegration();
+const replay = replayIntegration();
 
 Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.REACT_APP_E2E_TEST_DSN,
   integrations: [
-    Sentry.reactRouterV6BrowserTracingIntegration({
+    reactRouterV6BrowserTracingIntegration({
       useEffect: React.useEffect,
       useLocation,
       useNavigationType,
@@ -41,7 +43,7 @@ Sentry.init({
   dataCollection: { userInfo: true },
 });
 
-const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
+const SentryRoutes = withSentryReactRouterV6Routing(Routes);
 
 function App() {
   return (

dev-packages/e2e-tests/test-applications/react-create-browser-router/src/index.tsx

@@ -1,4 +1,6 @@
 import * as Sentry from '@sentry/react';
+import { replayIntegration } from '@sentry/react/optional-browser-api';
+import { reactRouterV6BrowserTracingIntegration, wrapCreateBrowserRouterV6 } from '@sentry/react/reactrouterv6';
 import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
 import {
@@ -12,13 +14,13 @@ import {
 import Index from './pages/Index';
 import User from './pages/User';
 
-const replay = Sentry.replayIntegration();
+const replay = replayIntegration();
 
 Sentry.init({
   // environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.REACT_APP_E2E_TEST_DSN,
   integrations: [
-    Sentry.reactRouterV6BrowserTracingIntegration({
+    reactRouterV6BrowserTracingIntegration({
       useEffect: React.useEffect,
       useLocation,
       useNavigationType,
@@ -41,7 +43,7 @@ Sentry.init({
   debug: !!process.env.DEBUG,
 });
 
-const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV6(createBrowserRouter);
+const sentryCreateBrowserRouter = wrapCreateBrowserRouterV6(createBrowserRouter);
 const LazyLoadedUser = lazy(() => import('./pages/LazyLoadedUser'));
 
 const router = sentryCreateBrowserRouter(

dev-packages/e2e-tests/test-applications/react-create-browser-router/src/pages/LazyLoadedInnerRoute.tsx

@@ -1,8 +1,8 @@
-import * as Sentry from '@sentry/react';
+import { withSentryReactRouterV6Routing } from '@sentry/react/reactrouterv6';
 import * as React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
-const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
+const SentryRoutes = withSentryReactRouterV6Routing(Routes);
 
 const InnerRoute = () => (
   <SentryRoutes>

dev-packages/e2e-tests/test-applications/react-create-browser-router/src/pages/LazyLoadedUser.tsx

@@ -1,8 +1,8 @@
-import * as Sentry from '@sentry/react';
+import { withSentryReactRouterV6Routing } from '@sentry/react/reactrouterv6';
 import * as React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
-const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
+const SentryRoutes = withSentryReactRouterV6Routing(Routes);
 const InnerRoute = React.lazy(() => import('./LazyLoadedInnerRoute'));
 
 const LazyLoadedUser = () => {

dev-packages/e2e-tests/test-applications/react-create-hash-router/src/index.tsx

@@ -1,4 +1,6 @@
 import * as Sentry from '@sentry/react';
+import { replayIntegration } from '@sentry/react/optional-browser-api';
+import { reactRouterV6BrowserTracingIntegration, wrapCreateBrowserRouterV6 } from '@sentry/react/reactrouterv6';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {
@@ -13,13 +15,13 @@ import Index from './pages/Index';
 import User from './pages/User';
 import Group from './pages/Group';
 
-const replay = Sentry.replayIntegration();
+const replay = replayIntegration();
 
 Sentry.init({
   // environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.REACT_APP_E2E_TEST_DSN,
   integrations: [
-    Sentry.reactRouterV6BrowserTracingIntegration({
+    reactRouterV6BrowserTracingIntegration({
       useEffect: React.useEffect,
       useLocation,
       useNavigationType,
@@ -42,7 +44,7 @@ Sentry.init({
   debug: !!process.env.DEBUG,
 });
 
-const sentryCreateHashRouter = Sentry.wrapCreateBrowserRouterV6(createHashRouter);
+const sentryCreateHashRouter = wrapCreateBrowserRouterV6(createHashRouter);
 
 const router = sentryCreateHashRouter([
   {

dev-packages/e2e-tests/test-applications/react-create-memory-router/src/index.tsx

@@ -1,4 +1,6 @@
 import * as Sentry from '@sentry/react';
+import { replayIntegration } from '@sentry/react/optional-browser-api';
+import { reactRouterV6BrowserTracingIntegration, wrapCreateMemoryRouterV6 } from '@sentry/react/reactrouterv6';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {
@@ -12,13 +14,13 @@ import {
 import Index from './pages/Index';
 import User from './pages/User';
 
-const replay = Sentry.replayIntegration();
+const replay = replayIntegration();
 
 Sentry.init({
   // environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.REACT_APP_E2E_TEST_DSN,
   integrations: [
-    Sentry.reactRouterV6BrowserTracingIntegration({
+    reactRouterV6BrowserTracingIntegration({
       useEffect: React.useEffect,
       useLocation,
       useNavigationType,
@@ -41,7 +43,7 @@ Sentry.init({
   debug: !!process.env.DEBUG,
 });
 
-const sentryCreateMemoryRouter = Sentry.wrapCreateMemoryRouterV6(createMemoryRouter);
+const sentryCreateMemoryRouter = wrapCreateMemoryRouterV6(createMemoryRouter);
 
 const router = sentryCreateMemoryRouter(
   [

dev-packages/e2e-tests/test-applications/react-router-5/src/index.tsx

@@ -1,12 +1,14 @@
 import * as Sentry from '@sentry/react';
+import { replayIntegration } from '@sentry/react/optional-browser-api';
+import { reactRouterV5BrowserTracingIntegration, withSentryRouting } from '@sentry/react/reactrouter';
 import { createBrowserHistory } from 'history';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Route, Router, Switch } from 'react-router-dom';
 import Index from './pages/Index';
 import User from './pages/User';
 
-const replay = Sentry.replayIntegration();
+const replay = replayIntegration();
 
 const history = createBrowserHistory();
 
@@ -15,7 +17,7 @@ Sentry.init({
   dsn:
     process.env.REACT_APP_E2E_TEST_DSN ||
     'https://3b6c388182fb435097f41d181be2b2ba@o4504321058471936.ingest.sentry.io/4504321066008576',
-  integrations: [Sentry.reactRouterV5BrowserTracingIntegration({ history }), replay],
+  integrations: [reactRouterV5BrowserTracingIntegration({ history }), replay],
   // We recommend adjusting this value in production, or using tracesSampler
   // for finer control
   tracesSampleRate: 1.0,
@@ -28,7 +30,7 @@ Sentry.init({
 });
 
 // Create Custom Sentry Route component
-export const SentryRoute = Sentry.withSentryRouting(Route);
+export const SentryRoute = withSentryRouting(Route);
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(

dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/src/index.tsx

@@ -1,4 +1,6 @@
 import * as Sentry from '@sentry/react';
+import { replayIntegration } from '@sentry/react/optional-browser-api';
+import { reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing } from '@sentry/react/reactrouterv6';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {
@@ -13,13 +15,13 @@ import {
 } from 'react-router-dom';
 import Index from './pages/Index';
 
-const replay = Sentry.replayIntegration();
+const replay = replayIntegration();
 
 Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.REACT_APP_E2E_TEST_DSN,
   integrations: [
-    Sentry.reactRouterV6BrowserTracingIntegration({
+    reactRouterV6BrowserTracingIntegration({
       useEffect: React.useEffect,
       useLocation,
       useNavigationType,
@@ -41,7 +43,7 @@ Sentry.init({
   tunnel: 'http://localhost:3031',
 });
 
-const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
+const SentryRoutes = withSentryReactRouterV6Routing(Routes);
 
 const DetailsRoutes = () => (
   <SentryRoutes>

dev-packages/e2e-tests/test-applications/react-router-6-use-routes/src/index.tsx

@@ -1,4 +1,6 @@
 import * as Sentry from '@sentry/react';
+import { replayIntegration } from '@sentry/react/optional-browser-api';
+import { reactRouterBrowserTracingIntegration, wrapUseRoutes } from '@sentry/react/reactrouter.compat';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {
@@ -12,13 +14,13 @@ import {
 import Index from './pages/Index';
 import User from './pages/User';
 
-const replay = Sentry.replayIntegration();
+const replay = replayIntegration();
 
 Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.REACT_APP_E2E_TEST_DSN,
   integrations: [
-    Sentry.reactRouterBrowserTracingIntegration({
+    reactRouterBrowserTracingIntegration({
       useEffect: React.useEffect,
       useLocation,
       useNavigationType,
@@ -39,7 +41,7 @@ Sentry.init({
   tunnel: 'http://localhost:3031', // proxy server
 });
 
-const useSentryRoutes = Sentry.wrapUseRoutes(useRoutes);
+const useSentryRoutes = wrapUseRoutes(useRoutes);
 
 function App() {
   return useSentryRoutes([

dev-packages/e2e-tests/test-applications/react-router-6/src/index.tsx

@@ -1,4 +1,6 @@
 import * as Sentry from '@sentry/react';
+import { replayIntegration } from '@sentry/react/optional-browser-api';
+import { reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing } from '@sentry/react/reactrouterv6';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {
@@ -15,13 +17,13 @@ import Products from './pages/Products';
 import SSE from './pages/SSE';
 import User from './pages/User';
 
-const replay = Sentry.replayIntegration();
+const replay = replayIntegration();
 
 Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.REACT_APP_E2E_TEST_DSN,
   integrations: [
-    Sentry.reactRouterV6BrowserTracingIntegration({
+    reactRouterV6BrowserTracingIntegration({
       useEffect: React.useEffect,
       useLocation,
       useNavigationType,
@@ -44,7 +46,7 @@ Sentry.init({
   dataCollection: { userInfo: true },
 });
 
-const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
+const SentryRoutes = withSentryReactRouterV6Routing(Routes);
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(

dev-packages/e2e-tests/test-applications/react-router-7-cross-usage/src/index.tsx

@@ -1,4 +1,11 @@
 import * as Sentry from '@sentry/react';
+import { replayIntegration } from '@sentry/react/optional-browser-api';
+import {
+  reactRouterBrowserTracingIntegration,
+  wrapReactRouterRouting,
+  wrapUseRoutes,
+  wrapCreateBrowserRouter,
+} from '@sentry/react/reactrouter.compat';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {
@@ -15,13 +22,13 @@ import {
 } from 'react-router-dom';
 import Index from './pages/Index';
 
-const replay = Sentry.replayIntegration();
+const replay = replayIntegration();
 
 Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.REACT_APP_E2E_TEST_DSN,
   integrations: [
-    Sentry.reactRouterBrowserTracingIntegration({
+    reactRouterBrowserTracingIntegration({
       useEffect: React.useEffect,
       useLocation,
       useNavigationType,
@@ -43,9 +50,9 @@ Sentry.init({
   tunnel: 'http://localhost:3031',
 });
 
-const SentryRoutes = Sentry.wrapReactRouterRouting(Routes);
-const sentryUseRoutes = Sentry.wrapUseRoutes(useRoutes);
-const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter(createBrowserRouter);
+const SentryRoutes = wrapReactRouterRouting(Routes);
+const sentryUseRoutes = wrapUseRoutes(useRoutes);
+const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createBrowserRouter);
 
 const DetailsRoutes = () =>
   sentryUseRoutes([

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx

@@ -1,4 +1,5 @@
 import * as Sentry from '@sentry/react';
+import { reactRouterV7BrowserTracingIntegration, wrapCreateBrowserRouterV7 } from '@sentry/react/reactrouterv7';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {
@@ -81,7 +82,7 @@ Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.REACT_APP_E2E_TEST_DSN,
   integrations: [
-    Sentry.reactRouterV7BrowserTracingIntegration({
+    reactRouterV7BrowserTracingIntegration({
       useEffect: React.useEffect,
       useLocation,
       useNavigationType,
@@ -102,7 +103,7 @@ Sentry.init({
   tunnel: 'http://localhost:3031',
 });
 
-const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV7(createBrowserRouter);
+const sentryCreateBrowserRouter = wrapCreateBrowserRouterV7(createBrowserRouter);
 
 const router = sentryCreateBrowserRouter(
   [