@fatagnus/convex-feedback 0.1.0

package/src/react/BugReportContext.tsx

@@ -0,0 +1,146 @@
+import { createContext, useContext, useEffect, useRef, ReactNode } from 'react';
+
+/**
+ * Captured console error with metadata
+ */
+export interface ConsoleError {
+  message: string;
+  source?: string;
+  lineno?: number;
+  colno?: number;
+  timestamp: number;
+}
+
+/**
+ * Context value for bug report error capture
+ */
+export interface BugReportContextValue {
+  /** Get all captured console errors */
+  getConsoleErrors: () => ConsoleError[];
+  /** Clear all captured console errors */
+  clearConsoleErrors: () => void;
+}
+
+const BugReportContext = createContext<BugReportContextValue | null>(null);
+
+/** Maximum number of errors to retain */
+const MAX_ERRORS = 20;
+
+export interface BugReportProviderProps {
+  children: ReactNode;
+  /** Maximum number of errors to capture (default: 20) */
+  maxErrors?: number;
+}
+
+/**
+ * Provider component that captures console errors for bug reports.
+ * Wrap your app with this provider to enable error capture.
+ *
+ * @example
+ * ```tsx
+ * import { BugReportProvider } from '@convex-dev/feedback/react';
+ *
+ * function App() {
+ *   return (
+ *     <BugReportProvider>
+ *       <YourApp />
+ *     </BugReportProvider>
+ *   );
+ * }
+ * ```
+ */
+export function BugReportProvider({ children, maxErrors = MAX_ERRORS }: BugReportProviderProps) {
+  const errorsRef = useRef<ConsoleError[]>([]);
+
+  useEffect(() => {
+    // Capture window.onerror
+    const originalOnError = window.onerror;
+    window.onerror = (message, source, lineno, colno, error) => {
+      errorsRef.current.push({
+        message: String(message),
+        source,
+        lineno: lineno ?? undefined,
+        colno: colno ?? undefined,
+        timestamp: Date.now(),
+      });
+      // Keep only last N errors
+      if (errorsRef.current.length > maxErrors) {
+        errorsRef.current = errorsRef.current.slice(-maxErrors);
+      }
+      // Call original handler if exists
+      if (originalOnError) {
+        return originalOnError(message, source, lineno, colno, error);
+      }
+      return false;
+    };
+
+    // Capture unhandled promise rejections
+    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
+      errorsRef.current.push({
+        message: `Unhandled Promise Rejection: ${String(event.reason)}`,
+        timestamp: Date.now(),
+      });
+      if (errorsRef.current.length > maxErrors) {
+        errorsRef.current = errorsRef.current.slice(-maxErrors);
+      }
+    };
+    window.addEventListener('unhandledrejection', handleUnhandledRejection);
+
+    // Override console.error
+    const originalConsoleError = console.error;
+    console.error = (...args) => {
+      errorsRef.current.push({
+        message: args.map((arg) => {
+          if (arg instanceof Error) {
+            return `${arg.name}: ${arg.message}`;
+          }
+          return String(arg);
+        }).join(' '),
+        timestamp: Date.now(),
+      });
+      if (errorsRef.current.length > maxErrors) {
+        errorsRef.current = errorsRef.current.slice(-maxErrors);
+      }
+      originalConsoleError.apply(console, args);
+    };
+
+    return () => {
+      window.onerror = originalOnError;
+      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+      console.error = originalConsoleError;
+    };
+  }, [maxErrors]);
+
+  const getConsoleErrors = () => [...errorsRef.current];
+  const clearConsoleErrors = () => {
+    errorsRef.current = [];
+  };
+
+  return (
+    <BugReportContext.Provider value={{ getConsoleErrors, clearConsoleErrors }}>
+      {children}
+    </BugReportContext.Provider>
+  );
+}
+
+/**
+ * Hook to access bug report context for error capture.
+ * Must be used within a BugReportProvider.
+ *
+ * @example
+ * ```tsx
+ * import { useBugReportContext } from '@convex-dev/feedback/react';
+ *
+ * function MyComponent() {
+ *   const { getConsoleErrors, clearConsoleErrors } = useBugReportContext();
+ *   // ...
+ * }
+ * ```
+ */
+export function useBugReportContext(): BugReportContextValue {
+  const context = useContext(BugReportContext);
+  if (!context) {
+    throw new Error('useBugReportContext must be used within a BugReportProvider');
+  }
+  return context;
+}

package/src/react/index.ts

