feat(v8/gatsby): Update SDK initialization for gatsby

.gitignore

@@ -57,5 +57,4 @@ packages/deno/build-test
 packages/deno/lib.deno.d.ts
 
 # gatsby
-packages/gatsby/gatsby-browser.d.ts
 packages/gatsby/gatsby-node.d.ts

MIGRATION.md

@@ -39,7 +39,9 @@ New minimum supported browsers:
 
 For IE11 support please transpile your code to ES5 using babel or similar and add required polyfills.
 
-**React**: We no longer support React 15 in version 8 of the React SDK.
+**React**: The Next.js SDK now supports React 16+
+
+**Next.js**: The Next.js SDK now supports Next.js 13.2.0+
 
 ## 2. Package removal
 
@@ -979,6 +981,118 @@ const config = {
 export default withSentryConfig(config);
 ```
 
+### Gatsby SDK
+
+#### Removal of Gatsby Initialization via plugin options
+
+In v8, we are removing the ability to initialize the Gatsby SDK via plugin options. Instead, you should create a
+`sentry.config.js` file in the root of your project and initialize the SDK there.
+
+```js
+// v7 - gatsby-config.js
+module.exports = {
+  // ...
+  plugins: [
+    {
+      resolve: '@sentry/gatsby',
+      options: {
+        dsn: process.env.SENTRY_DSN,
+      },
+    },
+    // ...
+  ],
+};
+```
+
+```js
+// v8 - gatsby-config.js
+module.exports = {
+  // ...
+  plugins: [
+    {
+      resolve: '@sentry/gatsby',
+    },
+    // ...
+  ],
+};
+
+// v8 - sentry.config.js
+import * as Sentry from '@sentry/gatsby';
+
+Sentry.init({
+  dsn: '__PUBLIC_DSN__',
+});
+```
+
+We've also added `enableClientWebpackPlugin` which allows you to enable or disable the `@sentry/webpack-plugin` in the
+client-side build. By default, it is enabled.
+
+```js
+// v8 - gatsby-config.js
+module.exports = {
+  // ...
+  plugins: [
+    {
+      resolve: '@sentry/gatsby',
+      options: {
+        enableClientWebpackPlugin: false,
+      },
+    },
+    // ...
+  ],
+};
+```
+
+#### Automatic adding of `browserTracingIntegration` for Gatsby
+
+The Gatsby SDK no longer adds the `browserTracingIntegration` automatically. If you want to enable tracing in the
+browser, you need to add it manually. Make sure to also configured a `tracePropagationTargets` value.
+
+```js
+// v7 - gatsby-config.js
+module.exports = {
+  // ...
+  plugins: [
+    {
+      resolve: '@sentry/gatsby',
+      options: {
+        tracesSampleRate: 1.0,
+      },
+    },
+    // ...
+  ],
+};
+```
+
+```js
+// v8 - gatsby-config.js
+module.exports = {
+  // ...
+  plugins: [
+    {
+      resolve: '@sentry/gatsby',
+    },
+    // ...
+  ],
+};
+
+// v8 - sentry.config.js
+import * as Sentry from '@sentry/gatsby';
+
+Sentry.init({
+  dsn: '__PUBLIC_DSN__',
+  integrations: [Sentry.browserTracingIntegration()],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+
+  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
+});
+```
+
 ## 5. Behaviour Changes
 
 - [Updated behaviour of `tracePropagationTargets` in the browser](./MIGRATION.md#updated-behaviour-of-tracepropagationtargets-in-the-browser-http-tracing-headers--cors)

packages/gatsby/.eslintrc.js

@@ -7,24 +7,14 @@ module.exports = {
     jsx: true,
   },
   // ignore these because they're not covered by a `tsconfig`, which makes eslint throw an error
-  ignorePatterns: ['gatsby-browser.d.ts', 'gatsby-node.d.ts'],
+  ignorePatterns: ['gatsby-node.d.ts'],
   overrides: [
     {
       files: ['scripts/**/*.ts'],
       parserOptions: {
         project: ['../../tsconfig.dev.json'],
       },
     },
-    {
-      files: ['./gatsby-browser.js'],
-      env: {
-        browser: true,
-        node: false,
-      },
-      parserOptions: {
-        sourceType: 'module',
-      },
-    },
   ],
   extends: ['../../.eslintrc.js'],
 };

packages/gatsby/README.md

@@ -6,7 +6,7 @@
 
 # Official Sentry SDK for GatsbyJS
 
-Register the package as a plugin in `gatsby-config.js`:
+First register the package as a plugin in `gatsby-config.js`:
 
 ```javascript
 module.exports = {
@@ -23,66 +23,32 @@ module.exports = {
 };
 ```
 
-Options will be passed directly to `Sentry.init`. See all available options in
-[our docs](https://docs.sentry.io/error-reporting/configuration/?platform=javascript). The `environment` value defaults
-to `NODE_ENV` (or `'development'` if `NODE_ENV` is not set).
-
-## GitHub Actions
-
-The `release` value is inferred from `GITHUB_SHA`.
-
-## Netlify
-
-The `release` value is inferred from `COMMIT_REF`.
-
-## Vercel
-
-To automatically capture the `release` value on Vercel you will need to register appropriate
-[system environment variable](https://vercel.com/docs/v2/build-step#system-environment-variables) (e.g.
-`VERCEL_GITHUB_COMMIT_SHA`) in your project.
-
-## Sentry Performance
-
-To enable tracing, supply either `tracesSampleRate` or `tracesSampler` to the options. This will turn on the
-`BrowserTracing` integration for automatic instrumentation of pageloads and navigations.
+Then configure your `Sentry.init` call:
 
 ```javascript
-module.exports = {
-  // ...
-  plugins: [
-    {
-      resolve: '@sentry/gatsby',
-      options: {
-        dsn: process.env.SENTRY_DSN, // this is the default
+import * as Sentry from '@sentry/gatsby';
 
-        // A rate of 1 means all traces will be sent, so it's good for testing.
-        // In production, you'll likely want to either choose a lower rate or use `tracesSampler` instead (see below).
-        tracesSampleRate: 1,
+Sentry.init({
+  dsn: '__PUBLIC_DSN__',
+  integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
 
-        // Alternatively:
-        tracesSampler: samplingContext => {
-          // Examine provided context data (along with anything in the global namespace) to decide the sample rate
-          // for this transaction.
-          // Can return 0 to drop the transaction entirely.
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
 
-          if ('...') {
-            return 0.5; // These are important - take a big sample
-          } else if ('...') {
-            return 0.01; // These are less important or happen much more frequently - only take 1% of them
-          } else if ('...') {
-            return 0; // These aren't something worth tracking - drop all transactions like this
-          } else {
-            return 0.1; // Default sample rate
-          }
-        },
-      },
-    },
-    // ...
-  ],
-};
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+
+  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
+});
 ```
 
-If you want to supply options to the `BrowserTracing` integration, use the `browserTracingOptions` parameter.
+The Gatsby SDK also automatically sets up sourcemaps uploading for you. To disable this functionality, set the
+`enableClientWebpackPlugin` option to be `false`.
 
 ```javascript
 module.exports = {
@@ -91,12 +57,7 @@ module.exports = {
     {
       resolve: '@sentry/gatsby',
       options: {
-        dsn: process.env.SENTRY_DSN, // this is the default
-        tracesSampleRate: 1, // or tracesSampler (see above)
-        browserTracingOptions: {
-          // disable creating spans for XHR requests
-          traceXHR: false,
-        },
+        enableClientWebpackPlugin: false,
       },
     },
     // ...

packages/gatsby/gatsby-node.js

@@ -1,48 +1,25 @@
 const fs = require('fs');
 
-const SentryWebpackPlugin = require('@sentry/webpack-plugin');
+const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
 
-const sentryRelease = JSON.stringify(
-  // Always read first as Sentry takes this as precedence
-  process.env.SENTRY_RELEASE ||
-    // GitHub Actions - https://help.github.com/en/actions/configuring-and-managing-workflows/using-environment-variables#default-environment-variables
-    process.env.GITHUB_SHA ||
-    // Netlify - https://docs.netlify.com/configure-builds/environment-variables/#build-metadata
-    process.env.COMMIT_REF ||
-    // Vercel - https://vercel.com/docs/v2/build-step#system-environment-variables
-    process.env.VERCEL_GIT_COMMIT_SHA ||
-    // Zeit (now known as Vercel)
-    process.env.ZEIT_GITHUB_COMMIT_SHA ||
-    process.env.ZEIT_GITLAB_COMMIT_SHA ||
-    process.env.ZEIT_BITBUCKET_COMMIT_SHA ||
-    undefined,
-);
-
-const sentryDsn = JSON.stringify(process.env.SENTRY_DSN || '');
 const SENTRY_USER_CONFIG = ['./sentry.config.js', './sentry.config.ts'];
 
-exports.onCreateWebpackConfig = ({ plugins, getConfig, actions }) => {
-  actions.setWebpackConfig({
-    plugins: [
-      plugins.define({
-        __SENTRY_RELEASE__: sentryRelease,
-        __SENTRY_DSN__: sentryDsn,
-      }),
-    ],
-  });
-
-  if (process.env.NODE_ENV === 'production') {
+exports.onCreateWebpackConfig = ({ getConfig, actions }, options) => {
+  const enableClientWebpackPlugin = options.enableClientWebpackPlugin !== false;
+  if (process.env.NODE_ENV === 'production' && enableClientWebpackPlugin) {
     actions.setWebpackConfig({
       plugins: [
-        new SentryWebpackPlugin({
-          // Only include files from the build output directory
-          include: 'public',
-          // Ignore files that aren't users' source code related
-          ignore: [
-            'polyfill-*', // related to polyfills
-            'framework-*', // related to the frameworks (e.g. React)
-            'webpack-runtime-*', // related to Webpack
-          ],
+        sentryWebpackPlugin({
+          sourcemaps: {
+            // Only include files from the build output directory
+            assets: ['public'],
+            // Ignore files that aren't users' source code related
+            ignore: [
+              'polyfill-*', // related to polyfills
+              'framework-*', // related to the frameworks (e.g. React)
+              'webpack-runtime-*', // related to Webpack
+            ],
+          },
           // Handle sentry-cli configuration errors when the user has not done it not to break
           // the build.
           errorHandler(err, invokeErr) {

packages/gatsby/jest.config.js

@@ -2,7 +2,6 @@ const baseConfig = require('../../jest/jest.config.js');
 
 module.exports = {
   ...baseConfig,
-  setupFiles: ['<rootDir>/test/setEnvVars.ts'],
   testEnvironment: 'jsdom',
   transform: {
     '^.+\\.js$': 'ts-jest',