perf: add Core Web Vitals measurement (INP, LCP, CLS)

Add web-vitals instrumentation for Core Web Vitals measurement:

- `initINPObserver()`: Measures Interaction to Next Paint with attribution
- `initLCPObserver()`: Measures Largest Contentful Paint with attribution
- `initCLSObserver()`: Measures Cumulative Layout Shift with attribution
- `initWebVitals()`: Convenience function to initialize all observers

Uses web-vitals/attribution for detailed context on what caused each metric.
Metrics are automatically reported to Sentry when available.

Requires: yarn install && yarn lavamoat:auto

Resolves: MetaMask/MetaMask-planning#6735
Resolves: MetaMask/MetaMask-planning#6736
Resolves: MetaMask/MetaMask-planning#6739
Co-authored-by: Cursor <cursoragent@cursor.com>

Author: MajorLift

package.json

@@ -491,6 +491,7 @@
     "unicode-confusables": "^0.1.1",
     "uri-js": "^4.4.1",
     "uuid": "^8.3.2",
+    "web-vitals": "^4.2.4",
     "xml2js": "^0.6.2"
   },
   "devDependencies": {

ui/helpers/utils/web-vitals.test.ts

@@ -0,0 +1,243 @@
+import { initINPObserver, initLCPObserver, initCLSObserver, initWebVitals } from './web-vitals';
+
+// Mock web-vitals
+jest.mock('web-vitals/attribution', () => ({
+  onINP: jest.fn(),
+  onLCP: jest.fn(),
+  onCLS: jest.fn(),
+}));
+
+import { onINP, onLCP, onCLS } from 'web-vitals/attribution';
+
+const mockOnINP = onINP as jest.Mock;
+const mockOnLCP = onLCP as jest.Mock;
+const mockOnCLS = onCLS as jest.Mock;
+
+describe('web-vitals', () => {
+  const originalSentry = globalThis.sentry;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (globalThis as any).sentry;
+  });
+
+  afterEach(() => {
+    globalThis.sentry = originalSentry;
+  });
+
+  describe('initINPObserver', () => {
+    it('registers INP callback', () => {
+      initINPObserver();
+      expect(mockOnINP).toHaveBeenCalledTimes(1);
+      expect(typeof mockOnINP.mock.calls[0][0]).toBe('function');
+    });
+
+    it('reports good INP to Sentry', () => {
+      const mockSentry = {
+        setMeasurement: jest.fn(),
+        setTag: jest.fn(),
+        setContext: jest.fn(),
+        addBreadcrumb: jest.fn(),
+      };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (globalThis as any).sentry = mockSentry;
+
+      initINPObserver();
+      const callback = mockOnINP.mock.calls[0][0];
+
+      // Simulate good INP (< 200ms)
+      callback({
+        value: 150,
+        attribution: {
+          eventTarget: 'button',
+          eventType: 'click',
+          loadState: 'complete',
+          interactionTarget: 'button.submit',
+        },
+      });
+
+      expect(mockSentry.setMeasurement).toHaveBeenCalledWith(
+        'benchmark.inp',
+        150,
+        'millisecond',
+      );
+      expect(mockSentry.setTag).toHaveBeenCalledWith('inp.rating', 'good');
+      expect(mockSentry.setContext).toHaveBeenCalledWith(
+        'inp_attribution',
+        expect.objectContaining({
+          eventTarget: 'button',
+          eventType: 'click',
+        }),
+      );
+      // Good metrics should not add breadcrumb
+      expect(mockSentry.addBreadcrumb).not.toHaveBeenCalled();
+    });
+
+    it('reports poor INP with warning breadcrumb', () => {
+      const mockSentry = {
+        setMeasurement: jest.fn(),
+        setTag: jest.fn(),
+        setContext: jest.fn(),
+        addBreadcrumb: jest.fn(),
+      };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (globalThis as any).sentry = mockSentry;
+
+      initINPObserver();
+      const callback = mockOnINP.mock.calls[0][0];
+
+      // Simulate poor INP (> 500ms)
+      callback({
+        value: 600,
+        attribution: { eventTarget: 'div', eventType: 'click' },
+      });
+
+      expect(mockSentry.setTag).toHaveBeenCalledWith('inp.rating', 'poor');
+      expect(mockSentry.addBreadcrumb).toHaveBeenCalledWith(
+        expect.objectContaining({
+          category: 'performance.inp',
+          level: 'warning',
+        }),
+      );
+    });
+
+    it('handles missing Sentry gracefully', () => {
+      // Sentry not available
+      initINPObserver();
+      const callback = mockOnINP.mock.calls[0][0];
+
+      // Should not throw
+      expect(() => callback({ value: 100, attribution: {} })).not.toThrow();
+    });
+  });
+
+  describe('initLCPObserver', () => {
+    it('registers LCP callback', () => {
+      initLCPObserver();
+      expect(mockOnLCP).toHaveBeenCalledTimes(1);
+    });
+
+    it('reports LCP to Sentry with attribution', () => {
+      const mockSentry = {
+        setMeasurement: jest.fn(),
+        setTag: jest.fn(),
+        setContext: jest.fn(),
+        addBreadcrumb: jest.fn(),
+      };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (globalThis as any).sentry = mockSentry;
+
+      initLCPObserver();
+      const callback = mockOnLCP.mock.calls[0][0];
+
+      // Simulate good LCP (< 2500ms)
+      callback({
+        value: 2000,
+        attribution: {
+          element: 'div.account-list',
+          url: 'https://metamask.io',
+        },
+      });
+
+      expect(mockSentry.setMeasurement).toHaveBeenCalledWith(
+        'benchmark.lcp',
+        2000,
+        'millisecond',
+      );
+      expect(mockSentry.setTag).toHaveBeenCalledWith('lcp.rating', 'good');
+      expect(mockSentry.setContext).toHaveBeenCalledWith(
+        'lcp_attribution',
+        expect.objectContaining({
+          element: 'div.account-list',
+        }),
+      );
+    });
+
+    it('reports poor LCP correctly', () => {
+      const mockSentry = {
+        setMeasurement: jest.fn(),
+        setTag: jest.fn(),
+        setContext: jest.fn(),
+        addBreadcrumb: jest.fn(),
+      };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (globalThis as any).sentry = mockSentry;
+
+      initLCPObserver();
+      const callback = mockOnLCP.mock.calls[0][0];
+
+      // Simulate poor LCP (> 4000ms)
+      callback({ value: 5000, attribution: {} });
+
+      expect(mockSentry.setTag).toHaveBeenCalledWith('lcp.rating', 'poor');
+    });
+  });
+
+  describe('initCLSObserver', () => {
+    it('registers CLS callback', () => {
+      initCLSObserver();
+      expect(mockOnCLS).toHaveBeenCalledTimes(1);
+    });
+
+    it('reports CLS to Sentry with unitless measurement', () => {
+      const mockSentry = {
+        setMeasurement: jest.fn(),
+        setTag: jest.fn(),
+        setContext: jest.fn(),
+        addBreadcrumb: jest.fn(),
+      };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (globalThis as any).sentry = mockSentry;
+
+      initCLSObserver();
+      const callback = mockOnCLS.mock.calls[0][0];
+
+      // Simulate good CLS (< 0.1)
+      callback({
+        value: 0.05,
+        attribution: {
+          largestShiftTarget: 'div.token-list',
+          largestShiftTime: 1000,
+          largestShiftValue: 0.05,
+        },
+      });
+
+      expect(mockSentry.setMeasurement).toHaveBeenCalledWith(
+        'benchmark.cls',
+        0.05,
+        'none', // CLS is unitless
+      );
+      expect(mockSentry.setTag).toHaveBeenCalledWith('cls.rating', 'good');
+    });
+
+    it('reports poor CLS correctly', () => {
+      const mockSentry = {
+        setMeasurement: jest.fn(),
+        setTag: jest.fn(),
+        setContext: jest.fn(),
+        addBreadcrumb: jest.fn(),
+      };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (globalThis as any).sentry = mockSentry;
+
+      initCLSObserver();
+      const callback = mockOnCLS.mock.calls[0][0];
+
+      // Simulate poor CLS (> 0.25)
+      callback({ value: 0.3, attribution: {} });
+
+      expect(mockSentry.setTag).toHaveBeenCalledWith('cls.rating', 'poor');
+    });
+  });
+
+  describe('initWebVitals', () => {
+    it('initializes all observers', () => {
+      initWebVitals();
+
+      expect(mockOnINP).toHaveBeenCalledTimes(1);
+      expect(mockOnLCP).toHaveBeenCalledTimes(1);
+      expect(mockOnCLS).toHaveBeenCalledTimes(1);
+    });
+  });
+});