Add sentry tracing to network requests

src/background/main.ts

@@ -6,8 +6,30 @@ import {
   registerContentScript,
   unregisterContentScriptIfExists,
 } from "./dynamic_content_scripts";
+import * as Sentry from "@sentry/browser";
 
 async function main(): Promise<void> {
+  Sentry.init({
+    // @ts-ignore SENTRY_DSN is populated by Webpack at build time
+    dsn: SENTRY_DSN,
+
+    // This enables automatic instrumentation (highly recommended),
+    // but is not necessary for purely manual usage
+    // If you only want to use custom instrumentation:
+    // * Remove the `BrowserTracing` integration
+    // * add `Sentry.addTracingExtensions()` above your Sentry.init() call
+    integrations: [
+      Sentry.browserTracingIntegration({
+        // disable automatic span creation
+        instrumentNavigation: false,
+        instrumentPageLoad: false,
+      }),
+    ],
+
+    // We recommend adjusting this value in production, or using tracesSampler
+    // for finer control
+    tracesSampleRate: 1.0,
+  });
   browser.runtime.onMessage.addListener(handleMessages);
 }
 
@@ -16,22 +38,24 @@ async function handleMessages(message: {
   payload: any;
   referrer?: string;
 }) {
-  switch (message.type) {
-    case MessageType.FETCH_COMMIT_REPORT:
-      return Codecov.fetchCommitReport(message.payload, message.referrer!);
-    case MessageType.FETCH_PR_COMPARISON:
-      return Codecov.fetchPRComparison(message.payload, message.referrer!);
-    case MessageType.FETCH_FLAGS_LIST:
-      return Codecov.listFlags(message.payload, message.referrer!);
-    case MessageType.FETCH_COMPONENTS_LIST:
-      return Codecov.listComponents(message.payload, message.referrer!);
-    case MessageType.CHECK_AUTH:
-      return Codecov.checkAuth(message.payload);
-    case MessageType.REGISTER_CONTENT_SCRIPTS:
-      return registerContentScript(message.payload);
-    case MessageType.UNREGISTER_CONTENT_SCRIPTS:
-      return unregisterContentScriptIfExists(message.payload);
-  }
+  Sentry.startSpan({ name: message.type }, async () => {
+    switch (message.type) {
+      case MessageType.FETCH_COMMIT_REPORT:
+        return Codecov.fetchCommitReport(message.payload, message.referrer!);
+      case MessageType.FETCH_PR_COMPARISON:
+        return Codecov.fetchPRComparison(message.payload, message.referrer!);
+      case MessageType.FETCH_FLAGS_LIST:
+        return Codecov.listFlags(message.payload, message.referrer!);
+      case MessageType.FETCH_COMPONENTS_LIST:
+        return Codecov.listComponents(message.payload, message.referrer!);
+      case MessageType.CHECK_AUTH:
+        return Codecov.checkAuth(message.payload);
+      case MessageType.REGISTER_CONTENT_SCRIPTS:
+        return registerContentScript(message.payload);
+      case MessageType.UNREGISTER_CONTENT_SCRIPTS:
+        return unregisterContentScriptIfExists(message.payload);
+    }
+  });
 }
 
 main().catch(console.log);

src/content/common/sentry.ts

@@ -4,19 +4,24 @@ import {
   getDefaultIntegrations,
   makeFetchTransport,
   Scope,
-} from '@sentry/browser';
+} from "@sentry/browser";
 
 // Sentry config
-// Browser extensions must initialize Sentry a bit differently to avoid 
+// Browser extensions must initialize Sentry a bit differently to avoid
 // conflicts between Sentry instances should the site the extension is running
 // on also use Sentry. Read more here:
 // https://docs.sentry.io/platforms/javascript/best-practices/browser-extensions/
 
