@blario/react-native 0.1.6 → 0.1.7

package/README.md

@@ -407,7 +407,10 @@ If trusted publishing is not wanted, a granular npm token (Read and write, scope
 Like the web widget, the SDK reports its own contained failures to Blar's Sentry, through a client that is isolated from
 the host app: it installs no global error handler and no native crash hook, never touches the app's own Sentry, and
 only sees errors the SDK catches itself (the agent runtime, the backend transport and a boundary around the SDK's own
-UI, never the app's components). Events carry the SDK version, platform, publishable key, `source_id`, session id and
+UI, never the app's components). An error in a socket callback, timer, native listener, animation callback or press
+handler would otherwise end the app in a release build, or on Android's bridgeless runtime leave it on a white screen
+with the process alive, so each goes through `contain()` (`src/telemetry/contain.ts`) and a test fails on one that
+doesn't. A native crash can't be contained from JS and isn't reported here: it shows up in the app's own crash reporting. Events carry the SDK version, platform, publishable key, `source_id`, session id and
 the user's external id; emails, bearer tokens and identity tokens are scrubbed from messages. Network failures and
 refused credentials only become breadcrumbs, and at most 50 events are sent per launch. Without a DSN (the repo
 default, set only by the release job) nothing is sent. `enabled={false}` stops the SDK, and its reporting with it.

package/dist/BlarProvider.d.ts

@@ -48,12 +48,16 @@ export declare class BlarProvider extends Component<BlarProviderProps, BlarProvi
     private readonly stacking;
     private readonly attachCursor;
     private readonly detachCursor;
+    private readonly noteInteraction;
     componentDidMount(): void;
     componentDidUpdate(previous: BlarProviderProps): void;
     componentWillUnmount(): void;
+    private startContained;
+    private syncProps;
     private startSdk;
     private stopSdk;
     render(): React.JSX.Element;
+    private renderOverlay;
     private renderAgentLayer;
     private renderChat;
     private chatOptions;

package/dist/telemetry/contain.d.ts

@@ -0,0 +1,5 @@
+type Report = (context: string, error: unknown) => void;
+export declare function setContainmentReporter(reporter: Report): void;
+export declare function attempt<T>(context: string, run: () => T): T | undefined;
+export declare function contain<Args extends unknown[]>(context: string, callback: (...args: Args) => unknown): (...args: Args) => void;
+export {};

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.1.6";
+export declare const SDK_VERSION = "0.1.7";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blario/react-native",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Blar agent SDK for React Native",
   "license": "MIT",
   "repository": {

package/src/BlarProvider.tsx

@@ -1,5 +1,5 @@
 import React, { Component, createRef, type ReactNode } from 'react';
-import { AccessibilityInfo, AppState, Dimensions, Keyboard, StyleSheet, View } from 'react-native';
+import { AccessibilityInfo, AppState, type AppStateStatus, Dimensions, Keyboard, StyleSheet, View } from 'react-native';
 
 import { createAgentController } from './agent/compose.ts';
 import { SYSTEM_CLOCK } from './actions/settle.ts';
@@ -31,7 +31,9 @@ import { visibleViewport } from './host/visible-area.ts';
 import { AgentOverlay } from './overlay/AgentOverlay.tsx';
 import { CAPTURE_BACKEND } from './screenshot/screenshotter.ts';
 import { countOpenModals } from './snapshot/modals.ts';
+import { attempt, contain } from './telemetry/contain.ts';
 import { SdkErrorBoundary } from './telemetry/SdkErrorBoundary.tsx';
+import { reportSdkError } from './telemetry/sdk-reporter.ts';
 import { resolveConnectionOptions, type ConnectionConfig } from './transport/connection-options.ts';
 import { RelayTransport } from './transport/relay-transport.ts';
 import type { AgentTransport } from './transport/transport.ts';
@@ -118,17 +120,37 @@ export class BlarProvider extends Component<BlarProviderProps, BlarProviderState
 
   private readonly detachCursor = (): void => this.cursor.detach();
 
+  private readonly noteInteraction = contain('BlarProvider.touch', () => this.backend?.noteInteraction());
+
   override componentDidMount(): void {
     if (this.props.enabled !== false) {
-      this.startSdk();
+      this.startContained();
     }
   }
 
   override componentDidUpdate(previous: BlarProviderProps): void {
+    attempt('BlarProvider.update', () => this.syncProps(previous));
+  }
+
+  override componentWillUnmount(): void {
+    attempt('BlarProvider.unmount', () => this.stopSdk());
+  }
+
+  // A failed start leaves the host app running, without the SDK.
+  private startContained(): void {
+    try {
+      this.startSdk();
+    } catch (error) {
+      reportSdkError('BlarProvider.start', error);
+      attempt('BlarProvider.stop', () => this.stopSdk());
+    }
+  }
+
+  private syncProps(previous: BlarProviderProps): void {
     const enabled = this.props.enabled !== false;
     if (enabled !== (previous.enabled !== false)) {
       if (enabled) {
-        this.startSdk();
+        this.startContained();
       } else {
         this.stopSdk();
         this.setState({ chat: null, agentMode: null, spotlight: this.spotlight.getSnapshot(), cursor: this.cursor.getSnapshot() });
@@ -145,10 +167,6 @@ export class BlarProvider extends Component<BlarProviderProps, BlarProviderState
     void Blar.setUser(this.props.user);
   }
 
-  override componentWillUnmount(): void {
-    this.stopSdk();
-  }
-
   private startSdk(): void {
     this.connection = resolveConnectionOptions(this.props, typeof __DEV__ !== 'undefined' && __DEV__);
     const transport = this.createTransport();
@@ -204,25 +222,29 @@ export class BlarProvider extends Component<BlarProviderProps, BlarProviderState
   }
 
   override render(): React.JSX.Element {
-    const strings = resolveStrings(this.props.language ?? 'es', this.props.strings);
-    const phase = this.state.agentMode?.phase ?? 'idle';
     return (
-      <View style={styles.root} collapsable={false} onTouchStart={() => this.backend?.noteInteraction()}>
+      <View style={styles.root} collapsable={false} onTouchStart={this.noteInteraction}>
         <View ref={this.contentRef} style={styles.root} collapsable={false}>
           {this.props.children}
         </View>
-        <SdkErrorBoundary context="BlarProvider.overlay">
-          <AgentOverlay>
-            {this.renderChat(strings)}
-            <AgentLayerHost visible={phase !== 'idle'} generation={this.state.layerGeneration} onRequestClose={() => this.agentMode?.stop()}>
-              {this.renderAgentLayer(strings)}
-            </AgentLayerHost>
-          </AgentOverlay>
-        </SdkErrorBoundary>
+        <SdkErrorBoundary context="BlarProvider.overlay">{attempt('BlarProvider.render', () => this.renderOverlay())}</SdkErrorBoundary>
       </View>
     );
   }
 
+  private renderOverlay(): React.JSX.Element {
+    const strings = resolveStrings(this.props.language ?? 'es', this.props.strings);
+    const phase = this.state.agentMode?.phase ?? 'idle';
+    return (
+      <AgentOverlay>
+        {this.renderChat(strings)}
+        <AgentLayerHost visible={phase !== 'idle'} generation={this.state.layerGeneration} onRequestClose={() => this.agentMode?.stop()}>
+          {this.renderAgentLayer(strings)}
+        </AgentLayerHost>
+      </AgentOverlay>
+    );
+  }
+
   private renderAgentLayer(strings: UiStrings): React.JSX.Element | null {
     const { agentMode } = this.state;
     if (agentMode === null || agentMode.phase === 'idle') {
@@ -280,17 +302,20 @@ export class BlarProvider extends Component<BlarProviderProps, BlarProviderState
   }
 
   private watchForeground(): void {
-    const subscription = AppState.addEventListener('change', (state) => {
-      if (state !== 'active') {
-        this.spotlight.backgrounded();
-      }
-    });
+    const subscription = AppState.addEventListener(
+      'change',
+      contain('BlarProvider.foreground', (state: AppStateStatus) => {
+        if (state !== 'active') {
+          this.spotlight.backgrounded();
+        }
+      }),
+    );
     this.releases.push(() => subscription.remove());
   }
 
   private watchMotionPreference(): void {
     void AccessibilityInfo.isReduceMotionEnabled().then((reduceMotion) => this.setState({ reduceMotion }));
-    const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', (reduceMotion) => this.setState({ reduceMotion }));
+    const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', contain('BlarProvider.motion', (reduceMotion: boolean) => this.setState({ reduceMotion })));
     this.releases.push(() => subscription.remove());
   }
 
@@ -413,10 +438,12 @@ export class BlarProvider extends Component<BlarProviderProps, BlarProviderState
       return;
     }
     this.stackingCheckQueued = true;
-    requestAnimationFrame(() => {
-      this.stackingCheckQueued = false;
-      this.keepLayerOnTop();
-    });
+    requestAnimationFrame(
+      contain('BlarProvider.stacking', () => {
+        this.stackingCheckQueued = false;
+        this.keepLayerOnTop();
+      }),
+    );
   }
 
   private keepLayerOnTop(): void {

package/src/agent-mode/keyboard-guard.ts

@@ -1,3 +1,5 @@
+import { contain } from '../telemetry/contain.ts';
+
 export interface KeyboardPort {
   addListener: (event: 'keyboardWillShow' | 'keyboardDidShow', listener: () => void) => { remove: () => void };
   dismiss: () => void;
@@ -26,7 +28,7 @@ export class KeyboardGuard {
     if (this.subscriptions.length > 0) {
       return;
     }
-    const dismiss = (): void => this.keyboard.dismiss();
+    const dismiss = contain('KeyboardGuard.dismiss', () => this.keyboard.dismiss());
     this.subscriptions = [this.keyboard.addListener('keyboardWillShow', dismiss), this.keyboard.addListener('keyboardDidShow', dismiss)];
     dismiss();
   }

package/src/agent-mode/timers.ts

@@ -1,3 +1,5 @@
+import { contain } from '../telemetry/contain.ts';
+
 export interface Timers {
   set: (callback: () => void, milliseconds: number) => unknown;
   clear: (handle: unknown) => void;
@@ -5,7 +7,7 @@ export interface Timers {
 }
 
 export const SYSTEM_TIMERS: Timers = {
-  set: (callback, milliseconds) => setTimeout(callback, milliseconds),
+  set: (callback, milliseconds) => setTimeout(contain('Timers', callback), milliseconds),
   clear: (handle) => clearTimeout(handle as ReturnType<typeof setTimeout>),
   now: () => Date.now(),
 };

package/src/agent-mode/ui/AgentDock.tsx

@@ -7,6 +7,7 @@ import { chooseDock, freeBand, messageCap, type PanelDock, STACK_GAP } from '../
 import type { SpotlightSnapshot } from '../spotlight-controller.ts';
 import { type ActiveSpotlight, AgentPanel, panelChrome } from './AgentPanel.tsx';
 import { StatusCard, type StatusCorners } from './StatusCard.tsx';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface DockActions {
   place: (id: number, band: Band) => void | Promise<void>;
@@ -88,7 +89,7 @@ export function AgentDock({ spotlight, actions, card, strings, color, reduceMoti
   const pending = useRef<Array<ReturnType<typeof setTimeout>>>([]);
 
   const later = (callback: () => void, milliseconds: number): void => {
-    pending.current.push(setTimeout(callback, milliseconds));
+    pending.current.push(setTimeout(contain('AgentDock.later', callback), milliseconds));
   };
 
   const rest = (): void => {
@@ -118,15 +119,15 @@ export function AgentDock({ spotlight, actions, card, strings, color, reduceMoti
     const duration = reduceMotion ? REDUCED_MS : CLOSE_MS;
     const easing = reduceMotion ? Easing.linear : CLOSE;
     if (dockRef.current === 'bottom') {
-      Animated.parallel([animate(panelOpacity, 0, duration, easing), animate(panelShift, reduceMotion ? 0 : ENTER_SHIFT, duration, easing)]).start(() => {
+      Animated.parallel([animate(panelOpacity, 0, duration, easing), animate(panelShift, reduceMotion ? 0 : ENTER_SHIFT, duration, easing)]).start(contain('AgentDock.close', () => {
         if (presentedId.current === null) {
           rest();
           setPresented(null);
         }
-      });
+      }));
       return;
     }
-    Animated.parallel([animate(stackOpacity, 0, duration, easing), animate(stackShift, reduceMotion ? 0 : -ENTER_SHIFT, duration, easing)]).start(() => {
+    Animated.parallel([animate(stackOpacity, 0, duration, easing), animate(stackShift, reduceMotion ? 0 : -ENTER_SHIFT, duration, easing)]).start(contain('AgentDock.closeTop', () => {
       if (presentedId.current !== null) {
         return;
       }
@@ -134,7 +135,7 @@ export function AgentDock({ spotlight, actions, card, strings, color, reduceMoti
       stackOpacity.setValue(0);
       setPresented(null);
       later(() => animate(stackOpacity, 1, STACK_RETURN_MS, Easing.out(Easing.ease)).start(), STACK_RETURN_PAUSE_MS);
-    });
+    }));
   };
 
   useEffect(() => {
@@ -193,7 +194,7 @@ export function AgentDock({ spotlight, actions, card, strings, color, reduceMoti
       Animated.parallel([animate(panelOpacity, 1, duration, easing), animate(panelShift, 0, duration, easing)]).start();
       return;
     }
-    animate(stackOpacity, 0, STACK_FADE_MS, Easing.out(Easing.ease)).start(() => {
+    animate(stackOpacity, 0, STACK_FADE_MS, Easing.out(Easing.ease)).start(contain('AgentDock.moveTop', () => {
       later(() => {
         if (presentedId.current !== presented.id) {
           return;
@@ -205,7 +206,7 @@ export function AgentDock({ spotlight, actions, card, strings, color, reduceMoti
         stackShift.setValue(reduceMotion ? 0 : -ENTER_SHIFT);
         Animated.parallel([animate(stackOpacity, 1, duration, easing), animate(stackShift, 0, duration, easing)]).start();
       }, STACK_SWAP_PAUSE_MS);
-    });
+    }));
   }, [presented]);
 
   useEffect(() => {

package/src/agent-mode/ui/AgentLayer.tsx

@@ -14,6 +14,7 @@ import { MessageBubbles } from './MessageBubbles.tsx';
 import { PendingOverlay } from './PendingOverlay.tsx';
 import { SpotlightLayer } from './SpotlightLayer.tsx';
 import { TouchShield } from './TouchShield.tsx';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface AgentLayerProps {
   snapshot: AgentModeSnapshot;
@@ -64,7 +65,7 @@ function useBlockedTap(): { toast: boolean; pulse: number; block: () => void } {
     if (timer.current !== null) {
       clearTimeout(timer.current);
     }
-    timer.current = setTimeout(() => setToast(false), TOAST_MS);
+    timer.current = setTimeout(contain('AgentLayer.toast', () => setToast(false)), TOAST_MS);
   };
   return { toast, pulse, block };
 }

package/src/agent-mode/ui/AgentLayerHost.tsx

@@ -3,6 +3,7 @@ import { Modal, Platform, StyleSheet, View } from 'react-native';
 
 import { loadFullWindowOverlay } from './full-window-overlay.ts';
 import { chooseLayerHost } from './layer-host.ts';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface AgentLayerHostProps {
   visible: boolean;
@@ -20,7 +21,7 @@ export function AgentLayerHost({ visible, generation, onRequestClose, children }
   }
   if (HOST === 'modal') {
     return (
-      <Modal key={generation} visible transparent animationType="none" hardwareAccelerated onRequestClose={onRequestClose}>
+      <Modal key={generation} visible transparent animationType="none" hardwareAccelerated onRequestClose={contain('AgentLayerHost.close', onRequestClose)}>
         {children}
       </Modal>
     );

package/src/agent-mode/ui/AgentPanel.tsx

@@ -9,6 +9,7 @@ import type { PanelDock } from '../panel-geometry.ts';
 import type { SpotlightSnapshot } from '../spotlight-controller.ts';
 import { MarkdownText } from './MarkdownText.tsx';
 import { WarningIcon } from './WarningIcon.tsx';
+import { contain } from '../../telemetry/contain.ts';
 
 export type ActiveSpotlight = Exclude<SpotlightSnapshot, { kind: 'none' }>;
 
@@ -104,7 +105,7 @@ export function AgentPanel({ spotlight, dock, strings, color, messageMaxHeight,
       {spotlight.kind === 'reading' ? (
         <View style={styles.progressRow}>
           <Progress durationMs={spotlight.durationMs} running={spotlight.shown} color={color} />
-          <Pressable accessibilityRole="button" onPress={onSkip} style={styles.skip}>
+          <Pressable accessibilityRole="button" onPress={contain('AgentPanel.skip', onSkip)} style={styles.skip}>
             <Text style={styles.skipText}>{strings.readingSkip}</Text>
           </Pressable>
         </View>
@@ -117,12 +118,12 @@ export function AgentPanel({ spotlight, dock, strings, color, messageMaxHeight,
             </View>
           ) : null}
           <View style={[styles.buttons, destructive ? styles.destructiveButtons : null]}>
-            <Pressable accessibilityRole="button" onPress={onStop} style={[styles.button, styles.stop]}>
+            <Pressable accessibilityRole="button" onPress={contain('AgentPanel.stop', onStop)} style={[styles.button, styles.stop]}>
               <Text style={[styles.buttonText, { color: INK }]}>{strings.confirmStop}</Text>
             </Pressable>
             <Pressable
               accessibilityRole="button"
-              onPress={onConfirm}
+              onPress={contain('AgentPanel.confirm', onConfirm)}
               style={[styles.button, destructive ? { backgroundColor: DESTRUCTIVE } : [styles.confirmButton, { backgroundColor: color }]]}
             >
               <Text style={[styles.buttonText, { color: destructive ? '#ffffff' : onColor(color) }]}>

package/src/agent-mode/ui/AgentTap.tsx

@@ -3,6 +3,7 @@ import { Animated, Easing, StyleSheet, View } from 'react-native';
 
 import { centerOf, type Point } from '../../host/rect.ts';
 import type { CursorSnapshot } from '../cursor.ts';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface AgentTapProps {
   snapshot: CursorSnapshot;
@@ -90,7 +91,7 @@ function TapRing({ point, landed, ending, color, reduceMotion, onEnded }: TapRin
 
   useEffect(() => {
     if (ending) {
-      timing(opacity, 0, END_FADE_MS, EASE_OUT).start(() => ended.current());
+      timing(opacity, 0, END_FADE_MS, EASE_OUT).start(contain('AgentTap.ended', () => ended.current()));
     }
   }, [ending, opacity, ended]);
 
@@ -107,7 +108,7 @@ function TapRipple({ point, onDone }: { point: Point; onDone: () => void }): Rea
   const progress = useRef(new Animated.Value(0)).current;
   const done = useLatest(onDone);
   useEffect(() => {
-    timing(progress, 1, RIPPLE_MS, RIPPLE, PRESS_MS).start(() => done.current());
+    timing(progress, 1, RIPPLE_MS, RIPPLE, PRESS_MS).start(contain('AgentTap.ripple', () => done.current()));
   }, [progress, done]);
   return (
     <Animated.View

package/src/agent-mode/ui/SpotlightLayer.tsx

@@ -5,6 +5,7 @@ import type { SpotlightSnapshot } from '../spotlight-controller.ts';
 import type { ActiveSpotlight } from './AgentPanel.tsx';
 import { SPOTLIGHT_DIM, SpotlightOverlay } from './SpotlightOverlay.tsx';
 import { TargetPulse } from './TargetPulse.tsx';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface SpotlightLayerProps {
   spotlight: SpotlightSnapshot;
@@ -33,11 +34,11 @@ export function SpotlightLayer({ spotlight, color, reduceMotion, onBackdropPress
       Animated.timing(opacity, { toValue: 1, duration, easing: Easing.out(Easing.ease), useNativeDriver: true }).start();
       return;
     }
-    Animated.timing(opacity, { toValue: 0, duration, easing: Easing.out(Easing.ease), useNativeDriver: true }).start(({ finished }) => {
+    Animated.timing(opacity, { toValue: 0, duration, easing: Easing.out(Easing.ease), useNativeDriver: true }).start(contain('SpotlightLayer.fade', ({ finished }: { finished: boolean }) => {
       if (finished) {
         setGone(true);
       }
-    });
+    }));
   }, [visible, reduceMotion, opacity]);
 
   const current = last.current;
@@ -46,7 +47,7 @@ export function SpotlightLayer({ spotlight, color, reduceMotion, onBackdropPress
   }
   return (
     <Animated.View pointerEvents={visible ? 'box-none' : 'none'} style={[StyleSheet.absoluteFill, { opacity }]}>
-      {current.kind === 'confirming' ? <Pressable style={StyleSheet.absoluteFill} onPress={onBackdropPress} /> : null}
+      {current.kind === 'confirming' ? <Pressable style={StyleSheet.absoluteFill} onPress={contain('SpotlightLayer.backdrop', onBackdropPress)} /> : null}
       {current.hole === null ? <View pointerEvents="none" style={styles.dim} /> : <SpotlightOverlay hole={current.hole} />}
       {current.kind === 'confirming' && current.target !== null ? (
         <TargetPulse target={current.target} radius={current.request.target?.radius ?? 0} color={color} reduceMotion={reduceMotion} />

package/src/agent-mode/ui/StatusCard.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { onColor, withAlpha } from '../colors.ts';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface StatusCardProps {
   status: string;
@@ -54,7 +55,7 @@ function useStopPulse(pulse: number): { scale: Animated.Value; bordered: boolean
     ]);
     const animation = Animated.loop(beat, { iterations: PULSE_TIMES });
     animation.start();
-    const timer = setTimeout(() => setBordered(false), BORDER_MS);
+    const timer = setTimeout(contain('StatusCard.border', () => setBordered(false)), BORDER_MS);
     return () => {
       animation.stop();
       clearTimeout(timer);
@@ -83,7 +84,7 @@ export function StatusCard({ status, queued, stopLabel, color, stopHidden, corne
             accessibilityLabel={stopLabel}
             hitSlop={STOP_HIT_SLOP}
             style={[styles.stop, { backgroundColor: withAlpha(ink, 0.2) }, bordered ? { borderWidth: 2, borderColor: withAlpha(ink, 0.8) } : null]}
-            onPress={onStop}
+            onPress={contain('StatusCard.stop', onStop)}
           >
             <View style={[styles.stopIcon, { backgroundColor: ink }]} />
           </Pressable>

package/src/agent-mode/ui/TouchShield.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface TouchShieldProps {
   onBlockedTap: () => void;
@@ -10,7 +11,7 @@ export function TouchShield({ onBlockedTap }: TouchShieldProps): React.JSX.Eleme
     <View
       style={styles.shield}
       onStartShouldSetResponder={() => true}
-      onResponderRelease={onBlockedTap}
+      onResponderRelease={contain('TouchShield.tap', onBlockedTap)}
       accessibilityElementsHidden
       importantForAccessibility="no-hide-descendants"
     />

package/src/backend/foreground.ts

@@ -1,10 +1,15 @@
-import { AppState } from 'react-native';
+import { AppState, type AppStateStatus } from 'react-native';
+
+import { contain } from '../telemetry/contain.ts';
 
 export function watchForeground(onActive: () => void): () => void {
-  const subscription = AppState.addEventListener('change', (state) => {
-    if (state === 'active') {
-      onActive();
-    }
-  });
+  const subscription = AppState.addEventListener(
+    'change',
+    contain('watchForeground', (state: AppStateStatus) => {
+      if (state === 'active') {
+        onActive();
+      }
+    }),
+  );
   return () => subscription.remove();
 }

package/src/backend/health.ts

@@ -1,6 +1,7 @@
 import { AppState, type AppStateStatus, type NativeEventSubscription } from 'react-native';
 
 import { SDK_VERSION } from '../version.ts';
+import { contain } from '../telemetry/contain.ts';
 
 export interface ClientHealth {
   visibility: 'visible' | 'hidden';
@@ -27,13 +28,16 @@ export class ClientHealthProbe {
       return;
     }
     this.hiddenSince = AppState.currentState === 'active' ? null : Date.now();
-    this.subscription = AppState.addEventListener('change', (state) => this.onStateChange(state));
+    this.subscription = AppState.addEventListener('change', contain('ClientHealth.state', (state: AppStateStatus) => this.onStateChange(state)));
     this.expectedTickAt = Date.now() + PROBE_INTERVAL_MS;
-    this.timer = setInterval(() => {
-      const now = Date.now();
-      this.worstLagMs = Math.max(this.worstLagMs, now - this.expectedTickAt);
-      this.expectedTickAt = now + PROBE_INTERVAL_MS;
-    }, PROBE_INTERVAL_MS);
+    this.timer = setInterval(
+      contain('ClientHealth.probe', () => {
+        const now = Date.now();
+        this.worstLagMs = Math.max(this.worstLagMs, now - this.expectedTickAt);
+        this.expectedTickAt = now + PROBE_INTERVAL_MS;
+      }),
+      PROBE_INTERVAL_MS,
+    );
   }
 
   stop(): void {

package/src/backend/presence.ts

@@ -1,6 +1,7 @@
-import { AppState, type NativeEventSubscription } from 'react-native';
+import { AppState, type AppStateStatus, type NativeEventSubscription } from 'react-native';
 
 import type { ApiClient } from './api-client.ts';
+import { contain } from '../telemetry/contain.ts';
 
 const HEARTBEAT_INTERVAL_MS = 30_000;
 const IDLE_TIMEOUT_MS = 3 * 60_000;
@@ -29,12 +30,15 @@ export class PresenceManager {
     }
     this.started = true;
     this.lastInteraction = this.now();
-    this.subscription = AppState.addEventListener('change', (state) => {
-      if (state === 'active') {
-        this.lastInteraction = this.now();
-        this.fireNow();
-      }
-    });
+    this.subscription = AppState.addEventListener(
+      'change',
+      contain('Presence.state', (state: AppStateStatus) => {
+        if (state === 'active') {
+          this.lastInteraction = this.now();
+          this.fireNow();
+        }
+      }),
+    );
     this.fireNow();
   }
 
@@ -71,7 +75,7 @@ export class PresenceManager {
     if (this.timer !== null) {
       clearTimeout(this.timer);
     }
-    this.timer = setTimeout(() => this.fireNow(), HEARTBEAT_INTERVAL_MS);
+    this.timer = setTimeout(contain('Presence.beat', () => this.fireNow()), HEARTBEAT_INTERVAL_MS);
   }
 
   private async send(): Promise<void> {

package/src/backend/session-socket.ts

@@ -3,6 +3,7 @@ import { backoffDelay, isExhausted, SOCKET_BACKOFF } from './backoff.ts';
 import type { IdentityProof } from './identity.ts';
 import { ResponseCache } from './response-cache.ts';
 import { buildSocketUrl } from './socket-url.ts';
+import { contain } from '../telemetry/contain.ts';
 
 export type SocketState = 'connecting' | 'connected' | 'reconnecting' | 'disconnected' | 'failed';
 
@@ -149,7 +150,7 @@ export class SessionSocket {
       return;
     }
     this.socket = socket;
-    socket.onopen = () => {
+    socket.onopen = contain('SessionSocket.open', () => {
       if (this.epoch !== epoch) {
         return;
       }
@@ -159,8 +160,8 @@ export class SessionSocket {
       this.options.onState('connected');
       socket.send(JSON.stringify({ type: 'joined' }));
       this.cache.drain().forEach((payload) => socket.send(payload));
-    };
-    socket.onmessage = (event) => {
+    });
+    socket.onmessage = contain('SessionSocket.message', (event: { data?: unknown }) => {
       if (this.epoch !== epoch || typeof event.data !== 'string') {
         return;
       }
@@ -170,13 +171,13 @@ export class SessionSocket {
         this.identityRefreshUsed = false;
       }
       this.options.onMessage(event.data, frame);
-    };
+    });
     socket.onerror = () => undefined;
-    socket.onclose = (event) => {
+    socket.onclose = contain('SessionSocket.close', (event: { code?: number }) => {
       if (this.epoch === epoch) {
         this.handleClose(epoch, event.code ?? STALE_CLOSE_CODE);
       }
-    };
+    });
   }
 
   private handleClose(epoch: number, code: number): void {
@@ -210,17 +211,20 @@ export class SessionSocket {
     if (isExhausted(SOCKET_BACKOFF, this.attempts)) {
       this.options.onState('failed');
       this.exhausted = true;
-      this.reconnectTimer = setTimeout(() => this.recover(), EXHAUSTED_RETRY_MS);
+      this.reconnectTimer = setTimeout(contain('SessionSocket.recover', () => this.recover()), EXHAUSTED_RETRY_MS);
       return;
     }
     const delay = backoffDelay(SOCKET_BACKOFF, this.attempts);
     this.options.onState('reconnecting');
-    this.reconnectTimer = setTimeout(() => {
-      this.attempts += 1;
-      if (this.sessionId !== null) {
-        this.connect(this.sessionId);
-      }
-    }, delay);
+    this.reconnectTimer = setTimeout(
+      contain('SessionSocket.reconnect', () => {
+        this.attempts += 1;
+        if (this.sessionId !== null) {
+          this.connect(this.sessionId);
+        }
+      }),
+      delay,
+    );
   }
 
   private recover(): void {
@@ -240,11 +244,14 @@ export class SessionSocket {
   private startLiveness(): void {
     this.stopLiveness();
     this.lastFrameAt = Date.now();
-    this.livenessTimer = setInterval(() => {
-      if (Date.now() - this.lastFrameAt >= STALE_AFTER_MS) {
-        this.dropStaleSocket();
-      }
-    }, LIVENESS_CHECK_MS);
+    this.livenessTimer = setInterval(
+      contain('SessionSocket.liveness', () => {
+        if (Date.now() - this.lastFrameAt >= STALE_AFTER_MS) {
+          this.dropStaleSocket();
+        }
+      }),
+      LIVENESS_CHECK_MS,
+    );
   }
 
   private stopLiveness(): void {