chore: always init sentry, dont send in dev mode, add debug logs to sentry

Author: Miodec

frontend/src/ts/index.ts

@@ -57,6 +57,7 @@ function addToGlobal(items: Record<string, unknown>): void {
 void loadFromLocalStorage();
 void VersionButton.update();
 Focus.set(true, true);
+Sentry.init();
 
 addToGlobal({
   snapshot: DB.getSnapshot,
@@ -70,6 +71,7 @@ addToGlobal({
   toggleUnsmoothedRaw: Result.toggleUnsmoothedRaw,
   egVideoListener: egVideoListener,
   toggleDebugLogs: Logger.toggleDebugLogs,
+  toggleSentryDebug: Sentry.toggleDebug,
 });
 
 if (isDevEnvironment()) {
@@ -79,6 +81,4 @@ if (isDevEnvironment()) {
   void getDevOptionsModal().then((module) => {
     module.appendButton();
   });
-} else {
-  Sentry.init();
 }

frontend/src/ts/sentry.ts

@@ -1,13 +1,16 @@
 import * as Sentry from "@sentry/browser";
 import { envConfig } from "./constants/env-config";
 
+let debug = false;
+
 export function init(): void {
   Sentry.init({
     release: envConfig.clientVersion,
     dsn: "https://f50c25dc9dd75304a63776063896a39b@o4509236448133120.ingest.us.sentry.io/4509237217394688",
     // Setting this option to true will send default PII data to Sentry.
     // For example, automatic IP address collection on events
     sendDefaultPii: true,
+    environment: envConfig.isDevelopment ? "development" : "production",
     integrations: [
       Sentry.browserTracingIntegration(),
       Sentry.replayIntegration({
@@ -31,7 +34,6 @@ export function init(): void {
     // Session Replay
     replaysSessionSampleRate: 0, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
     replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-    allowUrls: ["https://*.monkeytype.com"],
     ignoreErrors: [
       /**
        * Thrown when firefox prevents an add-on from refrencing a DOM element that has been removed.
@@ -45,7 +47,46 @@ export function init(): void {
       "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.",
       "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.",
       "Error: There is no clipping info for given tab",
+      "Non-Error promise rejection captured",
+      "Object captured as promise rejection",
     ],
+    beforeSend(event) {
+      if (envConfig.isDevelopment) {
+        console.debug(
+          "Sentry beforeSend, not sending in development mode",
+          event
+        );
+        return null;
+      } else {
+        if (debug) {
+          console.debug("Sentry beforeSend", event);
+        }
+      }
+
+      return event;
+
+      //   console.log(
+      //     "BEFORE SEND FRAMES",
+      //     event.exception?.values?.[0]?.stacktrace?.frames
+      //   );
+      //   if (
+      //     event.exception !== undefined &&
+      //     event.exception.values !== undefined &&
+      //     event.exception.values.length > 0
+      //   ) {
+      //     const exception = event.exception.values[0];
+      //     if (exception && exception.stacktrace) {
+      //       console.log(exception);
+      //       const frames = exception.stacktrace.frames;
+      //       for (const frame of frames ?? []) {
+      //         if (frame.filename && frame.filename.includes("monkeytype")) {
+      //           // return event;
+      //         }
+      //       }
+      //     }
+      //   }
+      //   return null;
+    },
     beforeBreadcrumb(breadcrumb, _hint) {
       if (breadcrumb.category === "console" && breadcrumb.level === "debug") {
         return null;
@@ -69,3 +110,8 @@ export function clearUser(): void {
 export function captureException(error: Error): void {
   Sentry.captureException(error);
 }
+
+export function toggleDebug(): void {
+  debug = !debug;
+  console.debug("Sentry debug mode:", debug);
+}