Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add docs for Next.js SDK option autoInstrumentServerFunctions #5542

Merged
merged 6 commits into from
Sep 28, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions src/platforms/javascript/guides/nextjs/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ const moduleExports = {
// sections below for information on the following options:
// - disableServerWebpackPlugin
// - disableClientWebpackPlugin
// - autoInstrumentServerFunctions
// - hideSourceMaps
// - widenClientFileUpload
// - transpileClientSDK
Expand Down Expand Up @@ -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.)_
Expand Down