react-native-bug-reporter 1.0.0

package/src/BugReporterProvider.tsx

@@ -0,0 +1,178 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type {
+  BugReportInput,
+  BugReporterConfig,
+  CollectedContext,
+  ScreenshotData,
+  SubmitState,
+} from './types';
+import { BugReporterContext } from './context/BugReporterContext';
+import { useScreenshotDetector } from './hooks/useScreenshotDetector';
+import { collectContext } from './collectors/collectContext';
+import { submitBugReport } from './services/bugReportService';
+import { BugReportModal } from './components/BugReportModal';
+import { ScreenshotEditor } from './components/ScreenshotEditor';
+import { resolveTheme } from './theme';
+import { logger } from './utils/logger';
+
+interface Props {
+  config: BugReporterConfig;
+  children: React.ReactNode;
+}
+
+/**
+ * Top-level SDK provider. Wrap your app in it once:
+ *
+ *   <BugReporterProvider config={{ apiBaseUrl: '...' }}>
+ *     <App />
+ *   </BugReporterProvider>
+ *
+ * It listens for screenshots, collects context, and hosts the report modal.
+ */
+export function BugReporterProvider({ config, children }: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [screenshot, setScreenshot] = useState<ScreenshotData | null>(null);
+  const [context, setContext] = useState<CollectedContext | null>(null);
+  const [submitState, setSubmitState] = useState<SubmitState>('idle');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [editing, setEditing] = useState(false);
+
+  const theme = useMemo(() => resolveTheme(config.theme), [config.theme]);
+  const autoDetect = !config.disableAutoDetect;
+
+  useEffect(() => {
+    logger.setEnabled(!!config.debug);
+  }, [config.debug]);
+
+  // Keep a ref so the detector callback always sees the latest open state
+  // without re-subscribing on every render.
+  const isOpenRef = useRef(isOpen);
+  isOpenRef.current = isOpen;
+
+  const beginReport = useCallback(
+    async (shot: ScreenshotData | null) => {
+      setScreenshot(shot);
+      setSubmitState('idle');
+      setErrorMessage(null);
+      setContext(null);
+      setIsOpen(true);
+      try {
+        const collected = await collectContext(config);
+        setContext(collected);
+      } catch (e) {
+        logger.warn('context collection failed', e);
+      }
+    },
+    [config],
+  );
+
+  const handleScreenshot = useCallback(
+    (shot: ScreenshotData) => {
+      // Ignore a new screenshot while a report is already open.
+      if (isOpenRef.current) return;
+      logger.log('screenshot detected', shot.uri);
+      beginReport(shot.uri ? shot : null);
+    },
+    [beginReport],
+  );
+
+  useScreenshotDetector(autoDetect, handleScreenshot);
+
+  const openReporter = useCallback(
+    (shot?: ScreenshotData | null) => {
+      beginReport(shot ?? null);
+    },
+    [beginReport],
+  );
+
+  const closeReporter = useCallback(() => {
+    if (submitState === 'uploading' || submitState === 'saving') return;
+    setIsOpen(false);
+    setScreenshot(null);
+    setContext(null);
+    setSubmitState('idle');
+    setErrorMessage(null);
+  }, [submitState]);
+
+  const handleSubmit = useCallback(
+    async (input: BugReportInput) => {
+      // Context is normally ready; collect on demand if it isn't.
+      let ctx = context;
+      if (!ctx) {
+        setSubmitState('collecting');
+        ctx = await collectContext(config);
+        setContext(ctx);
+      }
+
+      try {
+        await submitBugReport({
+          input,
+          context: ctx,
+          screenshot,
+          config,
+          onState: setSubmitState,
+        });
+        // Briefly show success, then close.
+        setTimeout(() => {
+          setIsOpen(false);
+          setScreenshot(null);
+          setContext(null);
+          setSubmitState('idle');
+        }, 600);
+      } catch (e) {
+        setErrorMessage(
+          e instanceof Error
+            ? e.message
+            : 'Failed to submit. Please try again.',
+        );
+      }
+    },
+    [config, context, screenshot],
+  );
+
+  const value = useMemo(
+    () => ({
+      isAutoDetectEnabled: autoDetect,
+      openReporter,
+      closeReporter,
+      isOpen,
+    }),
+    [autoDetect, openReporter, closeReporter, isOpen],
+  );
+
+  return (
+    <BugReporterContext.Provider value={value}>
+      {children}
+      <BugReportModal
+        visible={isOpen}
+        screenshot={screenshot}
+        context={context}
+        showContext={config.showContextSummary !== false}
+        submitState={submitState}
+        errorMessage={errorMessage}
+        theme={theme}
+        onRemoveScreenshot={() => setScreenshot(null)}
+        onRequestEdit={() => setEditing(true)}
+        onSubmit={handleSubmit}
+        onClose={closeReporter}
+      />
+      {isOpen && editing && screenshot?.uri ? (
+        <ScreenshotEditor
+          screenshot={screenshot}
+          theme={theme}
+          onCancel={() => setEditing(false)}
+          onSave={uri => {
+            setScreenshot(prev => ({ ...(prev ?? {}), uri }));
+            setEditing(false);
+          }}
+        />
+      ) : null}
+    </BugReporterContext.Provider>
+  );
+}

