Skip to content

feat(nextjs): Add Next.js docs #3319

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

Merged
merged 72 commits into from
Apr 20, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
72 commits
Select commit Hold shift + click to select a range
3143326
feat: Add install docs for the NextJS SDK
iker-barriocanal Mar 16, 2021
1487e74
feat: Add automatic and manual config for NextJS
iker-barriocanal Mar 16, 2021
3bda01b
feat: Add usage to NextJS
iker-barriocanal Mar 16, 2021
40ecaf8
feat: Add NextJS notes on webpack configs
iker-barriocanal Mar 16, 2021
f145fcb
fix: Delete unnecessary NextJS note
iker-barriocanal Mar 16, 2021
7c52cc8
feat: Add NextJS Source Maps page
iker-barriocanal Mar 16, 2021
884d117
ref: Use of "we" instead of "you"
iker-barriocanal Mar 16, 2021
900e672
feat: Add NextJS project configuration options
iker-barriocanal Mar 16, 2021
76837fe
ref: Reformat a sentence
iker-barriocanal Mar 16, 2021
04d29a0
ref: Improve config docs
iker-barriocanal Mar 17, 2021
d7a5fd7
Rename usage to verify and update it
iker-barriocanal Mar 17, 2021
42ef25e
feat: Add note for the `runtime` tag
iker-barriocanal Mar 17, 2021
98d6a20
feat: Link Environment configuration page
iker-barriocanal Mar 17, 2021
bcc6e58
fix: Replace `NextJS` with `Next.js` (actual name)
iker-barriocanal Mar 17, 2021
d3f9a13
ref: Split main index file into several subfiles
iker-barriocanal Mar 22, 2021
8705cac
fix: Paths and SDK names
iker-barriocanal Mar 22, 2021
f45dea6
feat: Add sourcemaps docs for Next.js
iker-barriocanal Mar 22, 2021
23c7d95
fix: Call to the wizard
iker-barriocanal Mar 23, 2021
5f3e3e6
feat: Add manual configuration of the Next.js SDK
iker-barriocanal Mar 24, 2021
131bbda
feat: Add Next.js custom initialization docs
iker-barriocanal Mar 24, 2021
52b0f2f
feat: Add Sentry properties docs
iker-barriocanal Mar 24, 2021
ca76353
feat: Add docs for custom Next.js initialization
iker-barriocanal Mar 25, 2021
24d9c78
feat: Add docs for running in development
iker-barriocanal Mar 25, 2021
5709b02
fix: Remove duplicated next.config.js
iker-barriocanal Mar 25, 2021
b5c2ca3
fix: Fix broken links
iker-barriocanal Mar 25, 2021
adc2b2b
fix: Fix more broken links
iker-barriocanal Mar 25, 2021
a053a35
fix: Style, formatting, wording, capitalizing titles and other minor …
iker-barriocanal Mar 26, 2021
127e846
fix: Add clarifications of serialization
iker-barriocanal Mar 26, 2021
d58fa67
ref: Update flag to `enableInDev`
iker-barriocanal Mar 26, 2021
63780ef
ref: Move `custom-init` to Configuration
iker-barriocanal Mar 26, 2021
334c4b1
ref: Move `run-dev` to Configuration
iker-barriocanal Mar 26, 2021
66666ad
ref: Remove verification override for nextjs
iker-barriocanal Mar 29, 2021
c1eaf85
docs: Update description for Manual Setup
iker-barriocanal Mar 29, 2021
76dd118
ref: Update link to docs in in next.config.js
iker-barriocanal Mar 29, 2021
889d045
style: Fix apostrophe style
iker-barriocanal Apr 8, 2021
80b6573
ref: Update docs to support latest Next.js SDK init
iker-barriocanal Apr 8, 2021
e1615b3
ref: Delete deprecated docs
iker-barriocanal Apr 8, 2021
cd6cc3d
ref: Remove unused sidebar_order from an index file
iker-barriocanal Apr 8, 2021
3e08465
ref: Update link to base `manual-setup/`
iker-barriocanal Apr 8, 2021
6a65297
Remove unnecessary import requirement
iker-barriocanal Apr 9, 2021
b82ba71
feat: Add warning for Next.js plugin system
iker-barriocanal Apr 9, 2021
fca9c3d
Add note to warn users about the development mode
iker-barriocanal Apr 9, 2021
f582258
docs: Minor update in `next.config.js`
iker-barriocanal Apr 13, 2021
20d4783
Update `next.config.js`
iker-barriocanal Apr 13, 2021
b4627b5
fix: Update `next.config.js`
iker-barriocanal Apr 14, 2021
fc907b4
Add SDK initialization files creation changes to the getting started
iker-barriocanal Apr 14, 2021
7ae8843
Update the introduction to getting started
iker-barriocanal Apr 14, 2021
397bf78
Add initialization config files for the manual setup
iker-barriocanal Apr 14, 2021
aa3d4a5
Add option to set the DSN by env variable in code samples
iker-barriocanal Apr 14, 2021
28c17ec
Minor changes
iker-barriocanal Apr 14, 2021
999ec65
Sort bullets
iker-barriocanal Apr 14, 2021
36c9c14
Replace "set up" with "setup"
iker-barriocanal Apr 14, 2021
4d02ff0
Convert Alert to Note
iker-barriocanal Apr 15, 2021
e788130
Minor word smoothing
iker-barriocanal Apr 15, 2021
b28e1aa
Remove redundant package name
iker-barriocanal Apr 15, 2021
74b007c
Move Wizard's changes from Setup to Config
iker-barriocanal Apr 15, 2021
f1d94e2
Move Wizard's setup code to the config
iker-barriocanal Apr 15, 2021
ce2b49a
Fix bad link
iker-barriocanal Apr 15, 2021
7a39586
Remove `yarn` option to run the Wizard
iker-barriocanal Apr 15, 2021
1ec533e
Use `___PUBLIC_DSN___` instead of `___DSN___`
iker-barriocanal Apr 16, 2021
a44c971
Remove config files from the automatic config
iker-barriocanal Apr 19, 2021
1841f93
Move properties configuration to manual-config with the other configu…
iker-barriocanal Apr 19, 2021
df8ad28
Add more details about the properties file
iker-barriocanal Apr 19, 2021
8e82177
general wordsmithing and cleanup
lobsterkatie Apr 17, 2021
c925476
add note about setting release value
lobsterkatie Apr 19, 2021
1269646
Style note in next.config.js
iker-barriocanal Apr 19, 2021
32fc564
fix: Don't support Next.js on enriching-events/transaction-name
iker-barriocanal Apr 19, 2021
b21f75a
Be more detailed by adding "configuration" to the configurations
iker-barriocanal Apr 19, 2021
699e3d9
Update `next.config.js`
iker-barriocanal Apr 19, 2021
06ac0be
move config to SDK
lobsterkatie Apr 20, 2021
a4f9c63
fix: Set proper name for the @sentry/wizard package
iker-barriocanal Apr 20, 2021
090c185
fix: Include missing var in next.config.js
iker-barriocanal Apr 20, 2021
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
14 changes: 14 additions & 0 deletions src/includes/getting-started-config/javascript.nextjs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
```Npx
npx @sentry/wizard -i nextjs
```

