Switch to AST parsing, keep server component manually instrumented

Author: onurtemizkan

dev-packages/e2e-tests/test-applications/react-router-7-rsc/app/routes.ts

@@ -10,9 +10,12 @@ export default [
     route('server-component-redirect', 'routes/rsc/server-component-redirect.tsx'),
     route('server-component-not-found', 'routes/rsc/server-component-not-found.tsx'),
     route('server-component/:param', 'routes/rsc/server-component-param.tsx'),
+    route('server-component-comment-directive', 'routes/rsc/server-component-comment-directive.tsx'),
     // RSC Server Function tests
     route('server-function', 'routes/rsc/server-function.tsx'),
     route('server-function-error', 'routes/rsc/server-function-error.tsx'),
+    route('server-function-arrow', 'routes/rsc/server-function-arrow.tsx'),
+    route('server-function-default', 'routes/rsc/server-function-default.tsx'),
   ]),
   ...prefix('performance', [
     index('routes/performance/index.tsx'),

dev-packages/e2e-tests/test-applications/react-router-7-rsc/app/routes/rsc/actions-default.ts

@@ -0,0 +1,12 @@
+'use server';
+
+// This file only has a default export — the Sentry plugin should wrap it as
+// a default server function, NOT extract "defaultAction" as a named export.
+export default async function defaultAction(formData: FormData): Promise<{ success: boolean; message: string }> {
+  const name = formData.get('name') as string;
+  await new Promise(resolve => setTimeout(resolve, 50));
+  return {
+    success: true,
+    message: `Default: Hello, ${name}!`,
+  };
+}

dev-packages/e2e-tests/test-applications/react-router-7-rsc/app/routes/rsc/actions.ts

@@ -1,8 +1,6 @@
 'use server';
 
-import { wrapServerFunction } from '@sentry/react-router';
-
-async function _submitForm(formData: FormData): Promise<{ success: boolean; message: string }> {
+export async function submitForm(formData: FormData): Promise<{ success: boolean; message: string }> {
   const name = formData.get('name') as string;
 
   // Simulate some async work
@@ -14,22 +12,16 @@ async function _submitForm(formData: FormData): Promise<{ success: boolean; mess
   };
 }
 
-export const submitForm = wrapServerFunction('submitForm', _submitForm);
-
-async function _submitFormWithError(_formData: FormData): Promise<{ success: boolean; message: string }> {
+export async function submitFormWithError(_formData: FormData): Promise<{ success: boolean; message: string }> {
   // Simulate an error in server function
   throw new Error('RSC Server Function Error: Something went wrong!');
 }
 
-export const submitFormWithError = wrapServerFunction('submitFormWithError', _submitFormWithError);
-
-async function _getData(): Promise<{ timestamp: number; data: string }> {
-  await new Promise(resolve => setTimeout(resolve, 20));
-
+export const submitFormArrow = async (formData: FormData): Promise<{ success: boolean; message: string }> => {
+  const name = formData.get('name') as string;
+  await new Promise(resolve => setTimeout(resolve, 50));
   return {
-    timestamp: Date.now(),
-    data: 'Fetched from server function',
+    success: true,
+    message: `Arrow: Hello, ${name}!`,
   };
-}
-
-export const getData = wrapServerFunction('getData', _getData);
+};

dev-packages/e2e-tests/test-applications/react-router-7-rsc/app/routes/rsc/server-component-async.tsx

@@ -1,3 +1,4 @@
+import { wrapServerComponent } from '@sentry/react-router';
 import type { Route } from './+types/server-component-async';
 
 async function fetchData(): Promise<{ title: string; content: string }> {
@@ -8,7 +9,7 @@ async function fetchData(): Promise<{ title: string; content: string }> {
   };
 }
 
-export default async function AsyncServerComponent(_props: Route.ComponentProps) {
+async function AsyncServerComponent(_props: Route.ComponentProps) {
   const data = await fetchData();
 
   return (
@@ -19,6 +20,11 @@ export default async function AsyncServerComponent(_props: Route.ComponentProps)
   );
 }
 
+export default wrapServerComponent(AsyncServerComponent, {
+  componentRoute: '/rsc/server-component-async',
+  componentType: 'Page',
+});
+
 export async function loader() {
   const data = await fetchData();
   return data;

dev-packages/e2e-tests/test-applications/react-router-7-rsc/app/routes/rsc/server-component-comment-directive.tsx

@@ -0,0 +1,25 @@
+// This is a server component, NOT a client component.
+// "use client" — this comment should be ignored by the Sentry plugin.
+
+import { wrapServerComponent } from '@sentry/react-router';
+import type { Route } from './+types/server-component-comment-directive';
+
+async function ServerComponentWithCommentDirective({ loaderData }: Route.ComponentProps) {
+  await new Promise(resolve => setTimeout(resolve, 10));
+
+  return (
+    <main>
+      <h1 data-testid="title">Server Component With Comment Directive</h1>
+      <p data-testid="loader-message">Message: {loaderData?.message ?? 'No loader data'}</p>
+    </main>
+  );
+}
+
+export default wrapServerComponent(ServerComponentWithCommentDirective, {
+  componentRoute: '/rsc/server-component-comment-directive',
+  componentType: 'Page',
+});
+
+export async function loader() {
+  return { message: 'Hello from comment-directive server component!' };
+}

dev-packages/e2e-tests/test-applications/react-router-7-rsc/app/routes/rsc/server-component-error.tsx

@@ -1,26 +1,10 @@
 import { wrapServerComponent } from '@sentry/react-router';
-import type { Route } from './+types/server-component-error';
 
-// Demonstrate error capture in wrapServerComponent
-async function _ServerComponentWithError(_props: Route.ComponentProps) {
+async function ServerComponentWithError() {
   throw new Error('RSC Server Component Error: Mamma mia!');
 }
 
-const ServerComponent = wrapServerComponent(_ServerComponentWithError, {
+export default wrapServerComponent(ServerComponentWithError, {
   componentRoute: '/rsc/server-component-error',
   componentType: 'Page',
 });
-
-// For testing, we can trigger the wrapped component via a loader
-export async function loader() {
-  // Call the wrapped ServerComponent to test error capture
-  try {
-    await ServerComponent({} as Route.ComponentProps);
-  } catch (e) {
-    // Error is captured by Sentry, rethrow for error boundary
-    throw e;
-  }
-  return {};
-}
-
-export default ServerComponent;

dev-packages/e2e-tests/test-applications/react-router-7-rsc/app/routes/rsc/server-component-not-found.tsx

@@ -1,16 +1,10 @@
-import type { Route } from './+types/server-component-not-found';
+import { wrapServerComponent } from '@sentry/react-router';
 
-// This route demonstrates that 404 responses are NOT captured as errors
-export async function loader() {
-  // Throw a 404 response
+async function NotFoundServerComponent() {
   throw new Response('Not Found', { status: 404 });
 }
 
-export default function NotFoundServerComponentPage() {
-  return (
-    <main>
-      <h1>Not Found Server Component</h1>
-      <p>This triggers a 404 response.</p>
-    </main>
-  );
-}
+export default wrapServerComponent(NotFoundServerComponent, {
+  componentRoute: '/rsc/server-component-not-found',
+  componentType: 'Page',
+});

dev-packages/e2e-tests/test-applications/react-router-7-rsc/app/routes/rsc/server-component-param.tsx

@@ -1,6 +1,7 @@
+import { wrapServerComponent } from '@sentry/react-router';
 import type { Route } from './+types/server-component-param';
 
-export default async function ParamServerComponent({ params }: Route.ComponentProps) {
+async function ParamServerComponent({ params }: Route.ComponentProps) {
   await new Promise(resolve => setTimeout(resolve, 10));
 
   return (
@@ -10,3 +11,8 @@ export default async function ParamServerComponent({ params }: Route.ComponentPr
     </main>
   );
 }
+
+export default wrapServerComponent(ParamServerComponent, {
+  componentRoute: '/rsc/server-component/:param',
+  componentType: 'Page',
+});

dev-packages/e2e-tests/test-applications/react-router-7-rsc/app/routes/rsc/server-component-redirect.tsx

@@ -1,17 +1,11 @@
 import { redirect } from 'react-router';
-import type { Route } from './+types/server-component-redirect';
+import { wrapServerComponent } from '@sentry/react-router';
 
-// This route demonstrates that redirects are NOT captured as errors
-export async function loader() {
-  // Redirect to home page
+async function RedirectServerComponent() {
   throw redirect('/');
 }
 
-export default function RedirectServerComponentPage() {
-  return (
-    <main>
-      <h1>Redirect Server Component</h1>
-      <p>You should be redirected and not see this.</p>
-    </main>
-  );
-}
+export default wrapServerComponent(RedirectServerComponent, {
+  componentRoute: '/rsc/server-component-redirect',
+  componentType: 'Page',
+});

dev-packages/e2e-tests/test-applications/react-router-7-rsc/app/routes/rsc/server-component.tsx

@@ -1,17 +1,23 @@
+import { wrapServerComponent } from '@sentry/react-router';
 import type { Route } from './+types/server-component';
 
-export default async function ServerComponent({ loaderData }: Route.ComponentProps) {
+async function ServerComponent({ loaderData }: Route.ComponentProps) {
   await new Promise(resolve => setTimeout(resolve, 10));
 
   return (
     <main>
       <h1>Server Component</h1>
-      <p>This demonstrates an auto-wrapped server component.</p>
+      <p>This demonstrates a manually wrapped server component.</p>
       <p data-testid="loader-message">Message: {loaderData?.message ?? 'No loader data'}</p>
     </main>
   );
 }
 
+export default wrapServerComponent(ServerComponent, {
+  componentRoute: '/rsc/server-component',
+  componentType: 'Page',
+});
+
 export async function loader() {
   return { message: 'Hello from server loader!' };
 }