package/src/collectors/appInfo.ts

@@ -0,0 +1,15 @@
+import DeviceInfoModule from 'react-native-device-info';
+import type { AppInfo } from '../types';
+
+/**
+ * Collects host-application metadata (name, bundle id, version, build).
+ */
+export function collectAppInfo(environment?: string): AppInfo {
+  return {
+    appName: DeviceInfoModule.getApplicationName(),
+    bundleId: DeviceInfoModule.getBundleId(),
+    version: DeviceInfoModule.getVersion(),
+    buildNumber: DeviceInfoModule.getBuildNumber(),
+    environment,
+  };
+}

package/src/collectors/collectContext.ts

@@ -0,0 +1,47 @@
+import type { BugReporterConfig, CollectedContext, UserInfo } from '../types';
+import { collectDeviceInfo } from './deviceInfo';
+import { collectAppInfo } from './appInfo';
+import { collectNetworkInfo } from './networkInfo';
+import { logger } from '../utils/logger';
+
+const EMPTY_USER: UserInfo = {};
+
+async function resolveUser(config: BugReporterConfig): Promise<UserInfo> {
+  if (!config.getUser) {
+    return EMPTY_USER;
+  }
+  try {
+    return (await config.getUser()) ?? EMPTY_USER;
+  } catch (e) {
+    logger.warn('getUser() failed', e);
+    return EMPTY_USER;
+  }
+}
+
+/**
+ * Gathers every piece of automatic context for a bug report in parallel:
+ * user, device, app, network, current screen, and timestamp.
+ */
+export async function collectContext(config: BugReporterConfig): Promise<CollectedContext> {
+  const [user, device, network] = await Promise.all([
+    resolveUser(config),
+    collectDeviceInfo(),
+    collectNetworkInfo(),
+  ]);
+
+  let currentScreen: string | null = null;
+  try {
+    currentScreen = config.getCurrentScreen?.() ?? null;
+  } catch (e) {
+    logger.warn('getCurrentScreen() failed', e);
+  }
+
+  return {
+    user,
+    device,
+    app: collectAppInfo(config.environment),
+    network,
+    currentScreen,
+    timestamp: new Date().toISOString(),
+  };
+}

package/src/collectors/deviceInfo.ts

