ref: Use JS SDK loader (undoing #6916)

gatsby-ssr.js

@@ -2,8 +2,12 @@
 /* eslint import/no-nodejs-modules:0 */
 
 import React from 'react';
+
 import PageContext from 'sentry-docs/components/pageContext';
 
+const sentryEnvironment = process.env.GATSBY_ENV || process.env.NODE_ENV || 'development';
+const sentryLoaderUrl = process.env.SENTRY_LOADER_URL;
+
 export const wrapPageElement = ({element, props: {pageContext}}) => (
   <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>
 );
@@ -28,7 +32,41 @@ export const onPreRenderHTML = ({getHeadComponents}) => {
   });
 };
 
+function SentryLoaderScript() {
+  return (
+    <script key="sentry-loader-script" src={sentryLoaderUrl} crossOrigin="anonymous" />
+  );
+}
+
+function SentryLoaderConfig() {
+  return (
+    <script
+      key="sentry-loader-config"
+      dangerouslySetInnerHTML={{
+        __html: `
+Sentry.onLoad(function() {
+  Sentry.init({
+    integrations: [
+      new Sentry.Replay({
+        unmask: ['.hover-card-link'],
+      }),
+    ],
+    tracesSampleRate: ${sentryEnvironment === 'development' ? 0 : 1},
+    replaysSessionSampleRate: ${sentryEnvironment === 'development' ? 0 : 0.1},
+    replaysOnErrorSampleRate: ${sentryEnvironment === 'development' ? 0 : 1},
+  });
+});`,
+      }}
+    />
+  );
+}
+
 export const onRenderBody = ({setHeadComponents}) => {
+  // Sentry SDK setup
+  if (sentryLoaderUrl) {
+    setHeadComponents([SentryLoaderScript(), SentryLoaderConfig()]);
+  }
+
   setHeadComponents([
     // Set up the data layer, enable privacy defaults
     <script

package.json

@@ -17,7 +17,7 @@
     "@mdx-js/mdx": "^1.6.18",
     "@mdx-js/react": "^1.6.18",
     "@sentry-internal/global-search": "^0.5.7",
-    "@sentry/gatsby": "^7.46.0",
+    "@sentry/browser": "7.51.2",
     "@sentry/webpack-plugin": "^1.20.0",
     "@types/dompurify": "^3.0.2",
     "@types/node": "^12",

src/components/basePage.tsx

@@ -1,5 +1,6 @@
 import React, {useRef} from 'react';
-import * as Sentry from '@sentry/gatsby';
+
+import {getCurrentTransaction} from '../utils';
 
 import Banner from './banner';
 import CodeContext, {useCodeContextState} from './codeContext';
@@ -56,7 +57,7 @@ export default function BasePage({
   children,
   prependToc,
 }: Props): JSX.Element {
-  const tx = Sentry.getCurrentHub().getScope().getTransaction();
+  const tx = getCurrentTransaction();
   if (tx) {
     tx.setStatus('ok');
   }

src/components/tableOfContents.tsx

@@ -1,5 +1,6 @@
 import React, {useEffect, useState} from 'react';
-import * as Sentry from '@sentry/gatsby';
+
+import {captureException} from '../utils';
 
 import {PageContext} from './basePage';
 import GuideGrid from './guideGrid';
@@ -85,7 +86,7 @@ export default function TableOfContents({contentRef, pageContext}: Props) {
       try {
         setItems(getHeadings(contentRef.current));
       } catch (err) {
-        Sentry.captureException(err);
+        captureException(err);
         setItems([]);
       }
     }

src/gatsby/config.ts

@@ -86,9 +86,6 @@ const getPlugins = () => {
   ].filter(Boolean);
 
   const plugins = [
-    {
-      resolve: '@sentry/gatsby',
-    },
     'gatsby-plugin-sharp',
     'gatsby-plugin-sass',
     'gatsby-plugin-zeit-now',

src/gatsby/onCreateWebpackConfig.ts

@@ -6,7 +6,7 @@ import path from 'path';
 import SentryWebpackPlugin from '@sentry/webpack-plugin';
 
 const getPlugins = reporter => {
-  const authToken = process.env.SENTRY_AUTH_TOKEN;
+  const authToken = process.env.SENTRY_WEBPACK_PLUGIN_AUTH_TOKEN;
   if (!authToken) {
     reporter.warn('SENTRY_AUTH_TOKEN is not set - will not upload source maps');
     return [];

src/globals.d.ts

@@ -0,0 +1,7 @@
+import * as Sentry from '@sentry/browser';
+
+declare global {
+  interface Window {
+    Sentry: typeof Sentry;
+  }
+}

src/pages/404.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import * as Sentry from '@sentry/gatsby';
 
 import Layout from 'sentry-docs/components/layout';
 import SEO from 'sentry-docs/components/seo';
 
+import {getCurrentTransaction} from '../utils';
+
 function NotFoundPage() {
-  const tx = Sentry.getCurrentHub().getScope().getTransaction();
+  const tx = getCurrentTransaction();
   if (tx) {
     tx.setStatus('not_found');
   }

src/utils.ts

@@ -1,4 +1,5 @@
 import {useEffect} from 'react';
+import type {Transaction} from '@sentry/browser';
 import qs from 'query-string';
 
 type ClickOutsideCallback = (event: MouseEvent) => void;
@@ -81,3 +82,23 @@ export const marketingUrlParams = (): URLQueryObject => {
 
   return marketingParams;
 };
+
+export function getCurrentTransaction(): Transaction | undefined {
+  try {
+    // getCurrentHub() can actually return undefined, as we are using the Loader Script
+    // so we guard defensively against all of these existing.
+    return window.Sentry.getCurrentHub().getScope().getTransaction();
+  } catch {
+    return undefined;
+  }
+}
+
+export function captureException(exception: unknown): void {
+  try {
+    // Sentry may not be available, as we are using the Loader Script
+    // so we guard defensively against all of these existing.
+    window.Sentry.captureException(exception);
+  } catch {
+    // ignore
+  }
+}

vercel.json

@@ -17,7 +17,7 @@
         },
         {
           "key": "Content-Security-Policy-Report-Only",
-          "value": "upgrade-insecure-requests; default-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval' googleads.g.doubleclick.net m.servedby-buysellads.com www.googletagmanager.com www.google-analytics.com; connect-src 'self' o1.ingest.sentry.io sentry.io adservice.google.com *.algolia.net *.algolianet.com *.algolia.io *.google-analytics.com analytics.google.com region1.analytics.google.com reload.getsentry.net stats.g.doubleclick.net vitals.vercel-analytics.com; img-src * 'self' data: www.google.com www.google-analytics.com www.googletagmanager.com; style-src 'self' 'unsafe-inline'; font-src 'self' fonts.gstatic.com; worker-src blob:; report-uri https://sentry.io/api/1297620/security/?sentry_key=b3cfba5788cb4c138f855c8120f70eab"
+          "value": "upgrade-insecure-requests; default-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.sentry-cdn.com googleads.g.doubleclick.net m.servedby-buysellads.com www.googletagmanager.com www.google-analytics.com; connect-src 'self' *.sentry.io sentry.io adservice.google.com *.algolia.net *.algolianet.com *.algolia.io *.google-analytics.com analytics.google.com region1.analytics.google.com reload.getsentry.net stats.g.doubleclick.net vitals.vercel-analytics.com; img-src * 'self' data: www.google.com www.google-analytics.com www.googletagmanager.com; style-src 'self' 'unsafe-inline'; font-src 'self' fonts.gstatic.com; worker-src blob:; report-uri https://sentry.io/api/1297620/security/?sentry_key=b3cfba5788cb4c138f855c8120f70eab"
         }
       ]
     }

yarn.lock

@@ -2443,29 +2443,29 @@
     htmlparser2 "^4.1.0"
     title-case "^3.0.2"
 
-"@sentry-internal/tracing@7.46.0":
-  version "7.46.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.46.0.tgz#26febabe21a2c2cab45a3de75809d88753ec07eb"
-  integrity sha512-KYoppa7PPL8Er7bdPoxTNUfIY804JL7hhOEomQHYD22rLynwQ4AaLm3YEY75QWwcGb0B7ZDMV+tSumW7Rxuwuw==
-  dependencies:
-    "@sentry/core" "7.46.0"
-    "@sentry/types" "7.46.0"
-    "@sentry/utils" "7.46.0"
+"@sentry-internal/tracing@7.51.2":
+  version "7.51.2"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.51.2.tgz#17833047646426ca71445327018ffcb33506a699"
+  integrity sha512-OBNZn7C4CyocmlSMUPfkY9ORgab346vTHu5kX35PgW5XR51VD2nO5iJCFbyFcsmmRWyCJcZzwMNARouc2V4V8A==
+  dependencies:
+    "@sentry/core" "7.51.2"
+    "@sentry/types" "7.51.2"
+    "@sentry/utils" "7.51.2"
     tslib "^1.9.3"
 
-"@sentry/browser@7.46.0":
-  version "7.46.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.46.0.tgz#27b291ddd3c61cc1073cbbb5c48c450b438ed83c"
-  integrity sha512-4rX9hKPjxzfH5LhZzO5DlS5NXQ8qZg2ibepaqEgcDHrpYh5813mjjnE4OQA8wiZ6WuG3xKFgHBrGeliD5jXz9w==
+"@sentry/browser@7.51.2":
+  version "7.51.2"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.51.2.tgz#c01758a54c613be45df58ab503805737256f51a4"
+  integrity sha512-FQFEaTFbvYHPQE2emFjNoGSy+jXplwzoM/XEUBRjrGo62lf8BhMvWnPeG3H3UWPgrWA1mq0amvHRwXUkwofk0g==
   dependencies:
-    "@sentry-internal/tracing" "7.46.0"
-    "@sentry/core" "7.46.0"
-    "@sentry/replay" "7.46.0"
-    "@sentry/types" "7.46.0"
-    "@sentry/utils" "7.46.0"
+    "@sentry-internal/tracing" "7.51.2"
+    "@sentry/core" "7.51.2"
+    "@sentry/replay" "7.51.2"
+    "@sentry/types" "7.51.2"
+    "@sentry/utils" "7.51.2"
     tslib "^1.9.3"
 
-"@sentry/cli@^1.74.4", "@sentry/cli@^1.74.6":
+"@sentry/cli@^1.74.6":
   version "1.75.0"
   resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-1.75.0.tgz#4a5e71b5619cd4e9e6238cc77857c66f6b38d86a"
   integrity sha512-vT8NurHy00GcN8dNqur4CMIYvFH3PaKdkX3qllVvi4syybKqjwoz+aWRCvprbYv0knweneFkLt1SmBWqazUMfA==
@@ -2477,66 +2477,37 @@
     proxy-from-env "^1.1.0"
     which "^2.0.2"
 
-"@sentry/core@7.46.0":
-  version "7.46.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.46.0.tgz#f377e556d8679f29bde1cce15b1682b6c689d6b7"
-  integrity sha512-BnNHGh/ZTztqQedFko7vb2u6yLs/kWesOQNivav32ZbsEpVCjcmG1gOJXh2YmGIvj3jXOC9a4xfIuh+lYFcA6A==
+"@sentry/core@7.51.2":
+  version "7.51.2"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.51.2.tgz#f2c938de334f9bf26f4416079168275832423964"
+  integrity sha512-p8ZiSBxpKe+rkXDMEcgmdoyIHM/1bhpINLZUFPiFH8vzomEr7sgnwRhyrU8y/ADnkPeNg/2YF3QpDpk0OgZJUA==
   dependencies:
-    "@sentry/types" "7.46.0"
-    "@sentry/utils" "7.46.0"
+    "@sentry/types" "7.51.2"
+    "@sentry/utils" "7.51.2"
     tslib "^1.9.3"
 
-"@sentry/gatsby@^7.46.0":
-  version "7.46.0"
-  resolved "https://registry.yarnpkg.com/@sentry/gatsby/-/gatsby-7.46.0.tgz#09f495ca1c8b6a9fbbb2d37ac4fad754a42d4cc8"
-  integrity sha512-Ek8PN8v3zdeBQxeftzHXbZAAj4YcFk0PjxiTQA/pACHYG8uI5XuPgNjVNS2u+7kZd3gDYl4rTIypv+ztUNLMYg==
-  dependencies:
-    "@sentry/core" "7.46.0"
-    "@sentry/react" "7.46.0"
-    "@sentry/types" "7.46.0"
-    "@sentry/utils" "7.46.0"
-    "@sentry/webpack-plugin" "1.19.0"
-
-"@sentry/[email protected]":
-  version "7.46.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.46.0.tgz#865dbbf6d145cab1a165c573e425190a3f7d9e0c"
-  integrity sha512-4U7gZ5XwzCgIAH00SJe2MEjJfZq1vB4M7/YYFTjfo5geVux/c+54xgVCxZiQpCaLJBJ5NoB9Fi47RrHbxauTGA==
-  dependencies:
-    "@sentry/browser" "7.46.0"
-    "@sentry/types" "7.46.0"
-    "@sentry/utils" "7.46.0"
-    hoist-non-react-statics "^3.3.2"
-    tslib "^1.9.3"
-
-"@sentry/[email protected]":
-  version "7.46.0"
-  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.46.0.tgz#c5e595d0c2d8d4db2c95d68f518510c42eb122a3"
-  integrity sha512-rHsAFdeEu47JRy6mEwwN+M+zTTWlOFWw9sR/eDCvik2lxAXBN2mXvf/N/MN9zQB3+QnS13ke+SvwVW7CshLOXg==
+"@sentry/[email protected]":
+  version "7.51.2"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.51.2.tgz#1f54e92b472ab87dfdb4e8cd6b8c8252600fe7b0"
+  integrity sha512-W8YnSxkK9LTUXDaYciM7Hn87u57AX9qvH8jGcxZZnvpKqHlDXOpSV8LRtBkARsTwgLgswROImSifY0ic0lyCWg==
   dependencies:
-    "@sentry/core" "7.46.0"
-    "@sentry/types" "7.46.0"
-    "@sentry/utils" "7.46.0"
+    "@sentry/core" "7.51.2"
+    "@sentry/types" "7.51.2"
+    "@sentry/utils" "7.51.2"
 
-"@sentry/types@7.46.0":
-  version "7.46.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.46.0.tgz#8573ba8676342c594fcfefff4552123278cfec51"
-  integrity sha512-2FMEMgt2h6u7AoELhNhu9L54GAh67KKfK2pJ1kEXJHmWxM9FSCkizjLs/t+49xtY7jEXr8qYq8bV967VfDPQ9g==
+"@sentry/types@7.51.2":
+  version "7.51.2"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.51.2.tgz#cb742f374d9549195f62c462c915adeafed31d65"
+  integrity sha512-/hLnZVrcK7G5BQoD/60u9Qak8c9AvwV8za8TtYPJDUeW59GrqnqOkFji7RVhI7oH1OX4iBxV+9pAKzfYE6A6SA==
 
-"@sentry/utils@7.46.0":
-  version "7.46.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.46.0.tgz#7a713724db3d1c8bc0aef6d19a7fe2c76db0bdf2"
-  integrity sha512-elRezDAF84guMG0OVIIZEWm6wUpgbda4HGks98CFnPsrnMm3N1bdBI9XdlxYLtf+ir5KsGR5YlEIf/a0kRUwAQ==
+"@sentry/utils@7.51.2":
+  version "7.51.2"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.51.2.tgz#2a52ac2cfb00ffd128248981279c0a561b39eccb"
+  integrity sha512-EcjBU7qG4IG+DpIPvdgIBcdIofROMawKoRUNKraeKzH/waEYH9DzCaqp/mzc5/rPBhpDB4BShX9xDDSeH+8c0A==
   dependencies:
-    "@sentry/types" "7.46.0"
+    "@sentry/types" "7.51.2"
     tslib "^1.9.3"
 
-"@sentry/[email protected]":
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/@sentry/webpack-plugin/-/webpack-plugin-1.19.0.tgz#2b134318f1552ba7f3e3f9c83c71a202095f7a44"
-  integrity sha512-qSpdgdGMtdzagGveSWgo2b+t8PdPUscuOjbOyWCsJme9jlTFnNk0rX7JEA55OUozikKHM/+vVh08USLBnPboZw==
-  dependencies:
-    "@sentry/cli" "^1.74.4"
-
 "@sentry/webpack-plugin@^1.20.0":
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/@sentry/webpack-plugin/-/webpack-plugin-1.20.0.tgz#e7add76122708fb6b4ee7951294b521019720e58"
@@ -8970,13 +8941,6 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
-  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
-  dependencies:
-    react-is "^16.7.0"
-
 hosted-git-info@^2.1.4, hosted-git-info@^2.5.0:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -13326,7 +13290,7 @@ react-input-autosize@^2.2.2:
   dependencies:
     prop-types "^15.5.8"
 
-react-is@^16.12.0, react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.6:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.3.2, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==