reduce Sentry web bundle footprint

.oxlintrc.json

@@ -326,6 +326,10 @@
                   "default"
                 ],
                 "message": "React is already in the global type namespace. Use named imports for runtime modules."
+              },
+              {
+                "name": "@sentry/react-native",
+                "message": "Import {Sentry} from '#/logger/sentry/lib' instead. Importing @sentry/react-native directly (especially as `import * as Sentry`) defeats Metro tree-shaking and pulls ~180KB of dead weight into the web bundle."
               }
             ]
           }
@@ -401,6 +405,15 @@
       "env": {
         "jest": true
       }
+    },
+    {
+      "files": [
+        "src/logger/sentry/**/*.ts",
+        "src/logger/__tests__/logger.test.ts"
+      ],
+      "rules": {
+        "no-restricted-imports": "off"
+      }
     }
   ]
 }

metro.config.ts

@@ -6,6 +6,7 @@ import {getSentryExpoConfig} from '@sentry/react-native/metro.js'
 const config = getSentryExpoConfig(import.meta.dirname, {
   // TODO: confirm this doesn't break anything when we switch to metro web
   includeWebReplay: false,
+  includeWebFeedback: false,
   annotateReactComponents: {
     textComponentNames: ['Text', 'ButtonText'],
   },

src/App.tsx

@@ -11,7 +11,6 @@ import * as ScreenOrientation from 'expo-screen-orientation'
 import * as SplashScreen from 'expo-splash-screen'
 import * as SystemUI from 'expo-system-ui'
 import {useLingui} from '@lingui/react/macro'
-import * as Sentry from '@sentry/react-native'
 
 import {Provider as HideBottomBarBorderProvider} from '#/lib/hooks/useHideBottomBarBorder'
 import {QueryProvider} from '#/lib/react-query'
@@ -19,6 +18,7 @@ import {ThemeProvider} from '#/lib/ThemeContext'
 import {Provider as TranslateOnDeviceProvider} from '#/lib/translation'
 import I18nProvider from '#/locale/i18nProvider'
 import {logger} from '#/logger'
+import {Sentry} from '#/logger/sentry/lib'
 import {Provider as A11yProvider} from '#/state/a11y'
 import {
   prefetchAppConfig,

src/App.web.tsx

@@ -5,7 +5,6 @@ import {Fragment, useEffect, useState} from 'react'
 import {KeyboardProvider as KeyboardControllerProvider} from 'react-native-keyboard-controller'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {useLingui} from '@lingui/react/macro'
-import * as Sentry from '@sentry/react-native'
 
 import {Provider as HotkeysProvider} from '#/lib/hotkeys'
 import {QueryProvider} from '#/lib/react-query'
@@ -13,6 +12,7 @@ import {ThemeProvider} from '#/lib/ThemeContext'
 import {Provider as TranslateOnDeviceProvider} from '#/lib/translation'
 import I18nProvider from '#/locale/i18nProvider'
 import {logger} from '#/logger'
+import {Sentry} from '#/logger/sentry/lib'
 import {Provider as A11yProvider} from '#/state/a11y'
 import {
   prefetchAppConfig,

src/logger/sentry/lib/index.ts

@@ -1 +1,32 @@
-export * as Sentry from '@sentry/react-native'
+import {
+  addBreadcrumb,
+  captureException,
+  captureFeedback,
+  captureMessage,
+  getClient,
+  startInactiveSpan,
+  withActiveSpan,
+  withScope,
+  wrap,
+} from '@sentry/react-native'
+
+/**
+ * Curated subset of @sentry/react-native, listing only the symbols the app
+ * actually uses. Re-exporting the whole SDK namespace
+ * (`export * as Sentry from '@sentry/react-native'`) defeats Metro
+ * tree-shaking on web and pulls in ~180KB of dead weight.
+ *
+ * When the app needs another SDK function, add it to the import above and to
+ * this object, then run a web build to confirm the bundle size is unaffected.
+ */
+export const Sentry = {
+  addBreadcrumb,
+  captureException,
+  captureFeedback,
+  captureMessage,
+  getClient,
+  startInactiveSpan,
+  withActiveSpan,
+  withScope,
+  wrap,
+}

src/logger/sentry/lib/index.web.ts

@@ -1 +0,0 @@
-export * as Sentry from '@sentry/react-native'