@@ -0,0 +1,51 @@
+import DeviceInfoModule from 'react-native-device-info';
+import { Platform } from 'react-native';
+import type { DeviceInfo } from '../types';
+import { logger } from '../utils/logger';
+
+/**
+ * Collects device metadata. Every field is wrapped defensively because the
+ * various getters can reject on some devices/emulators.
+ */
+export async function collectDeviceInfo(): Promise<DeviceInfo> {
+  const safe = async <T>(fn: () => Promise<T> | T, fallback: T): Promise<T> => {
+    try {
+      return await fn();
+    } catch (e) {
+      logger.warn('device info field failed', e);
+      return fallback;
+    }
+  };
+
+  const [
+    uniqueId,
+    totalMemory,
+    usedMemory,
+    batteryLevel,
+    freeDisk,
+    isEmulator,
+  ] = await Promise.all([
+    safe(() => DeviceInfoModule.getUniqueId(), 'unknown'),
+    safe(() => DeviceInfoModule.getTotalMemory(), 0),
+    safe(() => DeviceInfoModule.getUsedMemory(), 0),
+    safe(() => DeviceInfoModule.getBatteryLevel(), -1),
+    safe(() => DeviceInfoModule.getFreeDiskStorage(), 0),
+    safe(() => DeviceInfoModule.isEmulator(), false),
+  ]);
+
+  return {
+    brand: DeviceInfoModule.getBrand(),
+    manufacturer: await safe(() => DeviceInfoModule.getManufacturer(), 'unknown'),
+    model: DeviceInfoModule.getModel(),
+    deviceId: DeviceInfoModule.getDeviceId(),
+    systemName: Platform.OS,
+    systemVersion: DeviceInfoModule.getSystemVersion(),
+    isTablet: DeviceInfoModule.isTablet(),
+    isEmulator,
+    uniqueId,
+    totalMemory,
+    usedMemory,
+    batteryLevel,
+    freeDisk,
+  };
+}

package/src/collectors/networkInfo.ts

@@ -0,0 +1,31 @@
+import NetInfo from '@react-native-community/netinfo';
+import type { NetworkInfo } from '../types';
+import { logger } from '../utils/logger';
+
+/**
+ * Snapshots current network connectivity.
+ */
+export async function collectNetworkInfo(): Promise<NetworkInfo> {
+  try {
+    const state = await NetInfo.fetch();
+    const cellularGeneration =
+      state.type === 'cellular' && state.details
+        ? (state.details as { cellularGeneration?: string | null }).cellularGeneration ?? null
+        : null;
+
+    return {
+      isConnected: state.isConnected,
+      isInternetReachable: state.isInternetReachable,
+      type: state.type,
+      cellularGeneration,
+    };
+  } catch (e) {
+    logger.warn('network info failed', e);
+    return {
+      isConnected: null,
+      isInternetReachable: null,
+      type: 'unknown',
+      cellularGeneration: null,
+    };
+  }
+}

package/src/components/BugReportAdminScreen.tsx

