diff --git a/src/platforms/javascript/guides/nextjs/manual-setup.mdx b/src/platforms/javascript/guides/nextjs/manual-setup.mdx index ac1878172d557..a070c49b6c1c4 100644 --- a/src/platforms/javascript/guides/nextjs/manual-setup.mdx +++ b/src/platforms/javascript/guides/nextjs/manual-setup.mdx @@ -184,6 +184,7 @@ const moduleExports = { // sections below for information on the following options: // - disableServerWebpackPlugin // - disableClientWebpackPlugin + // - autoInstrumentServerFunctions // - hideSourceMaps // - widenClientFileUpload // - transpileClientSDK @@ -242,6 +243,54 @@ module.exports = withSentryConfig(moduleExports); In that case you can also skip the `sentry-cli` configuration step below. +### Automatically Instrument API Routes and Data Fetching Methods + +_(New in version 7.14.0)_ + +The SDK provides an option to automatically instrument API routes and server-side [Next.js data fetching methods](https://nextjs.org/docs/basic-features/data-fetching/overview) with error and performance monitoring, removing the need to manually wrap API routes in `withSentry`: + +```javascript {filename:next.config.js} +const moduleExports = { + sentry: { + autoInstrumentServerFunctions: true, + }, +}; +``` + +Under the hood, the SDK is using a Webpack loader to wrap all your API route handlers and data fetching methods. + +If the automatic instrumentation doesn't work for your use case, API routes can also be wrapped manually using the `withSentry` function: + +```javascript {filename:pages/api/*} +import { withSentry } from "@sentry/nextjs"; + +const handler = (req, res) => { + res.status(200).json({ name: "John Doe" }); +}; + +export default withSentry(handler); +``` + +```typescript {filename:pages/api/*} +import type { NextApiRequest, NextApiResponse } from "next" +import { withSentry } from "@sentry/nextjs"; + +const handler = (req: NextApiRequest, res: NextApiResponse) => { + res.status(200).json({ name: "John Doe" }); +}; + +export default withSentry(handler); +``` + +Data fetching methods can also be manually wrapped using the following functions: + +- `withSentryServerSideGetInitialProps` for `getInitialProps` +- `withSentryGetServerSideProps` for `getServerSideProps` +- `withSentryGetStaticProps` for `getStaticProps` +- `withSentryServerSideErrorGetInitialProps` for `getInitialProps` in [custom Error pages](https://nextjs.org/docs/advanced-features/custom-error-page) +- `withSentryServerSideAppGetInitialProps` for `getInitialProps` in [custom `App` components](https://nextjs.org/docs/advanced-features/custom-app) +- `withSentryServerSideDocumentGetInitialProps` for `getInitialProps` in [custom `Document` components](https://nextjs.org/docs/advanced-features/custom-document) + ### Use `hidden-source-map` _(New in version 6.17.1, will default to `true` in 8.0.0 and beyond.)_