feat(react-router): Add Experimental React Server Components (RSC) instrumentation

[onurtemizkan]

Resolves: #17337

Adds experimental instrumentation for React Router v7.9.0+ React Server Components (RSC).

React Router's RSC support is currently behind unstable_reactRouterRSC() and subject to change. These wrappers provide error capture and performance tracing for RSC server requests, server components, and server functions.

RSC Request Handlers

Added wrapMatchRSCServerRequest() and wrapRouteRSCServerRequest():

• wrapMatchRSCServerRequest - Wraps RSC server matching with spans for generateResponse and loadServerAction
• wrapRouteRSCServerRequest - Wraps SSR request handling with spans for fetchServer and renderHTML

// rsc-handler.ts
import {
  unstable_matchRSCServerRequest as matchRSCServerRequest,
  unstable_routeRSCServerRequest as routeRSCServerRequest,
} from "react-router";
import { wrapMatchRSCServerRequest, wrapRouteRSCServerRequest } from "@sentry/react-router";

const sentryMatchRSCServerRequest = wrapMatchRSCServerRequest(matchRSCServerRequest);
const sentryRouteRSCServerRequest = wrapRouteRSCServerRequest(routeRSCServerRequest);

Server Components

Added wrapServerComponent() for error instrumentation:

// routes/users.$id.tsx
import { wrapServerComponent } from "@sentry/react-router";

async function _UserPage({ params }: Route.ComponentProps) {
  const user = await getUser(params.id);
  return <UserProfile user={user} />;
}

export const ServerComponent = wrapServerComponent(_UserPage, {
  componentRoute: "/users/:id",
  componentType: "Page",
});

Redirect (3xx) and not-found (404) responses are not captured as errors.

Server Functions

Added wrapServerFunction() and wrapServerFunctions() for "use server" functions:

// actions.ts
"use server";
import { wrapServerFunction } from "@sentry/react-router";

async function _updateUser(formData: FormData) {
  await db.users.update(formData.get("id"), { name: formData.get("name") });
}

export const updateUser = wrapServerFunction("updateUser", _updateUser);

Needs docs PR

[github-actions]

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

Scenario	Requests/s	% of Baseline	Prev. Requests/s	Change %
GET Baseline	11,708	-	9,154	+28%
GET With Sentry	1,988	17%	1,636	+22%
GET With Sentry (error only)	7,750	66%	6,034	+28%
POST Baseline	1,184	-	1,144	+3%
POST With Sentry	600	51%	549	+9%
POST With Sentry (error only)	1,045	88%	1,036	+1%
MYSQL Baseline	3,997	-	3,250	+23%
MYSQL With Sentry	512	13%	333	+54%
MYSQL With Sentry (error only)	3,120	78%	2,646	+18%

View base workflow run