@@ -0,0 +1,46 @@
+/**
+ * @convex-dev/feedback - React Components
+ *
+ * React components for bug reports and feedback collection.
+ *
+ * @example
+ * ```tsx
+ * import { BugReportProvider, BugReportButton } from '@convex-dev/feedback/react';
+ * import { api } from './convex/_generated/api';
+ *
+ * function App() {
+ *   return (
+ *     <BugReportProvider>
+ *       <YourApp />
+ *       <BugReportButton
+ *         reporterType="staff"
+ *         reporterId={user.id}
+ *         reporterEmail={user.email}
+ *         reporterName={user.name}
+ *         bugReportApi={{
+ *           create: api.feedback.bugReports.create,
+ *           generateUploadUrl: api.feedback.bugReports.generateUploadUrl,
+ *         }}
+ *         feedbackApi={{
+ *           create: api.feedback.feedback.create,
+ *           generateUploadUrl: api.feedback.feedback.generateUploadUrl,
+ *         }}
+ *       />
+ *     </BugReportProvider>
+ *   );
+ * }
+ * ```
+ */
+
+export {
+  BugReportProvider,
+  useBugReportContext,
+  type BugReportProviderProps,
+  type BugReportContextValue,
+  type ConsoleError,
+} from './BugReportContext';
+
+export {
+  BugReportButton,
+  type BugReportButtonProps,
+} from './BugReportButton';

package/src/types.ts

@@ -0,0 +1,93 @@
+/**
+ * Shared types for @convex-dev/feedback
+ */
+
+/**
+ * Bug report document type
+ * Note: _id is typed as string for portability. Use your app's Id type for full typing.
+ */
+export interface BugReport {
+  _id: string;
+  _creationTime: number;
+  title: string;
+  description: string;
+  severity: 'low' | 'medium' | 'high' | 'critical';
+  status: 'open' | 'in-progress' | 'resolved' | 'closed';
+  isArchived?: boolean;
+  reporterType: 'staff' | 'customer';
+  reporterId: string;
+  reporterEmail: string;
+  reporterName: string;
+  url: string;
+  route?: string;
+  browserInfo: string;
+  consoleErrors?: string;
+  screenshotStorageId?: string;
+  viewportWidth: number;
+  viewportHeight: number;
+  networkState: string;
+  // AI Analysis
+  aiSummary?: string;
+  aiRootCauseAnalysis?: string;
+  aiReproductionSteps?: string[];
+  aiSuggestedFix?: string;
+  aiEstimatedEffort?: 'low' | 'medium' | 'high';
+  aiSuggestedSeverity?: 'low' | 'medium' | 'high' | 'critical';
+  aiAnalyzedAt?: number;
+  aiThreadId?: string;
+  notificationsSentAt?: number;
+  createdAt: number;
+  updatedAt: number;
+}
+
+/**
+ * Feedback document type
+ */
+export interface Feedback {
+  _id: string;
+  _creationTime: number;
+  type: 'feature_request' | 'change_request' | 'general';
+  title: string;
+  description: string;
+  priority: 'nice_to_have' | 'important' | 'critical';
+  status: 'open' | 'under_review' | 'planned' | 'in_progress' | 'completed' | 'declined';
+  isArchived?: boolean;
+  reporterType: 'staff' | 'customer';
+  reporterId: string;
+  reporterEmail: string;
+  reporterName: string;
+  url: string;
+  route?: string;
+  browserInfo: string;
+  consoleErrors?: string;
+  screenshotStorageId?: string;
+  viewportWidth: number;
+  viewportHeight: number;
+  networkState: string;
+  // AI Analysis
+  aiSummary?: string;
+  aiImpactAnalysis?: string;
+  aiActionItems?: string[];
+  aiEstimatedEffort?: 'low' | 'medium' | 'high';
+  aiSuggestedPriority?: 'nice_to_have' | 'important' | 'critical';
+  aiAnalyzedAt?: number;
+  aiThreadId?: string;
+  notificationsSentAt?: number;
+  createdAt: number;
+  updatedAt: number;
+}
+
+/**
+ * Support team document type
+ */
+export interface SupportTeam {
+  _id: string;
+  _creationTime: number;
+  teamName: string;
+  memberEmails: string[];
+  feedbackTypes: ('feature_request' | 'change_request' | 'general')[];
+  bugReportSeverities: ('low' | 'medium' | 'high' | 'critical')[];
+  isActive: boolean;
+  createdAt: number;
+  updatedAt: number;
+}