<Note>

The call to the [Sentry Wizard](https://github.com/getsentry/sentry-wizard) will automatically patch your project with the necessary configuration, though you can [setup manually](/platforms/javascript/guides/nextjs/manual-setup/) if you prefer.
It will perform the following changes:

- create `sentry.client.config.js` and `sentry.server.config.js` with the default `Sentry.init` (if those files already exist, it will create `_sentry.client.config.js` and `_sentry.server.config.js` instead).
- create `next.config.js` with the default configuration (if it already exists it will create `_next.config.js` instead, which will need to be merged with the existing file manually).
- create `sentry.properties` with Sentry’s project-specific data (used when uploading source maps).

</Note>
7 changes: 7 additions & 0 deletions src/includes/getting-started-install/javascript.nextjs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
```npm
npm install --save @sentry/nextjs
```

```yarn
yarn add @sentry/nextjs
```
20 changes: 20 additions & 0 deletions src/includes/getting-started-primer/javascript.nextjs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<Note>

_Sentry's Next.js SDK enables automatic reporting of errors and exceptions._

</Note>

Features:

- Automatic [Error Tracking](/product/issues/) with source maps for both JavaScript and TypeScript
- Events [enriched](/platforms/javascript/enriching-events/context/) with device data
- [Breadcrumbs](/platforms/javascript/enriching-events/breadcrumbs/) created for outgoing HTTP request with XHR and Fetch, and console logs
- [Release Health](/product/releases/health/) for tracking crash-free users and sessions

Under the hood the SDK relies on our [React SDK](/platforms/javascript/guides/react/) on the frontend and [Node SDK](/platforms/node) on the backend, which makes all features available in those SDKs also available in this SDK.

<Note>

The SDK relies on the experimental plugin system of Next.js. This restricts the SDK to running on the production server (it runs in the client in both dev and production), and means changes to the plugin system may prevent the SDK from working as expected. We recognize the irony.

</Note>
1 change: 1 addition & 0 deletions src/platforms/common/enriching-events/transaction-name.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ supported:
- native
notSupported:
- javascript.cordova
- javascript.nextjs
description: "Learn how to set or override the transaction name to capture the user and gain critical pieces of information that construct a unique identity in Sentry."
---

Expand Down
3 changes: 2 additions & 1 deletion src/platforms/common/performance/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ supported:
- ruby
notSupported:
- javascript.cordova
- javascript.nextjs
description: "Learn how to enable performance monitoring in your app if it is not already set up."
redirect_from:
- /platforms/javascript/performance/apm-to-tracing/
Expand Down Expand Up @@ -60,7 +61,7 @@ Test out tracing by adding our <PlatformLink to="/performance/included-instrumen

<PlatformSection supported={["dotnet", "go", "java", "android", "ruby"]} notSupported={["javascript", "react-native", "java.spring", "java.spring-boot"]}>

Test out tracing by starting and finishing a transaction, which you *must* do so transactions can be sent to Sentry. Learn how in our <PlatformLink to="/performance/custom-instrumentation/">Custom Instrumentation</PlatformLink> content.
Test out tracing by starting and finishing a transaction, which you _must_ do so transactions can be sent to Sentry. Learn how in our <PlatformLink to="/performance/custom-instrumentation/">Custom Instrumentation</PlatformLink> content.

</PlatformSection>

Expand Down
16 changes: 15 additions & 1 deletion src/platforms/javascript/common/sourcemaps/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Most modern JavaScript transpilers support source maps. Below you'll find our re
- [UglifyJS](tools/uglifyjs/)
- [SystemJS](tools/systemjs/)

<PlatformSection notSupported={["javascript.angular"]}>
<PlatformSection notSupported={["javascript.angular", "javascript.nextjs"]}>

We recommend using [Sentry's Webpack plugin](https://github.com/getsentry/sentry-webpack-plugin) to configure source maps and upload them automatically during the build:

Expand Down Expand Up @@ -98,6 +98,20 @@ From here, you can [upload your source maps](uploading/) to Sentry.

</PlatformSection>

<PlatformSection supported={["javascript.nextjs"]}>

You need to generate an access token for our API. Within your organization's settings, navigate to Developer Settings, [create a new internal integration](/product/integrations/integration-platform/#internal-integrations), and provide a name appropriate to your organization. **Important:** Select **Releases -> Admin** for Permissions.

<Note>

The Releases -> Admin permission is also known as 'project:releases' in other API documentation.

</Note>

You may configure [sentry-cli](/product/cli/configuration/) through its documented mechanisms, or follow the [recommended instructions for webpack](/platforms/javascript/guides/nextjs/sourcemaps/tools/webpack/) for Next.js.

</PlatformSection>

## Additional Resources

- [Using sentry-cli to Upload Source Maps](/product/cli/releases/#sentry-cli-sourcemaps)
Expand Down
22 changes: 22 additions & 0 deletions src/platforms/javascript/common/sourcemaps/tools/webpack.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ Webpack is a powerful build tool that resolves, bundles, and compresses your Jav

Sentry provides a convenient [Webpack plugin](https://github.com/getsentry/sentry-webpack-plugin) that configures source maps and uploads them to Sentry during the build. This process is the recommended one for uploading sources to Sentry:

<PlatformSection notSupported={["javascript.nextjs"]}>

```shell {tabTitle:npm}
npm install --save-dev @sentry/webpack-plugin
```
Expand All @@ -15,6 +17,18 @@ npm install --save-dev @sentry/webpack-plugin
yarn add --dev @sentry/webpack-plugin
```

</PlatformSection>

<PlatformSection supported={["javascript.nextjs"]}>
<Note>

If you’ve installed the Next.js SDK, you don’t have to install the plugin.

</Note>
</PlatformSection>

<PlatformSection notSupported={["javascript.nextjs"]}>

You may configure [sentry-cli](/product/cli/configuration/) through it's documented mechanisms, or instead simply bind required parameters when initializing the plugin:

```javascript {filename:webpack.config.js}
Expand All @@ -39,6 +53,14 @@ module.exports = {
};
```

</PlatformSection>

<PlatformSection supported={["javascript.nextjs"]}>

You may configure [sentry-cli](/product/cli/configuration/) through its documented mechanisms, or [extend the default usage of webpack](/platforms/javascript/guides/nextjs/manual-setup/manual-config/) of Next.js.

</PlatformSection>

<PlatformSection supported={["javascript.vue"]}>

In Vue 2.x, you should use `vue.config.js` instead of `webpack.config.js`, and use `include: "./dist"` instead of `include: "."`
Expand Down
8 changes: 8 additions & 0 deletions src/platforms/javascript/guides/nextjs/config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
title: Next.js
sdk: sentry.javascript.nextjs
fallbackPlatform: javascript
caseStyle: camelCase
supportLevel: production
categories:
- browser
- server
6 changes: 6 additions & 0 deletions src/platforms/javascript/guides/nextjs/manual-setup/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
title: Manual Setup
description: "Learn more about manual configuration including webpack usage and managing your app's property file."
---

<PageGrid />
105 changes: 105 additions & 0 deletions src/platforms/javascript/guides/nextjs/manual-setup/manual-config.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
---
title: Manual Configuration
sidebar_order: 1
description: "Learn about manual configuration of the SDK."
---

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.

## Set Initialization Config Files

Create two files in the root directory of your project, `sentry.client.config.js` and `sentry.server.config.js`, and include in them your initialization code for the client-side SDK and server-side SDK, respectively.

For the client configuration:

```javascript {filename:sentry.client.config.js}
import * as Sentry from "@sentry/nextjs";

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
dsn: SENTRY_DSN || "___PUBLIC_DSN___",
// ...
// Note: if you want to override the automatic release value, do not set a
// `release` value here - use the environment variable `SENTRY_RELEASE`, so
// that it will also get attached to your source maps
});
```

And the server configuration:

```javascript {filename:sentry.server.config.js}
import * as Sentry from "@sentry/nextjs";

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
dsn: SENTRY_DSN || "___PUBLIC_DSN___",
// ...
// Note: if you want to override the automatic release value, do not set a
// `release` value here - use the environment variable `SENTRY_RELEASE`, so
// that it will also get attached to your source maps
});
```

You can include your DSN directly in these two files, or provide it in either of two environment variables, `SENTRY_DSN` or `NEXT_PUBLIC_SENTRY_DSN`.

## Extend Default Webpack Usage for Source Maps

Extend the default Next.js usage of Webpack to generate source maps and upload them to Sentry. Include the following in `next.config.js`:

```javascript {filename:next.config.js}
// This file sets a custom webpack configuration to use your Next.js app
// with Sentry.
// https://nextjs.org/docs/api-reference/next.config.js/introduction
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

