fix: prevent sentry from loading when telemetry is disabled (#10543)

Co-authored-by: forehalo <forehalo@gmail.com>

packages/frontend/track/package.json

@@ -9,10 +9,13 @@
   "sideEffects": "false",
   "dependencies": {
     "@affine/debug": "workspace:*",
-    "mixpanel-browser": "^2.56.0"
+    "@sentry/react": "^9.2.0",
+    "mixpanel-browser": "^2.56.0",
+    "react-router-dom": "6.28.0"
   },
   "devDependencies": {
     "@types/mixpanel-browser": "^2.50.2",
+    "@types/react": "^19.0.1",
     "vitest": "^3.0.0"
   }
 }

packages/frontend/track/src/index.ts

@@ -1,9 +1,10 @@
 import { enableAutoTrack, makeTracker } from './auto';
 import { mixpanel } from './mixpanel';
+import { sentry } from './sentry';
 
 export const track = makeTracker((event, props) => {
   mixpanel.track(event, props);
 });
 
-export { enableAutoTrack, mixpanel };
+export { enableAutoTrack, mixpanel, sentry };
 export default track;

packages/frontend/track/src/mixpanel.ts

@@ -94,7 +94,6 @@ function createMixpanel() {
 }
 
 export const mixpanel = createMixpanel();
-mixpanel.init();
 
 function createProxyHandler() {
   const handler = {

packages/frontend/track/src/sentry.ts

@@ -0,0 +1,50 @@
+import * as Sentry from '@sentry/react';
+import { useEffect } from 'react';
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from 'react-router-dom';
+
+function createSentry() {
+  let enabled = true;
+  const wrapped = {
+    init() {
+      // https://docs.sentry.io/platforms/javascript/guides/react/#configure
+      Sentry.init({
+        enabled: enabled,
+        dsn: process.env.SENTRY_DSN,
+        debug: BUILD_CONFIG.debug ?? false,
+        environment: process.env.BUILD_TYPE ?? 'development',
+        integrations: [
+          Sentry.reactRouterV6BrowserTracingIntegration({
+            useEffect,
+            useLocation,
+            useNavigationType,
+            createRoutesFromChildren,
+            matchRoutes,
+          }),
+        ],
+        beforeSend(event) {
+          return enabled ? event : null;
+        },
+      });
+      Sentry.setTags({
+        distribution: BUILD_CONFIG.distribution,
+        appVersion: BUILD_CONFIG.appVersion,
+        editorVersion: BUILD_CONFIG.editorVersion,
+      });
+    },
+    enable() {
+      enabled = true;
+    },
+    disable() {
+      enabled = false;
+    },
+  };
+
+  return wrapped;
+}
+
+export const sentry = createSentry();