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.
Oldest comments (8)
@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?
Oh my. Good catch. There's no reason for it and, in fact, that's definitely wrong. That should be a throw.
@aryanjnyc Thanks for making the update! I do apologize that the documentation we had was incorrect.
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...
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.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.
Ok found out that it's documented in the with-sentry example: github.com/vercel/next.js/blob/57e...
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!!