@blario/react-native 0.1.5 → 0.1.7

package/src/nudge/NudgeBubble.tsx

@@ -5,6 +5,7 @@ import type { LauncherPlacement } from '../chat/Launcher.tsx';
 import type { UiStrings } from '../ui/strings.ts';
 import { useInsets } from '../ui/useInsets.ts';
 import { initialsOf, type NudgeView } from './nudge.ts';
+import { contain } from '../telemetry/contain.ts';
 
 export interface NudgeBubbleProps {
   nudge: NudgeView;
@@ -32,27 +33,27 @@ export function NudgeBubble({ nudge, strings, color, placement, launcherVisible,
           {nudge.sender === null ? null : <Text style={styles.name}>{nudge.sender.name}</Text>}
           {nudge.sender?.subtitle === null || nudge.sender === null ? null : <Text style={styles.subtitle}>{nudge.sender.subtitle}</Text>}
         </View>
-        <Pressable accessibilityLabel={strings.nudgeDismiss} hitSlop={10} onPress={onDecline}>
+        <Pressable accessibilityLabel={strings.nudgeDismiss} hitSlop={10} onPress={contain('NudgeBubble.decline', onDecline)}>
           <Text style={styles.close}>×</Text>
         </Pressable>
       </View>
       <Text style={styles.message}>{nudge.bubbleMessage}</Text>
       {nudge.progress === null ? null : <ProgressBar total={nudge.progress.total} completed={nudge.progress.completed} color={color} />}
       {nudge.continuation ? (
-        <Pressable accessibilityRole="button" style={[styles.primary, { backgroundColor: color }]} onPress={onAccept}>
+        <Pressable accessibilityRole="button" style={[styles.primary, { backgroundColor: color }]} onPress={contain('NudgeBubble.accept', onAccept)}>
           <Text style={styles.primaryText}>{nudge.ctaLabel ?? strings.nudgeAccept}</Text>
         </Pressable>
       ) : (
         <View>
           <Text style={styles.prompt}>{strings.nudgePrompt}</Text>
           <View style={styles.actions}>
-            <Pressable accessibilityRole="button" style={[styles.primary, styles.action, { backgroundColor: color }]} onPress={onAccept}>
+            <Pressable accessibilityRole="button" style={[styles.primary, styles.action, { backgroundColor: color }]} onPress={contain('NudgeBubble.accept', onAccept)}>
               <Text style={styles.primaryText}>{strings.nudgeAccept}</Text>
             </Pressable>
-            <Pressable accessibilityRole="button" style={[styles.secondary, styles.action]} onPress={onDecline}>
+            <Pressable accessibilityRole="button" style={[styles.secondary, styles.action]} onPress={contain('NudgeBubble.decline', onDecline)}>
               <Text style={styles.secondaryText}>{strings.nudgeDecline}</Text>
             </Pressable>
-            <Pressable accessibilityRole="button" style={[styles.secondary, styles.action]} onPress={onLater}>
+            <Pressable accessibilityRole="button" style={[styles.secondary, styles.action]} onPress={contain('NudgeBubble.later', onLater)}>
               <Text style={styles.secondaryText}>{strings.nudgeLater}</Text>
             </Pressable>
           </View>

package/src/snapshot/capture.ts

@@ -12,8 +12,8 @@ import { describeScrollDirections } from './scroll.ts';
 import { groupIntoLines, limitCharacters, type PositionedText } from './text-layout.ts';
 import { orderForReading } from './ordering.ts';
 import { buildView } from './view.ts';
-import { classifyVisibility, keepInTextTree, measureScrollGeometries, type ScrollGeometries } from './visibility.ts';
-import { dropWrapperDuplicates, limitOffscreen, type MeasuredCandidate } from './wrappers.ts';
+import { classifyVisibility, keepInTextTree, markOffscreenText, measureScrollGeometries, type ScrollGeometries } from './visibility.ts';
+import { dropWrapperDuplicates, type MeasuredCandidate } from './wrappers.ts';
 
 export interface Snapshot {
   screen: string;
@@ -27,6 +27,7 @@ export interface SnapshotDependencies {
   getAnchorFiber: () => Fiber | null;
   registry: ElementRegistry;
   getViewport: () => Size;
+  getWindow: () => Size;
   getExtraRoutes: () => string[];
 }
 
@@ -77,7 +78,7 @@ export class SnapshotCapturer {
           return null;
         }
         const visibility = classifyVisibility(rect, viewport, block.scrollContainers, geometries);
-        return keepInTextTree(visibility, rect, viewport, options.viewportOnly) ? { rect, text: block.text, heading: block.heading } : null;
+        return keepInTextTree(visibility, rect, viewport, options.viewportOnly) ? { rect, text: markOffscreenText(visibility, block.text), heading: block.heading } : null;
       }),
     );
     const lines = limitCharacters(groupIntoLines(measured.filter((entry): entry is PositionedText => entry !== null)), options.maxChars);
@@ -91,8 +92,9 @@ export class SnapshotCapturer {
     return root === null ? [] : collect(root).focusedScreens;
   }
 
+  // The whole window, not the part above the keyboard: what the keyboard covers is still pressable.
   private async measureVisible(kept: Candidate[], geometries: ScrollGeometries): Promise<MeasuredCandidate[]> {
-    const viewport = this.dependencies.getViewport();
+    const viewport = this.dependencies.getWindow();
     const measured = await Promise.all(
       kept.map(async (candidate): Promise<MeasuredCandidate | null> => {
         const rect = await measureHost(candidate.host);
@@ -104,10 +106,10 @@ export class SnapshotCapturer {
           return null;
         }
         const offscreen = visibility.kind === 'offscreen' ? visibility : null;
-        return { candidate, rect, offscreen: offscreen?.direction ?? null, distance: offscreen?.distance ?? 0 };
+        return { candidate, rect, offscreen: offscreen?.direction ?? null };
       }),
     );
-    return limitOffscreen(measured.filter((entry): entry is MeasuredCandidate => entry !== null));
+    return measured.filter((entry): entry is MeasuredCandidate => entry !== null);
   }
 
   private assemble(

package/src/snapshot/render.ts

@@ -17,7 +17,7 @@ function flag(name: string, enabled: boolean): Attribute {
 function renderAttributes(attributes: Attribute[]): string {
   return attributes
     .filter((attribute): attribute is readonly [string, string] => attribute[1] !== null)
-    .map(([name, value]) => (value === '' ? name : `${name}=${clip(value, ATTRIBUTE_LIMIT)}`))
+    .map(([name, value]) => (value === '' ? name : `${name}=${name === 'list' ? value : clip(value, ATTRIBUTE_LIMIT)}`))
     .filter((rendered) => rendered.length > 0)
     .join(' ');
 }

package/src/snapshot/visibility.ts

@@ -16,7 +16,7 @@ export type Offscreen = 'above' | 'below' | 'left' | 'right';
 
 export type Visibility =
   | { kind: 'visible' }
-  | { kind: 'offscreen'; direction: Offscreen; distance: number }
+  | { kind: 'offscreen'; direction: Offscreen }
   | { kind: 'hidden' };
 
 const VISIBLE: Visibility = { kind: 'visible' };
@@ -25,13 +25,9 @@ const HIDDEN: Visibility = { kind: 'hidden' };
 function offscreenAgainst(rect: Rect, geometry: ScrollGeometry): Visibility {
   const { viewport, horizontal } = geometry;
   if (horizontal) {
-    return rect.x >= viewport.x + viewport.width
-      ? { kind: 'offscreen', direction: 'right', distance: rect.x - (viewport.x + viewport.width) }
-      : { kind: 'offscreen', direction: 'left', distance: viewport.x - (rect.x + rect.width) };
+    return { kind: 'offscreen', direction: rect.x >= viewport.x + viewport.width ? 'right' : 'left' };
   }
-  return rect.y >= viewport.y + viewport.height
-    ? { kind: 'offscreen', direction: 'below', distance: rect.y - (viewport.y + viewport.height) }
-    : { kind: 'offscreen', direction: 'above', distance: viewport.y - (rect.y + rect.height) };
+  return { kind: 'offscreen', direction: rect.y >= viewport.y + viewport.height ? 'below' : 'above' };
 }
 
 export function classifyVisibility(rect: Rect, window: Size, containers: Fiber[], geometries: ScrollGeometries): Visibility {
@@ -52,10 +48,15 @@ function isBeyondWindowEdge(rect: Rect, window: Size): boolean {
   return rect.x >= window.width || rect.x + rect.width <= 0;
 }
 
+const OFFSCREEN_MARK = '[off-screen]';
+
+// Text off to the side can be another page of a pager or another day of a calendar, so it can't read as what's on screen.
+export function markOffscreenText(visibility: Visibility, text: string): string {
+  const sideways = visibility.kind === 'offscreen' && (visibility.direction === 'left' || visibility.direction === 'right');
+  return sideways ? `${OFFSCREEN_MARK} ${text}` : text;
+}
+
 export function keepInTextTree(visibility: Visibility, rect: Rect, window: Size, viewportOnly: boolean): boolean {
-  if (visibility.kind === 'offscreen' && (visibility.direction === 'left' || visibility.direction === 'right')) {
-    return false;
-  }
   if (visibility.kind === 'hidden' && isBeyondWindowEdge(rect, window)) {
     return false;
   }

package/src/snapshot/wrappers.ts

@@ -7,7 +7,6 @@ export interface MeasuredCandidate {
   candidate: Candidate;
   rect: Rect;
   offscreen: Offscreen | null;
-  distance: number;
 }
 
 const RECT_TOLERANCE = 1;
@@ -56,15 +55,3 @@ export function dropWrapperDuplicates(measured: MeasuredCandidate[]): MeasuredCa
   }
   return measured.filter((entry) => !wrappers.has(entry));
 }
-
-const OFFSCREEN_LIMIT = 30;
-
-export function limitOffscreen(measured: MeasuredCandidate[]): MeasuredCandidate[] {
-  // Every option of a wheel stays listed: one dropped here could never be selected.
-  const hidden = measured.filter((entry) => entry.offscreen !== null && entry.candidate.kind !== 'scroll' && entry.candidate.wheelOption !== true);
-  if (hidden.length <= OFFSCREEN_LIMIT) {
-    return measured;
-  }
-  const dropped = new Set(hidden.sort((left, right) => left.distance - right.distance).slice(OFFSCREEN_LIMIT));
-  return measured.filter((entry) => !dropped.has(entry));
-}

package/src/telemetry/contain.ts

@@ -0,0 +1,28 @@
+// A callback's error has nothing above it: React's boundaries never see it and, in a release build, React Native's
+// global handler ends the host app. So every way into the SDK that nothing else catches goes through here.
+type Report = (context: string, error: unknown) => void;
+
+let report: Report = () => undefined;
+
+export function setContainmentReporter(reporter: Report): void {
+  report = reporter;
+}
+
+export function attempt<T>(context: string, run: () => T): T | undefined {
+  try {
+    return run();
+  } catch (error) {
+    try {
+      report(context, error);
+    } catch {
+      return undefined;
+    }
+    return undefined;
+  }
+}
+
+export function contain<Args extends unknown[]>(context: string, callback: (...args: Args) => unknown): (...args: Args) => void {
+  return (...args) => {
+    attempt(context, () => callback(...args));
+  };
+}

package/src/telemetry/sdk-reporter.ts

@@ -2,6 +2,7 @@ import { readAppInfo } from '../backend/app-info.ts';
 import { SDK_VERSION } from '../version.ts';
 import { SENTRY_DSN, SENTRY_ENVIRONMENT } from './build-info.generated.ts';
 import { Reporter, type ReportIdentity } from './reporter.ts';
+import { setContainmentReporter } from './contain.ts';
 
 const HEX_DIGITS = 16;
 
@@ -24,6 +25,8 @@ export function reportSdkError(context: string, error?: unknown): void {
   reporter.report(context, error);
 }
 
+setContainmentReporter(reportSdkError);
+
 export function recordSdkBreadcrumb(category: string, message: string): void {
   reporter.addBreadcrumb(category, message);
 }

package/src/transport/relay-transport.ts

@@ -1,6 +1,7 @@
 import type { OutboundFrame } from '../agent/frames.ts';
 import { normalizeRelayUrl } from './connection-options.ts';
 import type { AgentTransport } from './transport.ts';
+import { contain } from '../telemetry/contain.ts';
 
 const RECONNECT_BASE_MS = 1000;
 const RECONNECT_MAX_MS = 5000;
@@ -56,15 +57,15 @@ export class RelayTransport implements AgentTransport {
       return;
     }
     this.socket = socket;
-    socket.onopen = () => {
+    socket.onopen = contain('Relay.open', () => {
       this.attempts = 0;
-    };
-    socket.onmessage = (event) => {
+    });
+    socket.onmessage = contain('Relay.message', (event: { data?: unknown }) => {
       if (typeof event.data === 'string') {
         this.listener?.(event.data);
       }
-    };
-    socket.onclose = () => this.scheduleReconnect();
+    });
+    socket.onclose = contain('Relay.close', () => this.scheduleReconnect());
     socket.onerror = () => undefined;
   }
 
@@ -74,9 +75,12 @@ export class RelayTransport implements AgentTransport {
     }
     const delay = Math.min(RECONNECT_BASE_MS * 2 ** this.attempts, RECONNECT_MAX_MS);
     this.attempts += 1;
-    this.reconnectTimer = setTimeout(() => {
-      this.reconnectTimer = null;
-      this.connect();
-    }, delay);
+    this.reconnectTimer = setTimeout(
+      contain('Relay.reconnect', () => {
+        this.reconnectTimer = null;
+        this.connect();
+      }),
+      delay,
+    );
   }
 }

package/src/version.ts

@@ -1 +1 @@
-export const SDK_VERSION = '0.1.5';
+export const SDK_VERSION = '0.1.7';