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

This is quite the refactor, I recommend reading through the migration
docs to understand what the user facing API should be.

1. Remove deprecated SDK init via options

We used to initialize the SDK via Gatsby plugin options in the Gatsby
SDK. This is very restrictive though, and due to how Gatsby serializes
it's options can lead to bugs. Later on in v7 of the SDK we introduced a
`sentry.config.js` approach
([docs](https://docs.sentry.io/platforms/javascript/guides/gatsby/)).
This PR removes support for the plugin option deprecation.

- Remove automatic adding of `browserTracingIntegration`

Because of the plugin option initialization, we used to add
`browserTracingIntegration` integration automatically via SDK init. v8
removes this because of bundle size + we don't have good routing
instrumentation for gatsby.

- Upgrade gatsby webpack plugin to 2.0, and add option to configure it's
usage

resolves #9837 - I
called the option to control this `enableClientWebpackPlugin`.

Author: AbhiPrasad

Diff for: .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

Diff for: 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)

Diff for: 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'],
 };

Diff for: 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,
       },
     },
     // ...

Diff for: packages/gatsby/gatsby-browser.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) {

Diff for: packages/gatsby/gatsby-node.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',