feat: support traces on Sentry (#6349)

apps/desktop/package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@onekeyhq/components": "*",
     "@onekeyhq/kit": "*",
-    "@sentry/electron": "^5.7.0",
+    "@sentry/electron": "5.8.0",
     "adm-zip": "^0.5.10",
     "electron-context-menu": "^3.5.0",
     "electron-is-dev": "^2.0.0",

apps/desktop/scripts/build.js

@@ -28,6 +28,10 @@ build({
       __dirname,
       '../../desktop/src-electron/libs/react-native-mock',
     ),
+    '@sentry/react-native': path.join(
+      __dirname,
+      '../../desktop/src-electron/libs/sentry-react-native-mock',
+    ),
     'react-native-uuid': path.join(
       __dirname,
       '../../../node_modules/react-native-uuid/dist',

apps/desktop/src-electron/libs/sentry-react-native-mock.ts

@@ -0,0 +1,2 @@
+export const reactNativeTracingIntegration = () => {};
+export const reactNavigationIntegration = () => {};

apps/mobile/App.tsx

@@ -2,11 +2,6 @@
 import '@onekeyhq/shared/src/polyfills';
 
 import { KitProvider } from '@onekeyhq/kit';
-import {
-  initSentry,
-  withSentryHOC,
-} from '@onekeyhq/shared/src/modules3rdParty/sentry';
-
-initSentry();
+import { withSentryHOC } from '@onekeyhq/shared/src/modules3rdParty/sentry';
 
 export default withSentryHOC(KitProvider);

apps/mobile/index.js

@@ -4,10 +4,12 @@ const {
   markJsBundleLoadedTime,
 } = require('@onekeyhq/shared/src/modules3rdParty/metrics');
 
-import { I18nManager } from 'react-native';
+const { initSentry } = require('@onekeyhq/shared/src/modules3rdParty/sentry');
 
 markJsBundleLoadedTime();
+initSentry();
 
+import { I18nManager } from 'react-native';
 import { registerRootComponent } from 'expo';
 
 import App from './App';

apps/mobile/package.json

@@ -43,7 +43,7 @@
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native-community/slider": "4.4.3",
     "@react-native-google-signin/google-signin": "^9.1.0",
-    "@sentry/react-native": "^6.2.0",
+    "@sentry/react-native": "6.4.0",
     "@shopify/flash-list": "^1.6.3",
     "@types/react-native-canvas": "^0.1.13",
     "@walletconnect/modal-react-native": "1.1.0",

jest-setup.js

@@ -1,7 +1,7 @@
 // require('react-native-reanimated').setUpTests();
 
 // FIX:     ReferenceError: self is not defined
-global.self = global.self || global;
+globalThis.self = globalThis.self || globalThis;
 
 class LocalStorageMock {
   constructor() {
@@ -25,14 +25,14 @@ class LocalStorageMock {
   }
 }
 
-global.localStorage = new LocalStorageMock();
-global.$$onekeyAppStorage = new LocalStorageMock();
-global.addEventListener = jest.fn;
-global.fetch = require('node-fetch');
-global.WebSocket = require('isomorphic-ws');
+globalThis.localStorage = new LocalStorageMock();
+globalThis.$$onekeyAppStorage = new LocalStorageMock();
+globalThis.addEventListener = jest.fn;
+globalThis.fetch = require('node-fetch');
+globalThis.WebSocket = require('isomorphic-ws');
 
 if (typeof structuredClone === 'undefined') {
-  global.structuredClone = require('@ungap/structured-clone').default;
+  globalThis.structuredClone = require('@ungap/structured-clone').default;
 }
 
 jest.mock('react-native-zip-archive', () => ({
@@ -63,6 +63,20 @@ jest.mock('react-native-device-info', () => ({
   getUsedMemorySync: jest.fn(),
 }));
 
+jest.mock('@sentry/electron/renderer', () => ({
+  init: () => jest.fn(),
+}));
+
+jest.mock('@sentry/react', () => ({
+  init: () => jest.fn(),
+}));
+
+jest.mock('@sentry/react-native', () => ({
+  init: () => jest.fn(),
+  reactNavigationIntegration: () => jest.fn(),
+  reactNativeTracingIntegration: () => jest.fn(),
+}));
+
 jest.mock('expo-localization', () => ({
   locale: '',
 }));

package.json

@@ -70,7 +70,9 @@
     "@polkadot/extension-inject": "0.46.6",
     "@polkadot/types": "11.3.1",
     "@polkadot/util-crypto": "12.6.2",
-    "@sentry/react": "^8.38.0",
+    "@sentry/browser": "8.42.0",
+    "@sentry/core": "8.42.0",
+    "@sentry/react": "8.42.0",
     "@substrate/txwrapper-polkadot": "7.5.1",
     "@tamagui/animations-moti": "1.108.0",
     "@tamagui/config": "1.108.0",
@@ -241,6 +243,11 @@
     "@walletconnect/universal-provider": "2.11.2",
     "@walletconnect/core": "2.11.2",
     "fs": "npm:@favware/[email protected]",
-    "react-native-webview": "npm:@onekeyfe/[email protected]"
+    "react-native-webview": "npm:@onekeyfe/[email protected]",
+    "@sentry/browser": "npm:8.42.0",
+    "@sentry/core": "npm:8.42.0",
+    "@sentry/react": "npm:8.42.0",
+    "@sentry/types": "npm:8.42.0",
+    "@sentry/utils": "npm:8.42.0"
   }
 }

packages/kit/src/components/LastActivityTracker/index.ts

@@ -38,6 +38,7 @@ const LastActivityTracker = () => {
         }),
       });
       setSentryUser({
+        id: instanceId,
         instanceId,
         platform: platformEnv.appPlatform || '',
         appChannel: platformEnv.appChannel || '',

packages/shared/src/modules3rdParty/sentry/basicOptions.ts

@@ -1,15 +1,22 @@
+import {
+  reactNativeTracingIntegration,
+  reactNavigationIntegration,
+} from '@sentry/react-native';
 import wordLists from 'bip39/src/wordlists/english.json';
 
 import { memoizee } from '@onekeyhq/shared/src/utils/cacheUtils';
 
 import type { BrowserOptions } from '@sentry/browser';
-
 // dirty check for common private key formats
 const checkPrivateKey = (errorText: string) =>
   typeof errorText === 'string' && errorText.length > 26;
 
 const lazyLoadWordSet = memoizee(() => new Set(wordLists));
 
+export const navigationIntegration = reactNavigationIntegration({
+  enableTimeToInitialDisplay: true,
+});
+
 // Check if text contains mnemonic phrases
 const checkAndRedactMnemonicWords = (words: string[]) => {
   if (!Array.isArray(words)) {
@@ -43,8 +50,10 @@ const checkAndRedactMnemonicWords = (words: string[]) => {
 };
 
 export const basicOptions: BrowserOptions = {
-  enabled: process.env.NODE_ENV === 'production',
+  enabled: true,
   maxBreadcrumbs: 100,
+  tracesSampleRate: 1.0,
+  profilesSampleRate: 1.0,
   beforeSend: (event) => {
     if (Array.isArray(event.exception?.values)) {
       for (let index = 0; index < event.exception.values.length; index += 1) {
@@ -81,6 +90,8 @@ export const buildOptions = (Sentry: typeof import('@sentry/react')) => ({
 });
 
 export const buildIntegrations = (Sentry: typeof import('@sentry/react')) => [
+  navigationIntegration,
+  reactNativeTracingIntegration(),
   Sentry.browserProfilingIntegration(),
   Sentry.browserTracingIntegration(),
   Sentry.breadcrumbsIntegration({

packages/shared/src/modules3rdParty/sentry/index.desktop.ts

@@ -7,11 +7,15 @@ import { buildIntegrations } from './basicOptions';
 
 export * from '@sentry/electron/renderer';
 
+export * from './basicOptions';
+
 export const initSentry = () => {
   if (process.env.NODE_ENV !== 'production') {
     return;
   }
   Sentry.init({
+    tracesSampleRate: 1.0,
+    profilesSampleRate: 1.0,
     integrations: buildIntegrations(Sentry as any),
   });
 };
@@ -26,7 +30,3 @@ export const withSentryHOC = (
       console.error('error', error, info);
     },
   });
-
-export const navigationIntegration = {
-  registerNavigationContainer: (ref: any) => {},
-};

packages/shared/src/modules3rdParty/sentry/index.ext.ts

@@ -18,6 +18,8 @@ export const initSentry = () => {
 
 export * from '@sentry/react';
 
+export * from './basicOptions';
+
 export const nativeCrash = () => {};
 
 export const withSentryHOC = (
@@ -28,7 +30,3 @@ export const withSentryHOC = (
       console.error('error', error, info);
     },
   });
-
-export const navigationIntegration = {
-  registerNavigationContainer: (ref: any) => {},
-};

packages/shared/src/modules3rdParty/sentry/index.native.ts

@@ -1,21 +1,20 @@
 import type { ComponentType } from 'react';
 
 import {
+  hermesProfilingIntegration,
   init,
-  reactNavigationIntegration,
+  reactNativeTracingIntegration,
   nativeCrash as sentryNativeCrash,
   withErrorBoundary,
   withProfiler,
   wrap,
 } from '@sentry/react-native';
 
-import { basicOptions } from './basicOptions';
+import { basicOptions, navigationIntegration } from './basicOptions';
 
 export * from '@sentry/react-native';
 
-export const navigationIntegration = reactNavigationIntegration({
-  enableTimeToInitialDisplay: true,
-});
+export * from './basicOptions';
 
 export const initSentry = () => {
   if (process.env.NODE_ENV !== 'production') {
@@ -27,7 +26,14 @@ export const initSentry = () => {
     maxCacheItems: 60,
     enableAppHangTracking: true,
     appHangTimeoutInterval: 5,
-    integrations: [navigationIntegration],
+    integrations: [
+      navigationIntegration,
+      reactNativeTracingIntegration(),
+      hermesProfilingIntegration({
+        platformProfilers: true,
+      }),
+    ],
+    enableAutoPerformanceTracing: true,
   });
 };
 

packages/shared/src/modules3rdParty/sentry/index.ts

@@ -6,6 +6,8 @@ import { basicOptions, buildIntegrations, buildOptions } from './basicOptions';
 
 export * from '@sentry/react';
 
+export * from './basicOptions';
+
 export const initSentry = () => {
   if (process.env.NODE_ENV !== 'production') {
     return;
@@ -28,7 +30,3 @@ export const withSentryHOC = (
       console.error('error', error, info);
     },
   });
-
-export const navigationIntegration = {
-  registerNavigationContainer: (ref: any) => {},
-};