withServerActionInstrumentation sets serverActionName to Unknown Server Component when using react compiler

[BenGale]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

8.33.1

Framework Version

15.0.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

No changes to the init code from the nextjs wizard.

Steps to Reproduce

Using the example code for wrapping a server action:

async function myServerAction(formData?: FormData) {
    'use server';
    return await Sentry.withServerActionInstrumentation(
      'myServerAction', // The name you want to associate this Server Action with in Sentry
      {
        formData, // Optionally pass in the form data
        headers: headers(), // Optionally pass in headers
        recordResponse: true, // Optionally record the server action response
      },
      async () => {
        throw new Error('I broke a thing');
      },
    );
  }

Expected Result

I would expect to see the name "myServerAction" in the issue in sentry.

Actual Result

"Unknown Server Component"

[chargome]

Hey @BenGale, I wasn't able to reproduce this – can you show me how and from where you are calling this function?

[BenGale]

I have a server rendered component that looks like this:

import DefaultAppLayout from '@/components/layouts/default';
import TestClientComponent from '@/components/test-client-component';
import * as Sentry from '@sentry/nextjs';
import { headers } from 'next/headers';

export default async function Home() {
  async function myServerAction(formData?: FormData) {
    'use server';
    return await Sentry.withServerActionInstrumentation(
      'myServerAction', // The name you want to associate this Server Action with in Sentry
      {
        formData, // Optionally pass in the form data
        headers: headers(), // Optionally pass in headers
        recordResponse: true, // Optionally record the server action response
      },
      async () => {
        throw new Error('I broke a thing');
      },
    );
  }

  return (
    <DefaultAppLayout>
      <h1>Home</h1>
      <TestClientComponent onClick={myServerAction} />
    </DefaultAppLayout>
  );
}

The client component that calls it looks like this:

'use client';

type Props = {
  onClick: () => Promise<{ output: boolean }>;
};

const TestClientComponent: React.FC<Props> = ({ onClick }) => {
  return (
    <div>
      <button
        type="button"
        onClick={async () => {
          try {
            const result = await onClick();
            console.log('client result', result);
          } catch (e) {
            console.error('Error during client action', e);
          }
        }}
      >
        Click Me
      </button>
    </div>
  );
};

export default TestClientComponent;

[chargome]

@BenGale Also this setup works for me. Can you show me your next.js and sentry config files – or even better a reproducible example?

[BenGale]

I tried to reproduce this on a clean repo and initially was unable to.

I've now narrowed it down to the experimental react compiler flag for nextjs 15. When this is disabled the action name comes through as expected.

Obviously this isn't a bug with the current production versions, but if an issue was raised to track that for whenever the react compiler moves into a proper release I'd love a link so that I could follow along.

Thanks for looking into this! Sorry to waste your time.