Add Sentry to Vercel Next.js API Routes

To add Sentry to Next.js, you can wrap your entire route in a try block and have the Sentry reporting done in the catch block:

// /pages/api/someRoute.ts
import * as Sentry from '@sentry/node';
import { NextApiRequest, NextApiResponse } from 'next';

Sentry.init({ dsn: process.env.SENTRY_DSN });

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    // ...your main business logic here
  } catch (error) {
    Sentry.captureException(error);
    await Sentry.flush(2000);
    throw error;
  }
};

Of course, writing that catch block over and over is bad programming practice. We can wrap the try/catch in a higher order function:

import * as Sentry from '@sentry/node';
import { NextApiRequest, NextApiResponse, NextApiHandler } from 'next';

Sentry.init({ dsn: process.env.SENTRY_DSN });

const sentryHandler = (apiHandler: NextApiHandler) => {
  return async (req: NextApiRequest, res: NextApiResponse) => {
    try {
      return await apiHandler(req, res);
    } catch (error) {
      console.error(error);
      Sentry.captureException(error);
      await Sentry.flush(2000);
      throw error;
    }
  };
};

export default sentryHandler(async (req: NextApiRequest, res: NextApiResponse) => {
  // ...your main business logic here
});

You can extract the sentryHandler to its own file and wrap it around all the Next.js API routes you need Sentry to handle.

Comments

[Daniel K.]

Hey, I wonder, were you able to figure out out how to work with Sentry scopes in an async manner? I mean when I use configureScope with some additional details from the request that fails, but another request comes in the meantime which overrides those details so I end up with error report that has wrong details.

[Alberto Suarez]

Thanks for the tuto! it was really helpful :)
qq, how would you also track the trace of the event, as well as succesful events / transcations? ( aka, when the execution has gone well or without any error ) thanks!!

[Stephen Cefali]

@aryanjnyc Thanks for writing this blog. My question to you is why are you returning the error instead of throwing it to the caller function?

[Aryan J]

Ah, I actually found the root of my error. This serverErrorHandler is heavily inspired by existing Sentry docs that were recently changed. Here is the change this all stemmed from: github.com/getsentry/sentry-docs/c...

Either way, yeah, good find! Thanks a bunch. I also updated my pull request to the Sentry docs: github.com/getsentry/sentry-docs/p...

[Aryan J]

Oh my. Good catch. There's no reason for it and, in fact, that's definitely wrong. That should be a throw.

[Stephen Cefali]

@aryanjnyc Thanks for making the update! I do apologize that the documentation we had was incorrect.

[Vincent Voyer]

Hey there, do you know if this can be achieved without having to warp the full route in a try catch? I thought Sentry would just work by default without having to try catch the whole route.

[Vincent Voyer]

Ok found out that it's documented in the with-sentry example: github.com/vercel/next.js/blob/57e...