Skip to content

Commit bc974b6

Browse files
authored
feat(nextjs): Document options for disabling webpack plugin (#3826)
Add docs for the options introduced in getsentry/sentry-javascript#3771, which allow the user to disable the addition of `SentryWebpackPlugin` to server and client builds.
1 parent 19ecbe1 commit bc974b6

File tree

2 files changed

+34
-10
lines changed

2 files changed

+34
-10
lines changed

src/includes/configuration/sourcemaps/tools/webpack/advanced-usage/javascript.nextjs.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,4 @@ const SentryWebpackPluginOptions = {
2323
module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);
2424
```
2525

26-
Learn more about the Webpack usage for the Next.js SDK in [Extend Default Webpack Usage](/platforms/javascript/guides/nextjs/manual-setup/#extend-default-webpack-usage).
26+
Learn more about the Webpack usage for the Next.js SDK in [Extend Default Webpack Usage](/platforms/javascript/guides/nextjs/manual-setup/#extend-nextjs-configuration).

src/platforms/javascript/guides/nextjs/manual-setup.mdx

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ description: "Learn how to set up the SDK manually."
66

77
If you can’t (or prefer not to) run the [configuration step](/platforms/javascript/guides/nextjs/#configure), you can follow the instructions below to configure your application.
88

9-
## Set Initialization Config Files
9+
## Create Initialization Config Files
1010

1111
Create two files in the root directory of your project, `sentry.client.config.js` and `sentry.server.config.js`. In these files, add your initialization code for the client-side SDK and server-side SDK, respectively. We've included some examples below.
1212

@@ -51,11 +51,11 @@ Sentry.init({
5151
If you want to instrument [Next.js API Routes](https://nextjs.org/docs/api-routes/introduction), which run on serverless, you need to wrap your handler in our `withSentry` wrapper in order to be able to capture crashes:
5252

5353
```javascript {filename:pages/api*}
54-
import { withSentry } from '@sentry/nextjs';
54+
import { withSentry } from "@sentry/nextjs";
5555

5656
const handler = async (req, res) => {
57-
res.status(200).json({ name: 'John Doe' })
58-
}
57+
res.status(200).json({ name: "John Doe" });
58+
};
5959

6060
export default withSentry(handler);
6161
```
@@ -68,7 +68,7 @@ You can include your DSN directly in these two files, or provide it in either of
6868

6969
</Alert>
7070

71-
## Extend Default Webpack Usage
71+
## Extend Next.js Configuration
7272

7373
Use `withSentryConfig` to extend the default Next.js usage of Webpack. This will do two things:
7474

@@ -107,15 +107,39 @@ module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);
107107
```
108108

109109
Make sure to add the Sentry config last; otherwise, the source maps the plugin receives may not be final.
110-
Also keep in mind, by default we disable source map upload in `dev` mode when running `next dev` to not upload the source maps on every file change. If you build your app for production, we'll upload your source maps by default.
111110

112-
## Configure sentry-cli
111+
## Configure Source Maps
112+
113+
By default, `withSentryConfig` will add an instance of `SentryWebpackPlugin` to the webpack plugins, for both server and client builds. This means that when you run a production build (`next build`), `sentry-cli` will automatically detect and upload your source files, source maps, and bundles to Sentry, so that your stacktraces can be demangled. (This behavior is disabled when running the dev server (`next dev`), because otherwise the full upload process would reoccur on each file change.)
114+
115+
To configure the plugin, pass a `SentryWebpackPluginOptions` argument to `withSentryConfig`, as seen in the example above. All available options are documented [here](https://github.com/getsentry/sentry-webpack-plugin#options).
116+
117+
If you want or need to handle source map uploading separately, the plugin can be disabled for either the server or client build process. To do this, add a `sentry` object to `moduleExports` above, and set the relevant options there:
118+
119+
```javascript
120+
const moduleExports = {
121+
sentry: {
122+
disableServerWebpackPlugin: true,
123+
disableClientWebpackPlugin: true,
124+
},
125+
};
126+
```
127+
128+
If you disable the plugin for both server and client builds, it's safe to omit the `SentryWebpackPluginOptions` parameter from your `withSentryConfig` call:
129+
130+
```javascript
131+
module.exports = withSentryConfig(moduleExports);
132+
```
133+
134+
In that case you can also skip the `sentry-cli` confuguration step below.
135+
136+
## Configure `sentry-cli`
113137

114138
The `SentryWebpackPlugin` uses `sentry-cli`, which can be configured in one of two ways - using a properties file, or with environment variables - both of which are discussed below. For full details, see [the CLI configuration docs](https://docs.sentry.io/product/cli/configuration/).
115139

116140
If you choose to combine the two approaches, the environment variables will take precedence over values set in the properties file. One common approach is to set sensitive data (like tokens) in the environment and include everything else in a properties file, which can then be added to your VCS.
117141

118-
### Properties File
142+
### Use a Properties File
119143

120144
You can create a `sentry.properties` file in the base directory of your project. (This is the approach taken by the wizard.) Here is an example:
121145

@@ -127,7 +151,7 @@ auth.token=___TOKEN___
127151
# cli.executable=../path/to/bin/sentry-cli
128152
```
129153

130-
### Environment Variables
154+
### Use Environment Variables
131155

132156
Alternatively, the cli can be configured using environment variables.
133157

0 commit comments

Comments
 (0)