Skip to content

Conversation

lforst
Copy link
Contributor

@lforst lforst commented Nov 14, 2023

Adds a withServerActionInstrumentation function that allows for wrapping the contents of server actions with Sentry instrumentation:

import * as Sentry from "@sentry/nextjs";
import { headers } from 'next/headers';

export default function ServerComponent() {
  async function myServerAction(formData: FormData) {
    "use server";
    return await Sentry.withServerActionInstrumentation(
      "myServerAction",
      { formData, headers: headers(), recordResponse: true },
      async () => {
        await fetch("http://example.com/");
        return { city: "Vienna" };
      }
    );
  }

  return (
    <form action={myServerAction}>
      <input
        type="text"
        defaultValue={"some-default-value"}
        name="some-text-value"
      />
      <button type="submit">Run Action</button>
    </form>
  );
}

Will look like:

Screenshot 2023-11-14 at 13 42 07

Screenshot 2023-11-14 at 13 42 20

Screenshot 2023-11-14 at 13 43 45

I would have wanted the API to be the following but Next.js build time magic didn't allow it for some reason...:

import * as Sentry from "@sentry/nextjs";

export default function ServerComponent() {
  // ...
  return (
    <form action={Sentry.wrapServerAction('myServerAction', myServerAction)}>
      <input
        type="text"
        defaultValue={"some-default-value"}
        name="some-text-value"
      />
      <button type="submit">Run Action</button>
    </form>
  );
}

Fixes #9458

@lforst lforst force-pushed the lforst-nextjs-server-actions branch from 9597447 to 8a75d69 Compare November 14, 2023 12:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for Next.js server actions
2 participants