@goliapkg/sentori-react-native 0.7.6 → 0.8.1

package/src/capture.ts

@@ -1,7 +1,9 @@
 import { sealTrail, shouldSample } from '@goliapkg/sentori-core';
 
 import { addBreadcrumb, getBreadcrumbs } from './breadcrumbs';
+import { getBundleInfo } from './bundle-info';
 import { getConfig, isInitialized } from './config';
+import { getFeatureFlagSnapshot } from './feature-flags';
 import { symbolicateErrorViaMetro } from './handlers/dev-symbolicate';
 import { captureScreenshot } from './handlers/screenshot';
 import { markSessionErrored } from './session-tracker';
@@ -97,6 +99,8 @@ export const captureError = (error: Error, extras?: CaptureExtras): void => {
     return;
   }
 
+  const flags = getFeatureFlagSnapshot();
+  const bundle = getBundleInfo();
   const event: Event = {
     id: uuidV7(),
     timestamp: new Date().toISOString(),
@@ -108,6 +112,8 @@ export const captureError = (error: Error, extras?: CaptureExtras): void => {
     app: collectApp(config.release),
     user: extras?.user ?? _user,
     tags: extras?.tags,
+    ...(flags ? { flags } : {}),
+    ...(bundle ? { bundle } : {}),
     breadcrumbs: getBreadcrumbs(),
     error: errorToObject(error),
     fingerprint: extras?.fingerprint,

package/src/feature-flags.ts

@@ -0,0 +1,47 @@
+// v0.9.0 #13 — feature-flag dimensionality.
+//
+// `sentori.setFeatureFlag(name, value)` is the dual of `setTag()` for
+// experiment / flag state: distinct dashboard dimension, dense small
+// strings, designed to be filtered/faceted on. Bugsnag's analog has
+// proven surprisingly load-bearing. Implementation is a tiny in-memory
+// map; every capture rides along the current snapshot.
+//
+// Constraints (silent — never throw):
+//   • name and value are strings, length 1..200
+//   • cap at 50 distinct flags to bound payload
+//   • already-set name can update (no cap check)
+
+const MAX_FLAGS = 50;
+const MAX_LEN = 200;
+
+let _flags = new Map<string, string>();
+
+export const setFeatureFlag = (name: string, value: string): void => {
+  if (typeof name !== 'string' || name.length === 0 || name.length > MAX_LEN) return;
+  if (typeof value !== 'string' || value.length > MAX_LEN) return;
+  if (_flags.size >= MAX_FLAGS && !_flags.has(name)) return;
+  _flags.set(name, value);
+};
+
+export const clearFeatureFlag = (name: string): void => {
+  _flags.delete(name);
+};
+
+export const clearAllFeatureFlags = (): void => {
+  _flags.clear();
+};
+
+export const getFeatureFlags = (): Record<string, string> => {
+  return Object.fromEntries(_flags);
+};
+
+/** Internal — capture.ts pulls a snapshot per event. Empty object
+ *  collapses out of the payload via `Object.keys.length === 0` check. */
+export const getFeatureFlagSnapshot = (): null | Record<string, string> => {
+  if (_flags.size === 0) return null;
+  return Object.fromEntries(_flags);
+};
+
+export const __resetFeatureFlagsForTests = (): void => {
+  _flags.clear();
+};

package/src/feedback-widget.tsx

@@ -0,0 +1,309 @@
+// v0.9.1 #9 — Feedback Widget.
+//
+// `<FeedbackButton trigger="shake|manual|fab" />` — drop into the
+// app root, opens a modal prompt that submits via the existing
+// `sentori.sendUserFeedback` API. Shake detection is opt-in and
+// requires `expo-sensors` (Accelerometer) — falls back to manual
+// trigger if not installed. The button can also be controlled
+// programmatically via a ref: `feedbackRef.current.open()`.
+//
+// Aesthetic: very plain Modal + Text + TextInput so it adopts the
+// host app's color scheme without forcing a sentori theme on it.
+
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+import { sendUserFeedback } from './capture';
+
+type Trigger = 'fab' | 'manual' | 'shake';
+
+export type FeedbackButtonHandle = {
+  /** Open the feedback modal. Returns immediately. */
+  open: (defaults?: { body?: string; eventId?: string; title?: string }) => void;
+  /** Close the modal if open. */
+  close: () => void;
+};
+
+export type FeedbackButtonProps = {
+  /** When to surface the prompt. Default `'fab'`. */
+  trigger?: Trigger;
+  /** Pass the eventId from the last `captureException` to tie the
+   *  report to that crash. Optional. */
+  eventId?: string;
+  /** Localized strings. Defaults are English. */
+  labels?: {
+    title?: string;
+    bodyPlaceholder?: string;
+    emailPlaceholder?: string;
+    submit?: string;
+    cancel?: string;
+    sent?: string;
+  };
+  /** Shake sensitivity in m/s² above gravity. Default 18 (≈ a normal
+   *  intentional shake; lower triggers more easily). Only used when
+   *  `trigger="shake"`. */
+  shakeThreshold?: number;
+};
+
+export const FeedbackButton = forwardRef<FeedbackButtonHandle, FeedbackButtonProps>(
+  function FeedbackButton(props, ref) {
+    const trigger: Trigger = props.trigger ?? 'fab';
+    const [open, setOpen] = useState(false);
+    const [title, setTitle] = useState('');
+    const [body, setBody] = useState('');
+    const [email, setEmail] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const [sent, setSent] = useState(false);
+    const eventIdRef = useRef<string | undefined>(props.eventId);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        open: (defaults) => {
+          setTitle(defaults?.title ?? '');
+          setBody(defaults?.body ?? '');
+          eventIdRef.current = defaults?.eventId ?? props.eventId;
+          setSent(false);
+          setOpen(true);
+        },
+        close: () => setOpen(false),
+      }),
+      [props.eventId],
+    );
+
+    // Shake detection — opt-in. We load expo-sensors lazily so apps
+    // that don't install it never pay the bundle cost.
+    useEffect(() => {
+      if (trigger !== 'shake') return;
+      let sub: { remove: () => void } | null = null;
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const mod = require('expo-sensors') as {
+          Accelerometer?: {
+            addListener: (cb: (d: { x: number; y: number; z: number }) => void) => {
+              remove: () => void;
+            };
+            setUpdateInterval: (ms: number) => void;
+          };
+        };
+        const A = mod.Accelerometer;
+        if (!A) return;
+        A.setUpdateInterval(100);
+        const thr = props.shakeThreshold ?? 18;
+        let lastTriggerAt = 0;
+        sub = A.addListener(({ x, y, z }) => {
+          const mag = Math.sqrt(x * x + y * y + z * z) * 9.81; // g → m/s²
+          const now = Date.now();
+          if (mag > thr && now - lastTriggerAt > 1500) {
+            lastTriggerAt = now;
+            setSent(false);
+            setOpen(true);
+          }
+        });
+      } catch {
+        // expo-sensors not installed → silently fall back to manual
+      }
+      return () => {
+        if (sub) sub.remove();
+      };
+    }, [trigger, props.shakeThreshold]);
+
+    const onSubmit = useCallback(async () => {
+      if (!title.trim() || !body.trim()) return;
+      setSubmitting(true);
+      try {
+        await sendUserFeedback({
+          title: title.trim().slice(0, 200),
+          body: body.trim().slice(0, 8000),
+          email: email.trim() || undefined,
+          eventId: eventIdRef.current,
+        });
+        setSent(true);
+        setTimeout(() => setOpen(false), 1200);
+      } finally {
+        setSubmitting(false);
+      }
+    }, [title, body, email]);
+
+    const L = {
+      bodyPlaceholder: 'What happened?',
+      cancel: 'Cancel',
+      emailPlaceholder: 'email (optional)',
+      sent: 'Thanks — report sent.',
+      submit: 'Send',
+      title: 'Report a problem',
+      ...props.labels,
+    };
+
+    return (
+      <>
+        {trigger === 'fab' && (
+          <Pressable
+            accessibilityLabel="Open feedback"
+            onPress={() => {
+              setSent(false);
+              setOpen(true);
+            }}
+            style={styles.fab}
+          >
+            <Text style={styles.fabText}>?</Text>
+          </Pressable>
+        )}
+        <Modal animationType="fade" transparent visible={open} onRequestClose={() => setOpen(false)}>
+          <View style={styles.backdrop}>
+            <View style={styles.card}>
+              {sent ? (
+                <Text style={styles.sentMessage}>{L.sent}</Text>
+              ) : (
+                <>
+                  <Text style={styles.heading}>{L.title}</Text>
+                  <TextInput
+                    autoCapitalize="sentences"
+                    onChangeText={setTitle}
+                    placeholder="Subject"
+                    placeholderTextColor="#888"
+                    style={styles.titleInput}
+                    value={title}
+                  />
+                  <TextInput
+                    multiline
+                    onChangeText={setBody}
+                    placeholder={L.bodyPlaceholder}
+                    placeholderTextColor="#888"
+                    style={styles.bodyInput}
+                    textAlignVertical="top"
+                    value={body}
+                  />
+                  <TextInput
+                    autoCapitalize="none"
+                    keyboardType="email-address"
+                    onChangeText={setEmail}
+                    placeholder={L.emailPlaceholder}
+                    placeholderTextColor="#888"
+                    style={styles.emailInput}
+                    value={email}
+                  />
+                  <View style={styles.actions}>
+                    <Pressable onPress={() => setOpen(false)} style={styles.cancelBtn}>
+                      <Text style={styles.cancelText}>{L.cancel}</Text>
+                    </Pressable>
+                    <Pressable
+                      disabled={submitting || !title.trim() || !body.trim()}
+                      onPress={onSubmit}
+                      style={[styles.submitBtn, submitting && styles.submitBtnDisabled]}
+                    >
+                      <Text style={styles.submitText}>
+                        {submitting ? '…' : L.submit}
+                      </Text>
+                    </Pressable>
+                  </View>
+                </>
+              )}
+            </View>
+          </View>
+        </Modal>
+      </>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  actions: {
+    flexDirection: 'row',
+    gap: 8,
+    justifyContent: 'flex-end',
+  },
+  backdrop: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  bodyInput: {
+    backgroundColor: '#f7f7f8',
+    borderColor: '#e5e5e8',
+    borderRadius: 6,
+    borderWidth: 1,
+    color: '#111',
+    fontSize: 14,
+    marginBottom: 8,
+    minHeight: 100,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  cancelBtn: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+  },
+  cancelText: { color: '#666', fontSize: 14 },
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    padding: 16,
+    width: '100%',
+  },
+  emailInput: {
+    backgroundColor: '#f7f7f8',
+    borderColor: '#e5e5e8',
+    borderRadius: 6,
+    borderWidth: 1,
+    color: '#111',
+    fontSize: 14,
+    marginBottom: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  fab: {
+    alignItems: 'center',
+    backgroundColor: '#111',
+    borderRadius: 24,
+    bottom: 28,
+    elevation: 4,
+    height: 48,
+    justifyContent: 'center',
+    position: 'absolute',
+    right: 18,
+    shadowColor: '#000',
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.18,
+    shadowRadius: 4,
+    width: 48,
+  },
+  fabText: { color: '#fff', fontSize: 22, fontWeight: '500' },
+  heading: { color: '#111', fontSize: 18, fontWeight: '500', marginBottom: 12 },
+  sentMessage: { color: '#111', fontSize: 14, paddingVertical: 18, textAlign: 'center' },
+  submitBtn: {
+    backgroundColor: '#111',
+    borderRadius: 6,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  submitBtnDisabled: { opacity: 0.5 },
+  submitText: { color: '#fff', fontSize: 14, fontWeight: '500' },
+  titleInput: {
+    backgroundColor: '#f7f7f8',
+    borderColor: '#e5e5e8',
+    borderRadius: 6,
+    borderWidth: 1,
+    color: '#111',
+    fontSize: 14,
+    marginBottom: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+});

package/src/handlers/network.ts

@@ -4,9 +4,15 @@ import { addBreadcrumb } from '../breadcrumbs';
 import { getConfig } from '../config';
 
 let _installed = false;
+let _graphqlEnabled = true;
 
 const AUTH_PARAMS = ['token', 'key', 'password', 'secret', 'access_token'];
 
+// v0.9.0 #11 — cap on body size we'll parse for `operationName`.
+// 8 KB is generous for any sensible GraphQL request and keeps the
+// hot-path JSON.parse bounded.
+const GQL_BODY_MAX_BYTES = 8 * 1024;
+
 // Requests to our own ingest endpoint shouldn't be traced — otherwise
 // every span upload spawns another http.client span, and so on.
 const isIngestUrl = (url: string): boolean => {
@@ -14,13 +20,20 @@ const isIngestUrl = (url: string): boolean => {
   return !!base && url.startsWith(base);
 };
 
-export const installNetworkHandler = (): void => {
+export const installNetworkHandler = (opts?: { graphql?: boolean }): void => {
   if (_installed) return;
   _installed = true;
+  _graphqlEnabled = opts?.graphql !== false;
   patchFetch();
   patchXhr();
 };
 
+/** Test-only — reset module state between runs. */
+export const __resetNetworkHandlerForTests = (): void => {
+  _installed = false;
+  _graphqlEnabled = true;
+};
+
 // ── fetch ──────────────────────────────────────────────────────────
 
 function patchFetch(): void {
@@ -37,13 +50,32 @@ function patchFetch(): void {
         ? (input as Request).method
         : 'GET')) as string;
 
+    // v0.9.0 #11 — GraphQL operation auto-naming. Inspect the request
+    // body cheaply (string only, < 8 KB) when the request looks like
+    // GraphQL (URL contains /graphql or content-type hints it). On
+    // success we override the span name to `graphql/<operationName>`
+    // and ride along `gql.operation` on the breadcrumb so the dashboard
+    // can group + filter by operation instead of by the useless
+    // `POST /graphql` line.
+    const gqlOp = _graphqlEnabled
+      ? extractGraphqlOpFromInit(init, input, url)
+      : undefined;
+
     // Phase 35 sub-C: also open an http.client span so the request
     // shows up in the trace waterfall. Breadcrumbs stay — they're
     // attached to error events at capture time and serve a different
     // surface (the "last 100 things" timeline on the issue page).
     const span = startSpan('http.client', {
-      name: `${method.toUpperCase()} ${normalizeUrl(scrubbed)}`,
-      tags: { 'http.method': method.toUpperCase(), 'http.url': scrubbed },
+      name: gqlOp
+        ? `graphql/${gqlOp}`
+        : `${method.toUpperCase()} ${normalizeUrl(scrubbed)}`,
+      tags: gqlOp
+        ? {
+            'http.method': method.toUpperCase(),
+            'http.url': scrubbed,
+            'gql.operation': gqlOp,
+          }
+        : { 'http.method': method.toUpperCase(), 'http.url': scrubbed },
     });
 
     // Inject traceparent header on outbound requests.
@@ -58,12 +90,20 @@ function patchFetch(): void {
       span.finish({ status: resp.status >= 400 ? 'error' : 'ok' });
       addBreadcrumb({
         type: 'net',
-        data: {
-          method,
-          url: scrubbed,
-          status: resp.status,
-          durationMs: Date.now() - start,
-        },
+        data: gqlOp
+          ? {
+              method,
+              url: scrubbed,
+              status: resp.status,
+              durationMs: Date.now() - start,
+              'gql.operation': gqlOp,
+            }
+          : {
+              method,
+              url: scrubbed,
+              status: resp.status,
+              durationMs: Date.now() - start,
+            },
       });
       return resp;
     } catch (e) {
@@ -78,6 +118,7 @@ function patchFetch(): void {
           status: 0,
           durationMs: Date.now() - start,
           error: String(e),
+          ...(gqlOp ? { 'gql.operation': gqlOp } : {}),
         },
       });
       throw e;
@@ -98,6 +139,7 @@ type TracedXhr = XMLHttpRequest & {
   __sentoriUrl?: string;
   __sentoriSpan?: ReturnType<typeof startSpan>;
   __sentoriStart?: number;
+  __sentoriGqlOp?: string;
 };
 
 function patchXhr(): void {
@@ -129,9 +171,20 @@ function patchXhr(): void {
     if (isIngestUrl(this.__sentoriUrl ?? '')) return originalSend.call(this, body);
     const method = this.__sentoriMethod ?? 'GET';
     const url = scrubUrl(this.__sentoriUrl ?? '');
+    // v0.9.0 #11 — GraphQL operation auto-naming on XHR.
+    const gqlOp = _graphqlEnabled
+      ? extractGraphqlOpFromXhr(body, this.__sentoriUrl ?? '')
+      : undefined;
+    this.__sentoriGqlOp = gqlOp;
     const span = startSpan('http.client', {
-      name: `${method} ${normalizeUrl(url)}`,
-      tags: { 'http.method': method, 'http.url': url },
+      name: gqlOp ? `graphql/${gqlOp}` : `${method} ${normalizeUrl(url)}`,
+      tags: gqlOp
+        ? {
+            'http.method': method,
+            'http.url': url,
+            'gql.operation': gqlOp,
+          }
+        : { 'http.method': method, 'http.url': url },
     });
     this.__sentoriSpan = span;
     this.__sentoriStart = Date.now();
@@ -154,14 +207,23 @@ function patchXhr(): void {
       // status 0 means network error / aborted / CORS block — treat
       // as error. The `abort` event handler below downgrades aborts.
       s.finish({ status: status === 0 || status >= 400 ? 'error' : 'ok' });
+      const op = this.__sentoriGqlOp;
       addBreadcrumb({
         type: 'net',
-        data: {
-          method,
-          url,
-          status,
-          durationMs: Date.now() - (this.__sentoriStart ?? Date.now()),
-        },
+        data: op
+          ? {
+              method,
+              url,
+              status,
+              durationMs: Date.now() - (this.__sentoriStart ?? Date.now()),
+              'gql.operation': op,
+            }
+          : {
+              method,
+              url,
+              status,
+              durationMs: Date.now() - (this.__sentoriStart ?? Date.now()),
+            },
       });
     };
 
@@ -171,9 +233,17 @@ function patchXhr(): void {
       if (!s) return;
       this.__sentoriSpan = undefined;
       s.finish({ status: 'cancelled' });
+      const op = this.__sentoriGqlOp;
       addBreadcrumb({
         type: 'net',
-        data: { method, url, status: 0, durationMs: Date.now() - (this.__sentoriStart ?? Date.now()), error: 'aborted' },
+        data: {
+          method,
+          url,
+          status: 0,
+          durationMs: Date.now() - (this.__sentoriStart ?? Date.now()),
+          error: 'aborted',
+          ...(op ? { 'gql.operation': op } : {}),
+        },
       });
     });
 
@@ -224,3 +294,113 @@ const scrubUrl = (url: string): string => {
     return url;
   }
 };
+
+// ── v0.9.0 #11 — GraphQL operation extraction ─────────────────────
+//
+// Cheap, sync, never throws. Two callers (fetch + xhr) feed in
+// whatever they have on hand; both end up calling `parseGqlOpName`.
+
+function lookGraphqlish(url: string, contentType?: string): boolean {
+  if (contentType) {
+    if (contentType.includes('graphql')) return true;
+    // application/json is too generic to gate on alone, but combined
+    // with a `/graphql` path it's a strong hint.
+  }
+  if (url.includes('/graphql')) return true;
+  return false;
+}
+
+/** Pull `operationName` out of a JSON body or a raw query body. Returns
+ *  `undefined` on any failure mode. Cap at GQL_BODY_MAX_BYTES so a
+ *  hostile / oversize body never lands in `JSON.parse`. */
+export function parseGqlOpName(body: string): string | undefined {
+  if (typeof body !== 'string' || body.length === 0) return undefined;
+  if (body.length > GQL_BODY_MAX_BYTES) return undefined;
+  // First char `{` or `[` → JSON path. Most clients (Apollo, urql,
+  // Relay) send `{"query":"…","operationName":"…","variables":{…}}`
+  // or an array of such objects (batched).
+  const first = body.charCodeAt(0);
+  if (first === 0x7b /* { */ || first === 0x5b /* [ */) {
+    try {
+      const parsed = JSON.parse(body) as unknown;
+      const candidate = Array.isArray(parsed) ? parsed[0] : parsed;
+      if (candidate && typeof candidate === 'object') {
+        const name = (candidate as { operationName?: unknown }).operationName;
+        if (typeof name === 'string' && name.length > 0 && name.length <= 200) {
+          return name;
+        }
+        // No operationName — try to sniff the `query` string for
+        // `query Foo {…}` / `mutation Bar {…}` / `subscription Baz {…}`.
+        const q = (candidate as { query?: unknown }).query;
+        if (typeof q === 'string') return parseQueryStringOpName(q);
+      }
+    } catch {
+      return undefined;
+    }
+    return undefined;
+  }
+  // `application/graphql` body is the bare query string — no JSON wrapper.
+  return parseQueryStringOpName(body);
+}
+
+function parseQueryStringOpName(query: string): string | undefined {
+  // Skip leading whitespace + comments. We only need the first non-trivial
+  // top-level operation keyword to extract a name; nested operations are
+  // a non-issue because GraphQL forbids them.
+  const m = /^\s*(?:#[^\n]*\n\s*)*(query|mutation|subscription)\s+([A-Za-z_][A-Za-z0-9_]*)/.exec(
+    query,
+  );
+  return m?.[2];
+}
+
+function extractGraphqlOpFromInit(
+  init: RequestInit | undefined,
+  input: RequestInfo | URL,
+  url: string,
+): string | undefined {
+  const method = (init?.method ??
+    (typeof input !== 'string' && 'method' in (input as Request)
+      ? (input as Request).method
+      : 'GET')) as string;
+  if (method.toUpperCase() !== 'POST') return undefined;
+  const contentType = headerValue(init, input, 'content-type');
+  if (!lookGraphqlish(url, contentType)) return undefined;
+  const body = init?.body;
+  if (typeof body !== 'string') return undefined;
+  return parseGqlOpName(body);
+}
+
+function extractGraphqlOpFromXhr(
+  body: Document | XMLHttpRequestBodyInit | null | undefined,
+  url: string,
+): string | undefined {
+  if (typeof body !== 'string') return undefined;
+  if (!lookGraphqlish(url)) return undefined;
+  return parseGqlOpName(body);
+}
+
+function headerValue(
+  init: RequestInit | undefined,
+  input: RequestInfo | URL,
+  name: string,
+): string | undefined {
+  const target = name.toLowerCase();
+  if (init?.headers) {
+    try {
+      const h = new Headers(init.headers);
+      const v = h.get(target);
+      if (v) return v;
+    } catch {
+      // ignore — bad header shape, treat as absent
+    }
+  }
+  if (typeof input !== 'string' && !(input instanceof URL)) {
+    try {
+      const v = (input as Request).headers.get(target);
+      if (v) return v;
+    } catch {
+      // ignore
+    }
+  }
+  return undefined;
+}