What is the best way to use zsa with Sentry.io?

[delasy]

I'm at the point where I'm using zsa daily in my projects, but now I need to bring in Sentry.io for catching errors.
I know that zsa catches errors too, so I'm really confused on how to make both libraries work together.
I found this article where Sentry team explains on how to use it with server actions: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#instrument-nextjs-server-actions

But couldn't understand if I should wrap zsa procedure with sentry or is it vice versa?
Do I even need to capture errors in server actions?

For example I have a server action:

export const createCategoryAction = adminActionProc
  .createServerAction()
  .input(createCategorySchema)
  .handler(async ({ input }): Promise<void> => {
    // logic
  })

Should I do it like this?

export const createCategoryAction = adminActionProc
  .createServerAction()
  .input(createCategorySchema)
  .handler(Sentry.withServerActionInstrumentation(
    'createCategoryAction',
    { formData, headers: headers(), recordResponse: true },
    async ({ input }): Promise<void> => {
      // logic
    }
  ))

Thanks

[IdoPesok]

Hi, this is a good question. I have not used zsa with Sentry personally, but happy to help figure this out.

It wasn't clear to me from their docs how withServerActionInstrumentation can be used here. However, I did find their custom instrumentation docs which look like they can help.

What I would do is make a light weight builder function to wrap server actions in a span. This way you can record the error and the server action name.

export const createSentryInstrumentedAction = <
  TServerAction extends (...args: any) => Promise<any>,
>(params: {
  name: string
  action: TServerAction
}) => {
  return async (
    ...args: Parameters<TServerAction>
  ): Promise<ReturnType<TServerAction>> => {
    return await Sentry.startSpan(
      {
        name: params.name,
      },
      async () => {
        const [data, err] = await params.action(...args)

        if (err) {
          Sentry.captureException(err)
        }

        return [data, err]
      }
    )
  }
}

Then when you make actions, you would do something like this:

"use server"

export const myMonitoredAction = createSentryInstrumentedAction({
  name: "myMonitoredAction",
  action: adminActionProc
    .createServerAction()
    .input(createCategorySchema)
    .handler(async ({ input }) => {
      // normal logic
      return `hello world` as const
    }),
})

Hopefully that puts you in the right direction. Let me know if it helps -- I can add this to our main docs!

[delasy]

Wrapping with Sentry this way seems to be a good idea, but probably not enough judging by implementation of withServerActionInstrumentation.

Also I believe if user is not authorized zsa will return an error which in turn will be caught by Sentry. Idea of "catch all error" that zsa returns sounds wrong to me.

instead for me makes more sense to do it this way:

export const echoAction = adminActionProc
  .createServerAction()
  .input(z.string())
  .handler(async ({ input }) => {
    return await Sentry.withServerActionInstrumentation(
      "echoAction",
      {
        formData: zsaInputToFormData(input),
        headers: headers(),
      },
      async () => {
        return await Promise.resolve(input);
      },
    );
  });

though the problem is that user will need to convert data manually to FormData, would be nice to expose some kind of utility that can convert input to FormData similar to this that supports all data types that Zod supports.

[gt-codes]

You can use the 2nd parameter of input and specify it to use formData like so

export const echoAction = adminActionProc
  .createServerAction()
  .input(z.string(), { type: "formData" })
  .handler(async ({ input }) => {
    return await Sentry.withServerActionInstrumentation(
      "echoAction",
      {
        formData: zsaInputToFormData(input),
        headers: headers(),
      },
      async () => {
        return await Promise.resolve(input);
      },
    );
  });