-const sentryIntegrations = getDefaultIntegrations({}).filter(defaultIntegration => {
-  return !['BrowserApiErrors', 'TryCatch', 'Breadcrumbs', 'GlobalHandlers'].includes(
-    defaultIntegration.name
-  );
-});
+const sentryIntegrations = getDefaultIntegrations({}).filter(
+  (defaultIntegration) => {
+    return ![
+      "BrowserApiErrors",
+      "TryCatch",
+      "Breadcrumbs",
+      "GlobalHandlers",
+    ].includes(defaultIntegration.name);
+  }
+);
 
 const sentryClient = new BrowserClient({
   // @ts-ignore SENTRY_DSN is populated by Webpack at build time
@@ -30,4 +35,4 @@ const Sentry = new Scope();
 Sentry.setClient(sentryClient);
 sentryClient.init();
 
-export default Sentry
+export default Sentry;

src/content/github/file/main.tsx

@@ -35,7 +35,7 @@ import {
 } from "../common/fetchers";
 import { print } from "src/utils";
 import { isFileUrl } from "../common/utils";
-import Sentry from '../../common/sentry';
+import Sentry from "../../common/sentry";
 
 const globals: {
   coverageReport?: FileCoverageReport;
@@ -47,7 +47,7 @@ const globals: {
   prompt?: HTMLElement;
 } = {};
 
-init()
+init();
 
 function init(): Promise<void> {
   // this event discovered by "reverse-engineering GitHub"
@@ -73,10 +73,10 @@ async function main(): Promise<void> {
 
     globals.coverageButton = createCoverageButton();
 
-    process(metadata)
+    process(metadata);
   } catch (e) {
-    Sentry.captureException(e)
-    throw e
+    Sentry.captureException(e);
+    throw e;
   }
 }
 
@@ -111,17 +111,16 @@ async function process(metadata: FileMetadata): Promise<void> {
       previousElement: globals.coverageButton!,
       selectedOptions: selectedFlags,
       onClick: handleFlagClick,
-    })
-      .then(({ button, list }) => {
-        globals.flagsButton = button;
-        globals.flagsDrop = new Drop({
-          target: button,
-          content: list,
-          classes: "drop-theme-arrows codecov-z1 codecov-bg-white",
-          position: "bottom right",
-          openOn: "click",
-        });
-      })
+    }).then(({ button, list }) => {
+      globals.flagsButton = button;
+      globals.flagsDrop = new Drop({
+        target: button,
+        content: list,
+        classes: "drop-theme-arrows codecov-z1 codecov-bg-white",
+        position: "bottom right",
+        openOn: "click",
+      });
+    });
   }
 
   const components = await getComponents(metadata);
@@ -151,17 +150,16 @@ async function process(metadata: FileMetadata): Promise<void> {
       previousElement: globals.coverageButton!,
       onClick: handleComponentClick,
       selectedOptions: selectedComponents,
-    })
-      .then(({ button, list }) => {
-        globals.componentsButton = button;
-        globals.componentsDrop = new Drop({
-          target: button,
-          content: list,
-          classes: "drop-theme-arrows codecov-z1 codecov-bg-white",
-          position: "bottom right",
-          openOn: "click",
-        });
-      })
+    }).then(({ button, list }) => {
+      globals.componentsButton = button;
+      globals.componentsDrop = new Drop({
+        target: button,
+        content: list,
+        classes: "drop-theme-arrows codecov-z1 codecov-bg-white",
+        position: "bottom right",
+        openOn: "click",
+      });
+    });
   }
 
   let coverageReportResponses: Array<FileCoverageReportResponse>;
@@ -241,7 +239,9 @@ async function promptPastReport(metadata: FileMetadata): Promise<void> {
   const matches = regexp.exec(response.commit_file_url);
   const commit = matches?.groups?.commit;
   if (!commit) {
-    throw new Error("Could not parse commit hash from response for past coverage report")
+    throw new Error(
+      "Could not parse commit hash from response for past coverage report"
+    );
   }
   const link = document.URL.replace(
     `blob/${metadata.branch}`,
@@ -260,7 +260,7 @@ function createPrompt(child: any) {
   const ref = document.querySelector('[data-testid="latest-commit"]')
     ?.parentElement?.parentElement;
   if (!ref) {
-    throw new Error("Could not find reference element to render prompt")
+    throw new Error("Could not find reference element to render prompt");
   }
   const prompt = <div className="codecov-mb2 codecov-mx1">{child}</div>;
   return ref.insertAdjacentElement("afterend", prompt) as HTMLElement;

webpack/webpack.common.js

@@ -50,7 +50,7 @@ module.exports = {
       browser: "webextensions-polyfill",
     }),
     new DefinePlugin({
-      SENTRY_DSN: process.env.SENTRY_DSN
-    })
+      SENTRY_DSN: JSON.stringify(process.env.SENTRY_DSN),
+    }),
   ],
 };