const { withSentryConfig } = require("@sentry/nextjs");

const moduleExports = {
// your existing module.exports
};

const SentryWebpackPluginOptions = {
// Additional config options for the Sentry Webpack plugin. Keep in mind that
// the following options are set automatically, and overriding them is not
// recommended:
// release, url, org, project, authToken, configFile, stripPrefix,
// urlPrefix, include, ignore
// For all available options, see:
// https://github.com/getsentry/sentry-webpack-plugin#options.
};

// Make sure adding Sentry options is the last code to run before exporting, to
// ensure that your source maps include changes from all other Webpack plugins
module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);
```

Make sure to add the Sentry config last; otherwise, the source maps the plugin receives may not be final.

## Configure sentry-cli

Under the hood, 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/). (If you choose to combine the two approaches, the environment variables will take precedence over values set in the properties file.)

### Properties File

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:

```properties {filename:sentry.properties}
defaults.url=https://sentry.io/
defaults.org=___ORG_SLUG___
defaults.project=___PROJECT_SLUG___
auth.token=___TOKEN___
# cli.executable=../path/to/bin/sentry-cli
```

### Environment Variables

Alternatively, the cli can be configured using environment variables.

| Property name | Environment variable |
| ------------------ | -------------------- |
| `defaults.url` | `SENTRY_URL` |
| `defaults.org` | `SENTRY_ORG` |
| `defaults.project` | `SENTRY_PROJECT` |
| `auth.token` | `SENTRY_AUTH_TOKEN` |