build: Use Loader Script instead of @sentry/gatsby (#6885)

Author: mydea

gatsby-ssr.js

@@ -5,6 +5,9 @@ import React from 'react';
 
 import PageContext from '~src/components/pageContext';
 
+const sentryEnvironment = process.env.GATSBY_ENV || process.env.NODE_ENV || 'development';
+const sentryDsn = process.env.GATSBY_SENTRY_DSN;
+
 export const wrapPageElement = ({element, props: {pageContext}}) => (
   <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>
 );
@@ -29,7 +32,45 @@ export const onPreRenderHTML = ({getHeadComponents}) => {
   });
 };
 
+function SentryLoaderScript() {
+  return (
+    <script
+      key="sentry-loader-script"
+      src={`https://js.sentry-cdn.com/${sentryDsn}.min.js`}
+      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 (sentryDsn) {
+    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.0",
     "@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';
@@ -90,7 +91,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,9 +1,10 @@
 import React, {useEffect, useState} from 'react';
-import * as Sentry from '@sentry/gatsby';
 
 import {PageContext} from './basePage';
 import GuideGrid from './guideGrid';
 
+import {captureException} from '~src/utils';
+
 type Item = {
   items: Item[];
   title?: string;
@@ -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

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

src/globals.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import * as Sentry from '@sentry/gatsby';
 
 import Layout from '../components/layout';
 import SEO from '../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
+  }
+}

src/utils.ts

@@ -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"
         }
       ]
     }