fix e2e sentry issue

Author: racitores

e2e/docs/CONTROLLER_MOCKING.md

@@ -0,0 +1,52 @@
+# E2E Controller Mocking
+
+This document explains when and how to mock controller logic during E2E tests. This is not about Sentry; it focuses on replacing provider SDK interactions when needed, with the HyperLiquid provider as the concrete example.
+
+## Context and Rationale
+
+- Some features depend on external provider SDKs and live data streams (e.g., HyperLiquid market data via WebSocket). In E2E we need deterministic, reliable tests that are not affected by third-party uptime, timing, or data variability.
+- In these cases, we may replace controller interactions with the provider SDK so flows can proceed with stable, test-controlled data.
+- If your calls are plain HTTP/HTTPS and can be intercepted by our E2E mock server, prefer HTTP-level mocking instead (it’s simpler, more generic, and easier to maintain).
+
+## Perps + HyperLiquid Controller Mixin (Specific Case)
+
+- File: `e2e/controller-mocking/mock-config/perps-controller-mixin.ts`
+- Purpose: Replace HyperLiquid provider SDK touchpoints for E2E with safe, deterministic alternatives so the Perps connection lifecycle (initialization, subscriptions, reconnection) can be exercised without relying on the live SDK backend.
+
+Key behaviors:
+
+- Intercepts Perps controller methods that would call into the HyperLiquid SDK and redirects them to E2E-provided mocks.
+- Keeps the rest of the business logic intact while ensuring stable inputs/outputs for tests.
+
+Scope note:
+
+- This mixin is a solution for this particular provider and feature. Do not treat it as a general pattern for all network or SDK interactions.
+
+## Prefer HTTP Mocking When Possible
+
+- If your feature communicates over HTTP, use the E2E mock server (fixtures + proxy) to stub responses:
+  - Faster to implement and review
+  - Centralized and reusable across tests
+  - Avoids coupling tests to controller internals
+
+Only consider controller-level mocking when:
+
+- The dependency is an SDK with complex transport (e.g., WebSockets) that isn’t easily intercepted by our mock server, or
+- You need to drive very specific edge cases not feasible at the network layer.
+
+## How to Apply Controller Mocks
+
+1. Implement a feature-scoped mixin/override under `e2e/controller-mocking/mock-config/`.
+2. Use your E2E bridge/initializer to inject the mixin into the running app for tests that require it.
+3. Keep overrides minimal and focused on stabilizing provider interactions. Avoid changing unrelated business logic.
+
+## Best Practices
+
+- Keep mocks deterministic and fast. Avoid timers and external dependencies.
+- Document each override and its purpose.
+- Align with the Page Object Model in specs; controller mocking should be configured via fixtures/bridge, not from the test body.
+- Prefer HTTP/network mocking where feasible; use controller mocking only when necessary.
+
+## Notes
+
+- This document is specifically about provider SDK replacement (e.g., HyperLiquid) for E2E stability. For third‑party library swaps at the module level, see `MODULE_MOCKING.md`.

e2e/docs/MODULE_MOCKING.md

@@ -0,0 +1,46 @@
+# E2E Module Mocking
+
+This document explains why and how we mock native/SDK modules during E2E runs, with Sentry as the primary example.
+
+## Context and Rationale
+
+- In E2E, we run the app in bridgeless/debug-like conditions where some SDK integrations (e.g., Sentry tracing) are disabled or partially available.
+- Production code may assume fully functional tracing spans. When Sentry is disabled, closing or annotating spans can throw, breaking flows under test (e.g., Perps connection lifecycle).
+- To keep test reliability high and avoid feature-specific mixins, we alias third-party modules to E2E-friendly mocks at bundling time.
+
+## What’s Mocked
+
+- `@sentry/react-native`
+- `@sentry/core`
+
+These are replaced with minimal, no-op implementations that preserve the public API shape used by our app code, including tracing functions.
+
+## Where the Mocks Live
+
+- `e2e/module-mocking/sentry/react-native.ts`
+- `e2e/module-mocking/sentry/core.ts`
+
+Both files include safe no-ops and lightweight console logs for debugging (prefixed with `[E2E Sentry Mock]`).
+
+## How Aliasing Works
+
+Metro resolver is configured to alias Sentry packages to the E2E mocks when the E2E flag is set. The condition is:
+
+- `IS_TEST === 'true'` or `METAMASK_ENVIRONMENT === 'e2e'`
+
+This logic resides in `metro.config.js` via a custom `resolveRequest` that redirects requests for `@sentry/react-native` and `@sentry/core` to the mock files under `e2e/module-mocking/sentry/`.
+
+## When to Use (Scope)
+
+Use module-level aliasing sparingly. It is intended only for cross‑cutting, framework‑wide issues that affect many features or the entire E2E environment (e.g., global tracing integrations, core polyfills). If your need is feature‑specific, prefer scoped approaches instead (e.g., HTTP mocking via the mock server or controller‑level overrides).
+
+## Extending Module Mocks
+
+- Add new mock files under `e2e/module-mocking/<lib>/`.
+- Update `metro.config.js` `resolveRequest` to redirect the target module specifier to your mock file when E2E.
+- Keep APIs minimal; only implement members referenced by the app code to reduce maintenance.
+
+## Notes
+
+- This approach avoids per-feature mixins and centralizes E2E-specific behavior at the bundler level.
+- Production builds remain unaffected; aliasing only applies when E2E flags are set.

