fix: Make APM optional in gatsby package

Author: AbhiPrasad

CHANGELOG.md

@@ -5,6 +5,7 @@
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 - [react] feat: Export `createReduxEnhancer` to log redux actions as breadcrumbs, and attach state as an extra. (#2717)
 - [tracing] feat: `Add @sentry/tracing` (#2719)
+- [gatsby] fix: Make APM optional in gatsby package
 
 ## 5.19.2
 

packages/gatsby/README.md

@@ -24,7 +24,7 @@ Register the package as a plugin in `gastby-config.js`:
 }
 ```
 
-Options will be passed directly to `Sentry.init`. The `environment` value defaults to `NODE_ENV` (or `development` if not set).
+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 not set).
 
 ## GitHub Actions
 
@@ -38,6 +38,26 @@ The `release` value is inferred from `COMMIT_REF`.
 
 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 support, supply the `tracesSampleRate` to the options and make sure you have installed the `@sentry/tracing` package.
+
+```javascript
+{
+  // ...
+  plugins: [
+    {
+      resolve: "@sentry/gatsby",
+      options: {
+          dsn: process.env.SENTRY_DSN, // this is the default
+          tracesSampleRate: 1, // this is just to test, you should lower this in production
+      }
+    },
+    // ...
+  ]
+}
+```
+
 ## Links
 
 - [Official SDK Docs](https://docs.sentry.io/quickstart/)

packages/gatsby/gatsby-browser.js

@@ -1,12 +1,28 @@
 exports.onClientEntry = function(_, pluginParams) {
-  require.ensure(['@sentry/react', '@sentry/apm'], function(require) {
+  require.ensure(['@sentry/react'], function(require) {
     const Sentry = require('@sentry/react');
-    const TracingIntegration = require('@sentry/apm').Integrations.Tracing;
+
+    let TracingIntegration = undefined;
+    let BrowserTracingIntegration = undefined;
+    try {
+      BrowserTracingIntegration = require('@sentry/tracing').Integrations.BrowserTracing;
+    } catch (_) {}
+    try {
+      /** @deprecated Remove when @sentry/apm is no longer used */
+      TracingIntegration = require('@sentry/apm').Integrations.Tracing;
+    } catch (_) {}
+
     const tracesSampleRate = pluginParams.tracesSampleRate !== undefined ? pluginParams.tracesSampleRate : 0;
     const integrations = [...(pluginParams.integrations || [])];
+
     if (tracesSampleRate) {
-      integrations.push(new TracingIntegration());
+      if (BrowserTracingIntegration) {
+        integrations.push(new BrowserTracingIntegration());
+      } else if (TracingIntegration) {
+        integrations.push(new TracingIntegration());
+      }
     }
+
     Sentry.init({
       environment: process.env.NODE_ENV || 'development',
       release: __SENTRY_RELEASE__,
@@ -15,6 +31,7 @@ exports.onClientEntry = function(_, pluginParams) {
       tracesSampleRate,
       integrations,
     });
+
     Sentry.addGlobalEventProcessor(event => {
       event.sdk = {
         ...event.sdk,