chore(core): split sentry and setup into web/electron (#6357)

packages/frontend/electron/package.json

@@ -43,6 +43,9 @@
     "@electron-forge/shared-types": "^7.3.0",
     "@emotion/react": "^11.11.4",
     "@pengx17/electron-forge-maker-appimage": "^1.1.1",
+    "@sentry/electron": "^4.21.0",
+    "@sentry/esbuild-plugin": "^2.16.0",
+    "@sentry/react": "^7.108.0",
     "@toeverything/infra": "workspace:*",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-react-swc": "^3.6.0",

packages/frontend/electron/renderer/index.tsx

@@ -1,14 +1,29 @@
 import './polyfill/dispose';
-// Side effect import, "declare global"
-import '@affine/env/constant';
+import '@affine/core/bootstrap/preload';
 
-import { setup } from '@affine/core/bootstrap/setup';
+import { appConfigProxy } from '@affine/core/hooks/use-app-config-storage';
 import { performanceLogger } from '@affine/core/shared';
-import { StrictMode } from 'react';
+import { apis, events } from '@affine/electron-api';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { init, replayIntegration, setTags } from '@sentry/electron/renderer';
+import {
+  init as reactInit,
+  reactRouterV6BrowserTracingIntegration,
+} from '@sentry/react';
+import { debounce } from 'lodash-es';
+import { StrictMode, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from 'react-router-dom';
 
 import { App } from './app';
 
+window.ResizeObserver = ResizeObserver;
+
 const performanceMainLogger = performanceLogger.namespace('main');
 function main() {
   performanceMainLogger.info('start');
@@ -18,7 +33,56 @@ function main() {
     performanceMainLogger.info('skip setup');
   } else {
     performanceMainLogger.info('setup start');
-    setup();
+    if (window.SENTRY_RELEASE || environment.isDebug) {
+      // https://docs.sentry.io/platforms/javascript/guides/electron/
+      init(
+        {
+          dsn: process.env.SENTRY_DSN,
+          environment: process.env.BUILD_TYPE ?? 'development',
+          integrations: [
+            reactRouterV6BrowserTracingIntegration({
+              useEffect,
+              useLocation,
+              useNavigationType,
+              createRoutesFromChildren,
+              matchRoutes,
+            }),
+            replayIntegration(),
+          ],
+        },
+        reactInit
+      );
+      setTags({
+        appVersion: runtimeConfig.appVersion,
+        editorVersion: runtimeConfig.editorVersion,
+      });
+      window.addEventListener('offline', () => {
+        apis?.ui.handleNetworkChange(false);
+      });
+      window.addEventListener('online', () => {
+        apis?.ui.handleNetworkChange(true);
+      });
+    }
+    // load persistent config for electron
+    // TODO: should be sync, but it's not necessary for now
+    appConfigProxy
+      .getSync()
+      .catch(() => console.error('failed to load app config'));
+    const handleMaximized = (maximized: boolean | undefined) => {
+      document.documentElement.dataset.maximized = String(maximized);
+    };
+    const handleFullscreen = (fullscreen: boolean | undefined) => {
+      document.documentElement.dataset.fullscreen = String(fullscreen);
+    };
+    apis?.ui.isMaximized().then(handleMaximized).catch(console.error);
+    apis?.ui.isFullScreen().then(handleFullscreen).catch(console.error);
+    events?.ui.onMaximized(handleMaximized);
+    events?.ui.onFullScreen(handleFullscreen);
+
+    const handleResize = debounce(() => {
+      apis?.ui.handleWindowResize().catch(console.error);
+    }, 50);
+    window.addEventListener('resize', handleResize);
     performanceMainLogger.info('setup done');
   }
 

packages/frontend/electron/scripts/common.ts

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url';
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { getRuntimeConfig } from '@affine/cli/src/webpack/runtime-config';
+import { sentryEsbuildPlugin } from '@sentry/esbuild-plugin';
 import type { BuildOptions } from 'esbuild';
 
 export const electronDir = fileURLToPath(new URL('..', import.meta.url));
@@ -28,6 +29,26 @@ export const config = (): BuildOptions => {
     })
   );
 
+  if (process.env.GITHUB_SHA) {
+    define['process.env.GITHUB_SHA'] = `"${process.env.GITHUB_SHA}"`;
+  }
+
+  const plugins = [];
+
+  if (
+    process.env.SENTRY_AUTH_TOKEN &&
+    process.env.SENTRY_ORG &&
+    process.env.SENTRY_PROJECT
+  ) {
+    plugins.push(
+      sentryEsbuildPlugin({
+        org: process.env.SENTRY_ORG,
+        project: process.env.SENTRY_PROJECT,
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+      })
+    );
+  }
+
   return {
     entryPoints: [
       resolve(electronDir, './src/main/index.ts'),
@@ -48,5 +69,6 @@ export const config = (): BuildOptions => {
     assetNames: '[name]',
     treeShaking: true,
     sourcemap: 'linked',
+    plugins,
   };
 };

packages/frontend/electron/src/main/index.ts

@@ -2,6 +2,7 @@ import './security-restrictions';
 
 import path from 'node:path';
 
+import { init, IPCMode } from '@sentry/electron/main';
 import { app } from 'electron';
 
 import { createApplicationMenu } from './application-menu/create';
@@ -12,6 +13,7 @@ import { registerEvents } from './events';
 import { registerHandlers } from './handlers';
 import { logger } from './logger';
 import { registerProtocol } from './protocol';
+import { isOnline } from './ui/handlers';
 import { registerUpdater } from './updater';
 import { launch } from './windows-manager/launcher';
 import { launchStage } from './windows-manager/stage';
@@ -64,6 +66,19 @@ app.on('activate', () => {
 
 setupDeepLink(app);
 
+// https://docs.sentry.io/platforms/javascript/guides/electron/
+if (process.env.SENTRY_DSN) {
+  init({
+    dsn: process.env.SENTRY_DSN,
+    ipcMode: IPCMode.Protocol,
+    transportOptions: {
+      maxQueueAgeDays: 30,
+      maxQueueCount: 100,
+      beforeSend: () => (isOnline ? 'send' : 'queue'),
+    },
+  });
+}
+
 /**
  * Create app window when background process will be ready
  */

packages/frontend/electron/src/main/ui/handlers.ts

@@ -15,6 +15,8 @@ import { launchStage } from '../windows-manager/stage';
 import { getChallengeResponse } from './challenge';
 import { getGoogleOauthCode } from './google-auth';
 
+export let isOnline = true;
+
 export const uiHandlers = {
   isMaximized: async () => {
     const window = await getMainWindow();
@@ -58,6 +60,9 @@ export const uiHandlers = {
   handleCloseApp: async () => {
     app.quit();
   },
+  handleNetworkChange: async (_, _isOnline: boolean) => {
+    isOnline = _isOnline;
+  },
   getGoogleOauthCode: async () => {
     return getGoogleOauthCode();
   },

packages/frontend/electron/src/preload/index.ts

@@ -1 +1,2 @@
+import '@sentry/electron/preload';
 import './bootstrap';