e2e/module-mocking/sentry/core.ts

@@ -0,0 +1,19 @@
+// Minimal Sentry Core mock for E2E runs
+
+export interface Span {
+  end?: (timestamp?: number) => void;
+  setAttribute?: (key: string, value: unknown) => void;
+  _name?: string;
+}
+
+export interface StartSpanOptions {
+  name?: string;
+  op?: string;
+  startTime?: number;
+  parentSpan?: Span | null;
+  attributes?: Record<string, unknown>;
+}
+
+export const withIsolationScope = <T>(callback: (scope: unknown) => T): T => callback({ setTag: (_k: string, _v: unknown) => undefined });
+
+export default {};

e2e/module-mocking/sentry/react-native.ts

@@ -0,0 +1,64 @@
+// Minimal Sentry React Native mock for E2E runs
+
+export interface Span {
+  end?: (timestamp?: number) => void;
+  setAttribute?: (key: string, value: unknown) => void;
+}
+
+export const init = (_options?: unknown) => {
+  // eslint-disable-next-line no-console
+  console.log('[E2E Sentry Mock] init', _options ?? '(no options)');
+};
+
+export const wrap = <T>(component: T): T => {
+  // eslint-disable-next-line no-console
+  console.log('[E2E Sentry Mock] wrap');
+  return component;
+};
+
+export const setMeasurement = (
+  _name: string,
+  _value: number,
+  _unit?: string,
+) => {
+  // eslint-disable-next-line no-console
+  console.log('[E2E Sentry Mock] setMeasurement', _name, _value, _unit);
+};
+
+export const startSpan = <T>(
+  _options: unknown,
+  callback: (span?: Span) => T,
+): T => {
+  // eslint-disable-next-line no-console
+  console.log('[E2E Sentry Mock] startSpan', _options);
+  return callback(undefined);
+};
+
+export const startSpanManual = <T>(
+  _options: unknown,
+  callback: (span?: Span) => T,
+): T => {
+  // eslint-disable-next-line no-console
+  console.log('[E2E Sentry Mock] startSpanManual', _options);
+  return callback(undefined);
+};
+
+// Optional helpers to reduce undefined checks in app code paths
+export const configureScope = (
+  _fn: (scope: { setTag: (k: string, v: unknown) => void }) => void,
+) => {
+  // eslint-disable-next-line no-console
+  console.log('[E2E Sentry Mock] configureScope');
+};
+export const addBreadcrumb = (_breadcrumb: unknown) => {
+  // eslint-disable-next-line no-console
+  console.log('[E2E Sentry Mock] addBreadcrumb', _breadcrumb);
+};
+export const captureException = (_error: unknown) => {
+  // eslint-disable-next-line no-console
+  console.log('[E2E Sentry Mock] captureException', _error);
+};
+export const captureMessage = (_message: string) => {
+  // eslint-disable-next-line no-console
+  console.log('[E2E Sentry Mock] captureMessage', _message);
+};

metro.config.js

@@ -43,6 +43,9 @@ module.exports = function (baseConfig) {
   const {
     resolver: { assetExts, sourceExts },
   } = defaultConfig;
+  const isE2E =
+    process.env.IS_TEST === 'true' ||
+    process.env.METAMASK_ENVIRONMENT === 'e2e';
 
   // For less powerful machines, leave room to do other tasks. For instance,
   // if you have 10 cores but only 16GB, only 3 workers would get used.
@@ -56,7 +59,6 @@ module.exports = function (baseConfig) {
       resolver: {
         assetExts: [...assetExts.filter((ext) => ext !== 'svg'), 'riv'],
         sourceExts: [...sourceExts, 'svg', 'cjs', 'mjs'],
-        resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
         extraNodeModules: {
           ...defaultConfig.resolver.extraNodeModules,
           'node:crypto': require.resolve('react-native-crypto'),
@@ -80,6 +82,29 @@ module.exports = function (baseConfig) {
           buffer: '@craftzdog/react-native-buffer',
           'node:buffer': '@craftzdog/react-native-buffer',
         },
+        resolveRequest: isE2E
+          ? (context, moduleName, platform) => {
+              if (moduleName === '@sentry/react-native') {
+                return {
+                  type: 'sourceFile',
+                  filePath: path.resolve(
+                    __dirname,
+                    'e2e/module-mocking/sentry/react-native.ts',
+                  ),
+                };
+              }
+              if (moduleName === '@sentry/core') {
+                return {
+                  type: 'sourceFile',
+                  filePath: path.resolve(
+                    __dirname,
+                    'e2e/module-mocking/sentry/core.ts',
+                  ),
+                };
+              }
+              return context.resolveRequest(context, moduleName, platform);
+            }
+          : defaultConfig.resolver.resolveRequest,
       },
       transformer: {
         babelTransformerPath: require.resolve('./metro.transform.js'),