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.
Top comments (8)
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
configureScopewith 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.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!!
@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?
Ah, I actually found the root of my error. This
serverErrorHandleris 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...
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.
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...