From 049d2c99ca2ab5f3dd5f745d10a2177a70153243 Mon Sep 17 00:00:00 2001 From: iker barriocanal <32816711+iker-barriocanal@users.noreply.github.com> Date: Tue, 2 Nov 2021 13:49:58 +0100 Subject: [PATCH 1/3] Add Gatsby docs for sentry config file --- .../sourcemaps/upload/webpack/javascript.mdx | 28 ++++++- .../javascript/guides/gatsby/index.mdx | 73 ++++++++++++++----- 2 files changed, 82 insertions(+), 19 deletions(-) diff --git a/src/includes/sourcemaps/upload/webpack/javascript.mdx b/src/includes/sourcemaps/upload/webpack/javascript.mdx index 17d5ea7f4eab3..62235d267d414 100644 --- a/src/includes/sourcemaps/upload/webpack/javascript.mdx +++ b/src/includes/sourcemaps/upload/webpack/javascript.mdx @@ -6,9 +6,11 @@ You can do this with the help of the our Webpack plugin, which internally uses o 2. Confirm you have `project:write` selected under "Scopes" 3. Install `@sentry/webpack-plugin` using `npm` 4. Create `.sentryclirc` file with necessary configuration, as documented on this page -5. Update your `webpack.config.js` +5. Update your Webpack config -```javascript + + +```javascript {filename:webpack.config.js} const SentryPlugin = require("@sentry/webpack-plugin"); module.exports = { @@ -22,6 +24,28 @@ module.exports = { }; ``` + + + + +```javascript {filename:gatsby-node.js} +const SentryPlugin = require('@sentry/webpack-plugin'); + +exports.onCreateWebpackConfig = ({ actions }) => { + actions.setWebpackConfig({ + plugins: [ + new SentryPlugin({ + include: 'public', + ignore: ['app-*', 'polyfill-*', 'framework-*', 'webpack-runtime-*'], + }), + ], + }); +}; +``` + + + + Learn more about further configuration of the plugin using our [Sentry Webpack Plugin documentation](https://github.com/getsentry/sentry-webpack-plugin). Additionally, you’ll need to configure the client to send the `release`: diff --git a/src/platforms/javascript/guides/gatsby/index.mdx b/src/platforms/javascript/guides/gatsby/index.mdx index 8989b60251687..63fd273f068ea 100644 --- a/src/platforms/javascript/guides/gatsby/index.mdx +++ b/src/platforms/javascript/guides/gatsby/index.mdx @@ -24,47 +24,86 @@ yarn add @sentry/gatsby ## Connecting the SDK to Sentry -Register the plugin in your Gatsby configuration file (typically `gatsby-config.js`). +You can configure the SDK in one of two ways discussed below - creating a configuration file, or defining the options along with the Gatsby configuration. If you define options in both places, the SDK will prioritize the init in the configuration file and ignore the options in the Gatsby configuration. + +### Sentry Configuration File + + + +The minimum version supporting the Sentry configuration file is `6.14.0`. + + + +Using a Sentry configuration file is the approach we recommend since it supports defining non-serializable options in the `init`. Note that you still need to include the plugin, even if you don't set any options. ```javascript {filename:gatsby-config.js} module.exports = { - // ... plugins: [ { resolve: "@sentry/gatsby", - options: { - dsn: "___PUBLIC_DSN___", - }, }, - // ... - ], + ] }; ``` -## Options +And configure your `Sentry.init`: + +```javascript {filename:sentry.config.js} +import * as Sentry from '@sentry/gatsby'; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + sampleRate: 1.0, // Adjust this value in production + beforeSend(event) { + // Modify the event here + if (event.user) { + // Don't send user's email address + delete event.user.email; + } + return event; + }, + // ... +}); +``` + +```typescript {filename:sentry.config.ts} +import * as Sentry from '@sentry/gatsby'; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + sampleRate: 1.0, // Adjust this value in production + beforeSend(event) { + // Modify the event here + if (event.user) { + // Don't send user's email address + delete event.user.email; + } + return event; + }, + // ... +}); +``` -The options field in the plugin configuration is passed directly to `Sentry.init`. Check our configuration docs for a [full list of the available options](configuration/options/). +### Gatsby Plugin Configuration -For example, the configuration below adjusts the `sampleRate` and `maxBreadcrumbs` options. +Another alternative is to define all the options in the Gatsby config. While it keeps the SDK options with the plugin definition, it doesn't support non-serializable options. ```javascript {filename:gatsby-config.js} module.exports = { - // ... - plugins: [ { resolve: "@sentry/gatsby", options: { dsn: "___PUBLIC_DSN___", - maxBreadcrumbs: 80, - sampleRate: 0.7, + sampleRate: 1.0, // Adjust this value in production + // Cannot set `beforeSend` }, }, - // ... - ], + + ] }; ``` -The Gatsby SDK will set certain options automatically based on environmental variables, but these can be overridden by setting custom options in the plugin configuration. +In this approach, the SDK sets some options automatically based on environmental variables, but these can be overridden by setting custom options. `environment` (string) From 4bbe45f5905d291efadc6ba4cb4e07b6262ec71e Mon Sep 17 00:00:00 2001 From: iker barriocanal <32816711+iker-barriocanal@users.noreply.github.com> Date: Wed, 3 Nov 2021 17:08:44 +0100 Subject: [PATCH 2/3] Link to Gatsby's plugin configuration options --- src/platforms/javascript/guides/gatsby/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platforms/javascript/guides/gatsby/index.mdx b/src/platforms/javascript/guides/gatsby/index.mdx index 63fd273f068ea..015f5f747b521 100644 --- a/src/platforms/javascript/guides/gatsby/index.mdx +++ b/src/platforms/javascript/guides/gatsby/index.mdx @@ -86,7 +86,7 @@ Sentry.init({ ### Gatsby Plugin Configuration -Another alternative is to define all the options in the Gatsby config. While it keeps the SDK options with the plugin definition, it doesn't support non-serializable options. +Another alternative is to use Gatsby's [plugin configuration options](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/using-a-plugin-in-your-site/#using-plugin-configuration-options). While it keeps the SDK options with the plugin definition, it doesn't support non-serializable options. ```javascript {filename:gatsby-config.js} module.exports = { From f3781e62d54549f768fccdcc27eee7fa7bf8bd51 Mon Sep 17 00:00:00 2001 From: iker barriocanal <32816711+iker-barriocanal@users.noreply.github.com> Date: Thu, 4 Nov 2021 10:23:17 +0100 Subject: [PATCH 3/3] Apply feedback Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com> --- src/platforms/javascript/guides/gatsby/index.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/platforms/javascript/guides/gatsby/index.mdx b/src/platforms/javascript/guides/gatsby/index.mdx index 015f5f747b521..927e004f5d0d9 100644 --- a/src/platforms/javascript/guides/gatsby/index.mdx +++ b/src/platforms/javascript/guides/gatsby/index.mdx @@ -24,7 +24,7 @@ yarn add @sentry/gatsby ## Connecting the SDK to Sentry -You can configure the SDK in one of two ways discussed below - creating a configuration file, or defining the options along with the Gatsby configuration. If you define options in both places, the SDK will prioritize the init in the configuration file and ignore the options in the Gatsby configuration. +You can configure the SDK in one of two ways discussed below: by creating a configuration file, or defining the options along with the Gatsby configuration. If you define options in both places, the SDK will prioritize the `init` in the configuration file and ignore the options in the Gatsby configuration. ### Sentry Configuration File @@ -46,7 +46,7 @@ module.exports = { }; ``` -And configure your `Sentry.init`: +Configure your `Sentry.init`: ```javascript {filename:sentry.config.js} import * as Sentry from '@sentry/gatsby'; @@ -86,7 +86,7 @@ Sentry.init({ ### Gatsby Plugin Configuration -Another alternative is to use Gatsby's [plugin configuration options](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/using-a-plugin-in-your-site/#using-plugin-configuration-options). While it keeps the SDK options with the plugin definition, it doesn't support non-serializable options. +Another alternative is to use Gatsby's [plugin configuration options](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/using-a-plugin-in-your-site/#using-plugin-configuration-options). While this keeps the SDK options with the plugin definition, it doesn't support non-serializable options. ```javascript {filename:gatsby-config.js} module.exports = { @@ -103,7 +103,7 @@ module.exports = { }; ``` -In this approach, the SDK sets some options automatically based on environmental variables, but these can be overridden by setting custom options. +With this approach, the SDK sets some options automatically based on environmental variables, but these can be overridden by setting custom options. `environment` (string)