ref: Use JS SDK loader (undoing #6916) (#6949)

Author: Luca Forstner

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",

sentry.config.js

@@ -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/basePage.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/components/tableOfContents.tsx

@@ -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/config.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/gatsby/onCreateWebpackConfig.ts

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

src/globals.d.ts

@@ -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/pages/404.js

@@ -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
+  }
+}