未验证 提交 ae1857ef 编写于 作者: L lncls 提交者: GitHub

#12314 add auth to with-sentry-simple example (#12316)

上级 b5b8cd86
......@@ -49,9 +49,9 @@ This is a simple example showing how to use [Sentry](https://sentry.io) to catch
- `_error.js` is rendered by Next.js while handling certain types of exceptions for you. It is overridden so those exceptions can be passed along to Sentry
- `next.config.js` enables source maps in production for Sentry and swaps out `@sentry/node` for `@sentry/browser` when building the client bundle
**Note**: Source maps will not be sent to Sentry when running locally (unless Sentry configuration environment variables are correctly defined during the build step)
**Note**: By default, neither sourcemaps nor error tracking is enabled in development mode (see Configuration).
**Note**: Error handling [works differently in production](https://nextjs.org/docs#custom-error-handling). Some exceptions will not be sent to Sentry in development mode (i.e. `npm run dev`).
**Note**: When enabled in development mode, error handling [works differently than in production](https://nextjs.org/docs#custom-error-handling) as `_error.js` is never actually called.
**Note**: The build output will contain warning about unhandled Promise rejections. This caused by the test pages, and is expected.
......@@ -61,31 +61,22 @@ This is a simple example showing how to use [Sentry](https://sentry.io) to catch
### Configuration
You will need a _Sentry DSN_ for your project. You can get it from the settings of your project in **Client Keys (DSN)**. Then, copy the string labeled **DSN (Public)**.
#### Error tracking
The Sentry DSN should then be updated in `_app.js`.
1. Copy your Sentry DSN. You can get it from the settings of your project in **Client Keys (DSN)**. Then, copy the string labeled **DSN (Public)**.
2. Put the DSN inside the `SENTRY_DSN` environment variable.
```js
Sentry.init({
dsn: 'PUT_YOUR_SENTRY_DSN_HERE',
})
```
More configurations available for [Sentry webpack plugin](https://github.com/getsentry/sentry-webpack-plugin) and using [Sentry Configuration variables](https://docs.sentry.io/cli/configuration/) for defining the releases/verbosity/etc.
**Note:** Error tracking is disabled in development mode using the `NODE_ENV` environment variable. To change this behaviour, remove the `enabled` property from the `Sentry.init()` call inside your `_app.js` file. More details about how `NODE_ENV` is set in next deployments can be found [here](https://nextjs.org/docs#production-deployment).
### Disabling Sentry during development
#### Automatic sourcemap upload (optional)
An easy way to disable Sentry while developing is to set its `enabled` flag based off of the `NODE_ENV` environment variable, which is [properly configured by the `next` subcommands](https://nextjs.org/docs#production-deployment).
```js
Sentry.init({
dsn: 'PUT_YOUR_SENTRY_DSN_HERE',
enabled: process.env.NODE_ENV === 'production',
})
```
1. Set up the `SENTRY_DSN` environment variable as described above.
2. Save your Sentry Organization slug inside the `SENTRY_ORG` and your project slug inside the `SENTRY_PROJECT` environment variables.
3. Create an auth token in Sentry. The recommended way to do this is by creating a new internal integration for your organization. To do so, go into Settings > Developer Settings > New internal integration. After the integration is created, copy the Token.
4. Save the token inside the `SENTRY_AUTH_TOKEN` environment variable.
### Disabling Sentry uploading during local builds
**Note:** Sourcemap upload is disabled in development mode using the `NODE_ENV` environment variable. To change this behaviour, remove the `NODE_ENV === 'production'` check from your `next.config.js` file. More details about how `NODE_ENV` is set in next deployments can be found [here](https://nextjs.org/docs#production-deployment).
Unless the `SENTRY_DNS`, `SENTRY_ORG` and `SENTRY_PROJECT` environment variables passed to the build command, Sentry webpack plugin won't be added and the source maps won't be uploaded to sentry.
#### Other configuration options
Check [with-dotenv](https://github.com/zeit/next.js/tree/v9.3.4/examples/with-dotenv) example for integrating `.env` file env variables
More configurations is available for [Sentry webpack plugin](https://github.com/getsentry/sentry-webpack-plugin) and using [Sentry Configuration variables](https://docs.sentry.io/cli/configuration/) for defining the releases/verbosity/etc.
......@@ -4,9 +4,18 @@ const withSourceMaps = require('@zeit/next-source-maps')()
// Use the SentryWebpack plugin to upload the source maps during build step
const SentryWebpackPlugin = require('@sentry/webpack-plugin')
const { SENTRY_DSN, SENTRY_ORG, SENTRY_PROJECT } = process.env
const {
SENTRY_DSN,
SENTRY_ORG,
SENTRY_PROJECT,
SENTRY_AUTH_TOKEN,
NODE_ENV,
} = process.env
module.exports = withSourceMaps({
env: {
SENTRY_DSN: process.env.SENTRY_DSN,
},
webpack: (config, options) => {
// In `pages/_app.js`, Sentry is imported from @sentry/node. While
// @sentry/browser will run in a Node.js environment, @sentry/node will use
......@@ -30,7 +39,14 @@ module.exports = withSourceMaps({
// The Sentry webpack plugin gets pushed to the webpack plugins to build
// and upload the source maps to sentry.
// This is an alternative to manually uploading the source maps
if (SENTRY_DSN && SENTRY_ORG && SENTRY_PROJECT) {
// Note: This is disabled in development mode.
if (
SENTRY_DSN &&
SENTRY_ORG &&
SENTRY_PROJECT &&
SENTRY_AUTH_TOKEN &&
NODE_ENV === 'production'
) {
config.plugins.push(
new SentryWebpackPlugin({
include: '.next',
......
......@@ -8,9 +8,9 @@
"start": "next start"
},
"dependencies": {
"@sentry/browser": "^5.1.0",
"@sentry/node": "^5.6.2",
"@sentry/webpack-plugin": "^1.10.0",
"@sentry/browser": "^5.15.5",
"@sentry/node": "^5.15.5",
"@sentry/webpack-plugin": "^1.11.1",
"@zeit/next-source-maps": "0.0.4-canary.1",
"next": "latest",
"react": "^16.8.6",
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册