chore: add sentry

Author: Miodec

.gitignore

@@ -127,3 +127,4 @@ frontend/src/webfonts-generated
 frontend/static/webfonts-preview
 
 .turbo
+frontend/.env.sentry-build-plugin

frontend/package.json

@@ -56,6 +56,7 @@
     "gulp-eslint-new": "1.9.1",
     "happy-dom": "15.10.2",
     "madge": "8.0.0",
+    "magic-string": "0.30.17",
     "normalize.css": "8.0.1",
     "oxlint": "0.16.7",
     "postcss": "8.4.31",
@@ -66,7 +67,7 @@
     "vite": "6.3.0",
     "vite-bundle-visualizer": "1.0.1",
     "vite-plugin-checker": "0.7.2",
-    "vite-plugin-filter-replace": "0.1.13",
+    "vite-plugin-filter-replace": "0.1.14",
     "vite-plugin-html-inject": "1.1.2",
     "vite-plugin-inspect": "11.0.0",
     "vite-plugin-minify": "2.1.0",
@@ -79,6 +80,8 @@
     "@monkeytype/contracts": "workspace:*",
     "@monkeytype/funbox": "workspace:*",
     "@monkeytype/util": "workspace:*",
+    "@sentry/browser": "9.14.0",
+    "@sentry/vite-plugin": "3.3.1",
     "@ts-rest/core": "3.51.0",
     "balloon-css": "1.2.0",
     "canvas-confetti": "1.5.1",

frontend/src/ts/index.ts

@@ -45,6 +45,8 @@ import { isDevEnvironment } from "./utils/misc";
 import * as VersionButton from "./elements/version-button";
 import * as Focus from "./test/focus";
 import { getDevOptionsModal } from "./utils/async-modules";
+import * as Sentry from "@sentry/browser";
+import { envConfig } from "./constants/env-config";
 
 function addToGlobal(items: Record<string, unknown>): void {
   for (const [name, item] of Object.entries(items)) {
@@ -78,4 +80,23 @@ if (isDevEnvironment()) {
   void getDevOptionsModal().then((module) => {
     module.appendButton();
   });
+} else {
+  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,
+    integrations: [
+      Sentry.browserTracingIntegration(),
+      Sentry.replayIntegration(),
+    ],
+    // Tracing
+    tracesSampleRate: 1.0, //  Capture 100% of the transactions
+    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+    tracePropagationTargets: ["localhost", /^https:\/\/api\.monkeytype\.com/],
+    // Session Replay
+    replaysSessionSampleRate: 0.1, // 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.
+  });
 }

frontend/vite.config.js

@@ -4,6 +4,7 @@ import autoprefixer from "autoprefixer";
 import "dotenv/config";
 import PROD_CONFIG from "./vite.config.prod";
 import DEV_CONFIG from "./vite.config.dev";
+import MagicString from "magic-string";
 
 /** @type {import("vite").UserConfig} */
 const BASE_CONFIG = {
@@ -14,15 +15,19 @@ const BASE_CONFIG = {
         if (id.endsWith(".ts")) {
           //check if file has a jQuery or $() call
           if (/(?:jQuery|\$)\([^)]*\)/.test(src)) {
+            const s = new MagicString(src);
+
             //if file has "use strict"; at the top, add it below that line, if not, add it at the very top
             if (src.startsWith(`"use strict";`)) {
-              return src.replace(
-                /("use strict";)/,
-                `$1import $ from "jquery";`
-              );
+              s.appendRight(12, `\nimport $ from "jquery";`);
             } else {
-              return `import $ from "jquery";${src}`;
+              s.prepend(`import $ from "jquery";`);
             }
+
+            return {
+              code: s.toString(),
+              map: s.generateMap({ hires: true, source: id }),
+            };
           }
         }
       },

frontend/vite.config.prod.js

@@ -12,6 +12,7 @@ import { writeFileSync } from "fs";
 import UnpluginInjectPreload from "unplugin-inject-preload/vite";
 import { readdirSync, readFileSync, statSync } from "node:fs";
 import { ViteMinifyPlugin } from "vite-plugin-minify";
+import { sentryVitePlugin } from "@sentry/vite-plugin";
 
 function pad(numbers, maxLength, fillString) {
   return numbers.map((number) =>
@@ -140,6 +141,11 @@ export default {
         ],
       },
     }),
+    sentryVitePlugin({
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      org: "monkeytype",
+      project: "frontend",
+    }),
     replace([
       {
         filter: /firebase\.ts$/,
@@ -236,6 +242,7 @@ export default {
     },
   ],
   build: {
+    sourcemap: true,
     emptyOutDir: true,
     outDir: "../dist",
     assetsInlineLimit: 0, //dont inline small files as data