@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  subscribeToReports,
+  updateReportStatus,
+  targetFromConfig,
+} from '../services/supabaseService';
+import type { BugReport, BugReporterConfig } from '../types';
+import { SEVERITY_COLORS, resolveTheme } from '../theme';
+
+interface Props {
+  config: Pick<
+    BugReporterConfig,
+    'supabaseUrl' | 'supabaseAnonKey' | 'tableName' | 'storageBucket' | 'theme'
+  >;
+}
+
+const STATUS_FLOW: BugReport['status'][] = ['open', 'in_progress', 'resolved', 'closed'];
+
+/**
+ * In-app admin viewer. Live-subscribes to the Supabase reports table with
+ * screenshot thumbnails and a tap-to-cycle status control.
+ */
+export function BugReportAdminScreen({ config }: Props) {
+  const theme = resolveTheme(config.theme);
+  const target = targetFromConfig(config);
+  const targetKey = `${target.supabaseUrl}:${target.tableName}`;
+  const [reports, setReports] = useState<BugReport[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const unsub = subscribeToReports(
+      target,
+      data => {
+        setReports(data);
+        setLoading(false);
+      },
+      err => {
+        setError(err.message);
+        setLoading(false);
+      },
+    );
+    return unsub;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [targetKey]);
+
+  const cycleStatus = useCallback(
+    async (report: BugReport) => {
+      const next =
+        STATUS_FLOW[(STATUS_FLOW.indexOf(report.status) + 1) % STATUS_FLOW.length];
+      try {
+        await updateReportStatus(target, report.id!, next);
+      } catch {
+        // Live subscription re-syncs on the next change.
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [targetKey],
+  );
+
+  if (loading) {
+    return (
+      <View style={[styles.center, { backgroundColor: theme.backgroundColor }]}>
+        <ActivityIndicator color={theme.primaryColor} />
+      </View>
+    );
+  }
+
+  return (
+    <FlatList
+      style={{ backgroundColor: theme.backgroundColor }}
+      contentContainerStyle={styles.list}
+      data={reports}
+      keyExtractor={item => item.id || item.createdAt}
+      ListHeaderComponent={
+        <Text style={[styles.title, { color: theme.textColor }]}>
+          Bug Reports ({reports.length})
+        </Text>
+      }
+      ListEmptyComponent={
+        <Text style={[styles.empty, { color: theme.mutedColor }]}>
+          {error ? error : 'No bug reports yet.'}
+        </Text>
+      }
+      renderItem={({ item }) => (
+        <View style={[styles.card, { borderColor: theme.borderColor }]}>
+          {item.screenshotUrl ? (
+            <Image source={{ uri: item.screenshotUrl }} style={styles.shot} resizeMode="cover" />
+          ) : (
+            <View style={[styles.shot, styles.noShot, { borderColor: theme.borderColor }]}>
+              <Text style={{ color: theme.mutedColor, fontSize: 10 }}>No image</Text>
+            </View>
+          )}
+          <View style={styles.cardBody}>
+            <View style={styles.cardHeader}>
+              <View
+                style={[
+                  styles.sevPill,
+                  { backgroundColor: SEVERITY_COLORS[item.severity] || theme.mutedColor },
+                ]}>
+                <Text style={styles.sevText}>{item.severity}</Text>
+              </View>
+              <TouchableOpacity onPress={() => cycleStatus(item)} style={styles.statusBtn}>
+                <Text style={[styles.statusText, { color: theme.primaryColor }]}>
+                  {item.status}
+                </Text>
+              </TouchableOpacity>
+            </View>
+            <Text style={[styles.cardTitle, { color: theme.textColor }]} numberOfLines={1}>
+              {item.title}
+            </Text>
+            <Text style={[styles.cardDesc, { color: theme.mutedColor }]} numberOfLines={2}>
+              {item.description}
+            </Text>
+            <Text style={[styles.cardMeta, { color: theme.mutedColor }]} numberOfLines={1}>
+              {item.context?.currentScreen || '—'} ·{' '}
+              {item.context?.device?.brand} {item.context?.device?.model} ·{' '}
+              {item.context?.user?.name || 'Anonymous'}
+            </Text>
+          </View>
+        </View>
+      )}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  list: { padding: 16 },
+  title: { fontSize: 22, fontWeight: '700', marginBottom: 16 },
+  empty: { textAlign: 'center', marginTop: 60 },
+  card: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 10,
+    marginBottom: 12,
+    gap: 12,
+  },
+  shot: { width: 70, height: 120, borderRadius: 8, backgroundColor: '#0b0c10' },
+  noShot: { borderWidth: 1, borderStyle: 'dashed', alignItems: 'center', justifyContent: 'center' },
+  cardBody: { flex: 1 },
+  cardHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  sevPill: { paddingHorizontal: 8, paddingVertical: 3, borderRadius: 999 },
+  sevText: { color: '#fff', fontSize: 10, fontWeight: '700', textTransform: 'uppercase' },
+  statusBtn: { paddingVertical: 2, paddingHorizontal: 4 },
+  statusText: { fontSize: 12, fontWeight: '600', textTransform: 'capitalize' },
+  cardTitle: { fontSize: 15, fontWeight: '600', marginTop: 6 },
+  cardDesc: { fontSize: 13, marginTop: 2 },
+  cardMeta: { fontSize: 11, marginTop: 6 },
+});