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	9,035	-	8,944	+1%
GET With Sentry	1,712	19%	1,786	-4%
GET With Sentry (error only)	6,020	67%	6,223	-3%
POST Baseline	1,205	-	1,206	-0%
POST With Sentry	569	47%	597	-5%
POST With Sentry (error only)	1,063	88%	1,064	-0%
MYSQL Baseline	3,296	-	3,304	-0%
MYSQL With Sentry	425	13%	513	-17%
MYSQL With Sentry (error only)	2,678	81%	2,667	+0%

View base workflow run

[chargome]

@onurtemizkan sorry this one went under the radar. Can you resolve the conflict and ping me again?

[onurtemizkan]

@chargome, it's ready for review 👍

[github-actions]

Codecov Results 📊

---

Generated by Codecov Action

[chargome]

Generally LGTM to me but is there a way we could already wrap the server components with vite? Also initing the Client in a hook might happen quite late – any ideas if the client will eventually support an entry file?

[chargome]

q: Why do we need this in here? We have a dedupe integration that should take of this I think?