-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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
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 1487e74
feat: Add automatic and manual config for NextJS
iker-barriocanal 3bda01b
feat: Add usage to NextJS
iker-barriocanal 40ecaf8
feat: Add NextJS notes on webpack configs
iker-barriocanal f145fcb
fix: Delete unnecessary NextJS note
iker-barriocanal 7c52cc8
feat: Add NextJS Source Maps page
iker-barriocanal 884d117
ref: Use of "we" instead of "you"
iker-barriocanal 900e672
feat: Add NextJS project configuration options
iker-barriocanal 76837fe
ref: Reformat a sentence
iker-barriocanal 04d29a0
ref: Improve config docs
iker-barriocanal d7a5fd7
Rename usage to verify and update it
iker-barriocanal 42ef25e
feat: Add note for the `runtime` tag
iker-barriocanal 98d6a20
feat: Link Environment configuration page
iker-barriocanal bcc6e58
fix: Replace `NextJS` with `Next.js` (actual name)
iker-barriocanal d3f9a13
ref: Split main index file into several subfiles
iker-barriocanal 8705cac
fix: Paths and SDK names
iker-barriocanal f45dea6
feat: Add sourcemaps docs for Next.js
iker-barriocanal 23c7d95
fix: Call to the wizard
iker-barriocanal 5f3e3e6
feat: Add manual configuration of the Next.js SDK
iker-barriocanal 131bbda
feat: Add Next.js custom initialization docs
iker-barriocanal 52b0f2f
feat: Add Sentry properties docs
iker-barriocanal ca76353
feat: Add docs for custom Next.js initialization
iker-barriocanal 24d9c78
feat: Add docs for running in development
iker-barriocanal 5709b02
fix: Remove duplicated next.config.js
iker-barriocanal b5c2ca3
fix: Fix broken links
iker-barriocanal adc2b2b
fix: Fix more broken links
iker-barriocanal a053a35
fix: Style, formatting, wording, capitalizing titles and other minor …
iker-barriocanal 127e846
fix: Add clarifications of serialization
iker-barriocanal d58fa67
ref: Update flag to `enableInDev`
iker-barriocanal 63780ef
ref: Move `custom-init` to Configuration
iker-barriocanal 334c4b1
ref: Move `run-dev` to Configuration
iker-barriocanal 66666ad
ref: Remove verification override for nextjs
iker-barriocanal c1eaf85
docs: Update description for Manual Setup
iker-barriocanal 76dd118
ref: Update link to docs in in next.config.js
iker-barriocanal 889d045
style: Fix apostrophe style
iker-barriocanal 80b6573
ref: Update docs to support latest Next.js SDK init
iker-barriocanal e1615b3
ref: Delete deprecated docs
iker-barriocanal cd6cc3d
ref: Remove unused sidebar_order from an index file
iker-barriocanal 3e08465
ref: Update link to base `manual-setup/`
iker-barriocanal 6a65297
Remove unnecessary import requirement
iker-barriocanal b82ba71
feat: Add warning for Next.js plugin system
iker-barriocanal fca9c3d
Add note to warn users about the development mode
iker-barriocanal f582258
docs: Minor update in `next.config.js`
iker-barriocanal 20d4783
Update `next.config.js`
iker-barriocanal b4627b5
fix: Update `next.config.js`
iker-barriocanal fc907b4
Add SDK initialization files creation changes to the getting started
iker-barriocanal 7ae8843
Update the introduction to getting started
iker-barriocanal 397bf78
Add initialization config files for the manual setup
iker-barriocanal aa3d4a5
Add option to set the DSN by env variable in code samples
iker-barriocanal 28c17ec
Minor changes
iker-barriocanal 999ec65
Sort bullets
iker-barriocanal 36c9c14
Replace "set up" with "setup"
iker-barriocanal 4d02ff0
Convert Alert to Note
iker-barriocanal e788130
Minor word smoothing
iker-barriocanal b28e1aa
Remove redundant package name
iker-barriocanal 74b007c
Move Wizard's changes from Setup to Config
iker-barriocanal f1d94e2
Move Wizard's setup code to the config
iker-barriocanal ce2b49a
Fix bad link
iker-barriocanal 7a39586
Remove `yarn` option to run the Wizard
iker-barriocanal 1ec533e
Use `___PUBLIC_DSN___` instead of `___DSN___`
iker-barriocanal a44c971
Remove config files from the automatic config
iker-barriocanal 1841f93
Move properties configuration to manual-config with the other configu…
iker-barriocanal df8ad28
Add more details about the properties file
iker-barriocanal 8e82177
general wordsmithing and cleanup
lobsterkatie c925476
add note about setting release value
lobsterkatie 1269646
Style note in next.config.js
iker-barriocanal 32fc564
fix: Don't support Next.js on enriching-events/transaction-name
iker-barriocanal b21f75a
Be more detailed by adding "configuration" to the configurations
iker-barriocanal 699e3d9
Update `next.config.js`
iker-barriocanal 06ac0be
move config to SDK
lobsterkatie a4f9c63
fix: Set proper name for the @sentry/wizard package
iker-barriocanal 090c185
fix: Include missing var in next.config.js
iker-barriocanal File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
6
src/platforms/javascript/guides/nextjs/manual-setup/index.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
105
src/platforms/javascript/guides/nextjs/manual-setup/manual-config.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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` | |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.