@fatagnus/convex-feedback 0.1.0 → 0.1.1

package/README.md

@@ -318,6 +318,56 @@ import { BugReportButton } from '@fatagnus/convex-feedback/react';
 | `onSuccess` | `function` | - | Success callback |
 | `onError` | `function` | - | Error callback |
 
+### ErrorBugReportButton
+
+A self-contained bug report button designed for error pages. Pre-fills error details and allows users to submit bug reports directly from error boundaries or error pages.
+
+```tsx
+import { ErrorBugReportButton } from '@fatagnus/convex-feedback/react';
+import { api } from './convex/_generated/api';
+
+function ErrorPage({ error }: { error: Error }) {
+  return (
+    <div>
+      <h1>Something went wrong</h1>
+      <p>{error.message}</p>
+      
+      <ErrorBugReportButton
+        error={error}
+        reporterType="staff"
+        reporterId={user?.id}
+        reporterEmail={user?.email}
+        reporterName={user?.name}
+        bugReportApi={{
+          create: api.feedback.bugReports.create,
+        }}
+        variant="outline"
+        color="red"
+        onSuccess={() => console.log('Bug report submitted')}
+        onError={(err) => console.error('Failed to submit:', err)}
+      />
+    </div>
+  );
+}
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `error` | `Error` | - | The error to report (required) |
+| `reporterType` | `'staff' \| 'customer'` | `'staff'` | Type of reporter |
+| `reporterId` | `string` | `'error-page'` | Unique reporter identifier |
+| `reporterEmail` | `string` | `'unknown@example.com'` | Reporter's email |
+| `reporterName` | `string` | `'Error Page Reporter'` | Reporter's display name |
+| `bugReportApi` | `object` | - | Convex API reference with `create` mutation (required) |
+| `variant` | `'filled' \| 'outline' \| 'light' \| 'subtle'` | `'outline'` | Button variant |
+| `color` | `string` | `'red'` | Button color |
+| `onSuccess` | `function` | - | Success callback |
+| `onError` | `function` | - | Error callback |
+
+**Note:** Unlike `BugReportButton`, this component only requires the `bugReportApi.create` mutation (no `generateUploadUrl` needed since error pages typically don't include screenshots).
+
 ### useBugReportContext
 
 Hook to access the bug report context for error capture.

package/dist/react/ErrorBugReportButton.d.ts

@@ -0,0 +1,57 @@
+import type { FunctionReference } from 'convex/server';
+/**
+ * Props for the ErrorBugReportButton component
+ */
+export interface ErrorBugReportButtonProps {
+    /** The error to report */
+    error: Error;
+    /** Reporter type: 'staff' for internal users, 'customer' for external users */
+    reporterType?: 'staff' | 'customer';
+    /** Unique identifier for the reporter (defaults to 'error-page') */
+    reporterId?: string;
+    /** Reporter's email address (defaults to 'unknown@example.com') */
+    reporterEmail?: string;
+    /** Reporter's display name (defaults to 'Error Page Reporter') */
+    reporterName?: string;
+    /** Convex API reference for bug reports */
+    bugReportApi: {
+        create: FunctionReference<'mutation'>;
+    };
+    /** Button variant (default: 'outline') */
+    variant?: 'filled' | 'outline' | 'light' | 'subtle';
+    /** Button color (default: 'red') */
+    color?: string;
+    /** Callback when submission succeeds */
+    onSuccess?: () => void;
+    /** Callback when submission fails */
+    onError?: (error: Error) => void;
+}
+/**
+ * A self-contained bug report button designed for error pages.
+ * Pre-fills the error details and allows users to submit bug reports
+ * directly from error pages.
+ *
+ * @example
+ * ```tsx
+ * import { ErrorBugReportButton } from '@fatagnus/convex-feedback/react';
+ * import { api } from './convex/_generated/api';
+ *
+ * function ErrorPage({ error }: { error: Error }) {
+ *   return (
+ *     <div>
+ *       <h1>Something went wrong</h1>
+ *       <ErrorBugReportButton
+ *         error={error}
+ *         reporterType="staff"
+ *         bugReportApi={{
+ *           create: api.feedback.bugReports.create,
+ *         }}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function ErrorBugReportButton({ error, reporterType, reporterId, reporterEmail, reporterName, bugReportApi, variant, color, onSuccess, onError, }: ErrorBugReportButtonProps): import("react/jsx-runtime").JSX.Element;
+export default ErrorBugReportButton;
+//# sourceMappingURL=ErrorBugReportButton.d.ts.map

package/dist/react/ErrorBugReportButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBugReportButton.d.ts","sourceRoot":"","sources":["../../src/react/ErrorBugReportButton.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAKvD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,0BAA0B;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,+EAA+E;IAC/E,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACpC,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,YAAY,EAAE;QACZ,MAAM,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;KACvC,CAAC;IACF,0CAA0C;IAC1C,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,YAAsB,EACtB,UAAyB,EACzB,aAAqC,EACrC,YAAoC,EACpC,YAAY,EACZ,OAAmB,EACnB,KAAa,EACb,SAAS,EACT,OAAO,GACR,EAAE,yBAAyB,2CA+M3B;AAED,eAAe,oBAAoB,CAAC"}

package/dist/react/ErrorBugReportButton.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Button, Modal, TextInput, Textarea, Select, Stack, Text, Group, Paper, Badge, LoadingOverlay, } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { useDisclosure } from '@mantine/hooks';
+import { notifications } from '@mantine/notifications';
+import * as TablerIcons from '@tabler/icons-react';
+import { useMutation } from 'convex/react';
+const IconBug = TablerIcons.IconBug;
+const IconCheck = TablerIcons.IconCheck;
+/**
+ * A self-contained bug report button designed for error pages.
+ * Pre-fills the error details and allows users to submit bug reports
+ * directly from error pages.
+ *
+ * @example
+ * ```tsx
+ * import { ErrorBugReportButton } from '@fatagnus/convex-feedback/react';
+ * import { api } from './convex/_generated/api';
+ *
+ * function ErrorPage({ error }: { error: Error }) {
+ *   return (
+ *     <div>
+ *       <h1>Something went wrong</h1>
+ *       <ErrorBugReportButton
+ *         error={error}
+ *         reporterType="staff"
+ *         bugReportApi={{
+ *           create: api.feedback.bugReports.create,
+ *         }}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function ErrorBugReportButton({ error, reporterType = 'staff', reporterId = 'error-page', reporterEmail = 'unknown@example.com', reporterName = 'Error Page Reporter', bugReportApi, variant = 'outline', color = 'red', onSuccess, onError, }) {
+    const [opened, { open, close }] = useDisclosure(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const createReport = useMutation(bugReportApi.create);
+    const form = useForm({
+        initialValues: {
+            title: `Error: ${error?.message?.slice(0, 50) || 'Unknown error'}${(error?.message?.length || 0) > 50 ? '...' : ''}`,
+            description: '',
+            severity: 'high',
+        },
+        validate: {
+            title: (value) => value.trim().length < 5 ? 'Title must be at least 5 characters' : null,
+            description: (value) => value.trim().length < 10
+                ? 'Please provide more details (at least 10 characters)'
+                : null,
+        },
+    });
+    const getBrowserInfo = useCallback(() => {
+        return {
+            userAgent: navigator.userAgent,
+            platform: navigator.platform,
+            language: navigator.language,
+            cookiesEnabled: navigator.cookieEnabled,
+            onLine: navigator.onLine,
+            screenWidth: window.screen.width,
+            screenHeight: window.screen.height,
+            colorDepth: window.screen.colorDepth,
+            pixelRatio: window.devicePixelRatio,
+        };
+    }, []);
+    const getErrorDetails = useCallback(() => {
+        const parts = [
+            '--- Error Details ---',
+            `Message: ${error?.message || 'Unknown error'}`,
+        ];
+        if (error?.stack) {
+            parts.push('', 'Stack Trace:', error.stack);
+        }
+        return parts.join('\n');
+    }, [error]);
+    const handleSubmit = async (values) => {
+        setIsSubmitting(true);
+        try {
+            // Build the full description with error details
+            const fullDescription = [
+                values.description,
+                '',
+                getErrorDetails(),
+            ].join('\n');
+            // Create the report
+            await createReport({
+                title: values.title,
+                description: fullDescription,
+                severity: values.severity,
+                reporterType,
+                reporterId,
+                reporterEmail,
+                reporterName,
+                url: window.location.href,
+                route: window.location.pathname,
+                browserInfo: JSON.stringify(getBrowserInfo()),
+                viewportWidth: window.innerWidth,
+                viewportHeight: window.innerHeight,
+                networkState: navigator.onLine ? 'online' : 'offline',
+            });
+            notifications.show({
+                title: 'Bug report submitted',
+                message: 'Thank you for reporting this error! We will investigate.',
+                color: 'green',
+                icon: _jsx(IconCheck, { size: 16 }),
+            });
+            onSuccess?.();
+            form.reset();
+            close();
+        }
+        catch (submitError) {
+            console.error('Failed to submit bug report:', submitError);
+            notifications.show({
+                title: 'Submission failed',
+                message: 'Could not submit bug report. Please try again.',
+                color: 'red',
+            });
+            onError?.(submitError instanceof Error ? submitError : new Error(String(submitError)));
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const handleOpen = () => {
+        // Reset form with current error info
+        form.setValues({
+            title: `Error: ${error?.message?.slice(0, 50) || 'Unknown error'}${(error?.message?.length || 0) > 50 ? '...' : ''}`,
+            description: '',
+            severity: 'high',
+        });
+        open();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { "data-testid": "error-report-bug-button", leftSection: _jsx(IconBug, { size: 16 }), onClick: handleOpen, variant: variant, color: color, children: "Report Bug" }), _jsxs(Modal, { opened: opened, onClose: close, title: _jsxs(Group, { gap: "xs", children: [_jsx(IconBug, { size: 20 }), _jsx(Text, { fw: 600, children: "Report This Error" })] }), size: "md", children: [_jsx(LoadingOverlay, { visible: isSubmitting }), _jsx("form", { onSubmit: form.onSubmit(handleSubmit), children: _jsxs(Stack, { gap: "md", children: [_jsx(TextInput, { label: "Title", placeholder: "Brief summary of the issue", required: true, ...form.getInputProps('title') }), _jsx(Textarea, { label: "What were you doing when this error occurred?", placeholder: "Please describe what you were trying to do, what you expected to happen, and any other relevant context.", required: true, minRows: 3, ...form.getInputProps('description') }), _jsx(Select, { label: "Severity", placeholder: "How severe is this issue?", data: [
+                                        { value: 'low', label: 'Low - Minor inconvenience' },
+                                        { value: 'medium', label: 'Medium - Affects workflow' },
+                                        { value: 'high', label: 'High - Major functionality broken' },
+                                        { value: 'critical', label: 'Critical - System unusable' },
+                                    ], ...form.getInputProps('severity') }), _jsx(Paper, { withBorder: true, p: "xs", radius: "md", bg: "var(--mantine-color-red-light)", children: _jsxs(Stack, { gap: "xs", children: [_jsx(Group, { gap: "xs", children: _jsx(Badge, { size: "xs", color: "red", children: "Error Details (auto-included)" }) }), _jsx(Text, { size: "xs", c: "dimmed", style: { fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: error?.message || 'Unknown error' })] }) }), _jsx(Paper, { withBorder: true, p: "xs", radius: "md", children: _jsxs(Group, { gap: "xs", children: [_jsx(Badge, { size: "xs", variant: "outline", color: "gray", children: "Auto-captured" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Browser info, URL, viewport size, and full stack trace will be included." })] }) }), _jsxs(Group, { justify: "flex-end", mt: "md", children: [_jsx(Button, { variant: "subtle", onClick: close, disabled: isSubmitting, children: "Cancel" }), _jsx(Button, { type: "submit", color: "red", loading: isSubmitting, children: "Submit Report" })] })] }) })] })] }));
+}
+export default ErrorBugReportButton;
+//# sourceMappingURL=ErrorBugReportButton.js.map

package/dist/react/ErrorBugReportButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBugReportButton.js","sourceRoot":"","sources":["../../src/react/ErrorBugReportButton.tsx"],"names":[],"mappings":"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"}

package/dist/react/index.d.ts

@@ -33,4 +33,5 @@
  */
 export { BugReportProvider, useBugReportContext, type BugReportProviderProps, type BugReportContextValue, type ConsoleError, } from './BugReportContext';
 export { BugReportButton, type BugReportButtonProps, } from './BugReportButton';
+export { ErrorBugReportButton, type ErrorBugReportButtonProps, } from './ErrorBugReportButton';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAC1B,KAAK,YAAY,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAC1B,KAAK,YAAY,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,oBAAoB,EACpB,KAAK,yBAAyB,GAC/B,MAAM,wBAAwB,CAAC"}

package/dist/react/index.js

@@ -33,4 +33,5 @@
  */
 export { BugReportProvider, useBugReportContext, } from './BugReportContext';
 export { BugReportButton, } from './BugReportButton';
+export { ErrorBugReportButton, } from './ErrorBugReportButton';
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EACL,iBAAiB,EACjB,mBAAmB,GAIpB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,eAAe,GAEhB,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EACL,iBAAiB,EACjB,mBAAmB,GAIpB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,eAAe,GAEhB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,oBAAoB,GAErB,MAAM,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fatagnus/convex-feedback",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Bug reports and feedback collection component for Convex applications with AI analysis and email notifications",
   "license": "Apache-2.0",
   "repository": {

package/src/react/ErrorBugReportButton.tsx

@@ -0,0 +1,311 @@
+import { useState, useCallback } from 'react';
+import {
+  Button,
+  Modal,
+  TextInput,
+  Textarea,
+  Select,
+  Stack,
+  Text,
+  Group,
+  Paper,
+  Badge,
+  LoadingOverlay,
+} from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { useDisclosure } from '@mantine/hooks';
+import { notifications } from '@mantine/notifications';
+import * as TablerIcons from '@tabler/icons-react';
+import { useMutation } from 'convex/react';
+import type { FunctionReference } from 'convex/server';
+
+const IconBug = TablerIcons.IconBug as React.FC<{ size?: number }>;
+const IconCheck = TablerIcons.IconCheck as React.FC<{ size?: number }>;
+
+/**
+ * Props for the ErrorBugReportButton component
+ */
+export interface ErrorBugReportButtonProps {
+  /** The error to report */
+  error: Error;
+  /** Reporter type: 'staff' for internal users, 'customer' for external users */
+  reporterType?: 'staff' | 'customer';
+  /** Unique identifier for the reporter (defaults to 'error-page') */
+  reporterId?: string;
+  /** Reporter's email address (defaults to 'unknown@example.com') */
+  reporterEmail?: string;
+  /** Reporter's display name (defaults to 'Error Page Reporter') */
+  reporterName?: string;
+  /** Convex API reference for bug reports */
+  bugReportApi: {
+    create: FunctionReference<'mutation'>;
+  };
+  /** Button variant (default: 'outline') */
+  variant?: 'filled' | 'outline' | 'light' | 'subtle';
+  /** Button color (default: 'red') */
+  color?: string;
+  /** Callback when submission succeeds */
+  onSuccess?: () => void;
+  /** Callback when submission fails */
+  onError?: (error: Error) => void;
+}
+
+interface BrowserInfo {
+  userAgent: string;
+  platform: string;
+  language: string;
+  cookiesEnabled: boolean;
+  onLine: boolean;
+  screenWidth: number;
+  screenHeight: number;
+  colorDepth: number;
+  pixelRatio: number;
+}
+
+/**
+ * A self-contained bug report button designed for error pages.
+ * Pre-fills the error details and allows users to submit bug reports
+ * directly from error pages.
+ *
+ * @example
+ * ```tsx
+ * import { ErrorBugReportButton } from '@fatagnus/convex-feedback/react';
+ * import { api } from './convex/_generated/api';
+ *
+ * function ErrorPage({ error }: { error: Error }) {
+ *   return (
+ *     <div>
+ *       <h1>Something went wrong</h1>
+ *       <ErrorBugReportButton
+ *         error={error}
+ *         reporterType="staff"
+ *         bugReportApi={{
+ *           create: api.feedback.bugReports.create,
+ *         }}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function ErrorBugReportButton({
+  error,
+  reporterType = 'staff',
+  reporterId = 'error-page',
+  reporterEmail = 'unknown@example.com',
+  reporterName = 'Error Page Reporter',
+  bugReportApi,
+  variant = 'outline',
+  color = 'red',
+  onSuccess,
+  onError,
+}: ErrorBugReportButtonProps) {
+  const [opened, { open, close }] = useDisclosure(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const createReport = useMutation(bugReportApi.create);
+
+  const form = useForm({
+    initialValues: {
+      title: `Error: ${error?.message?.slice(0, 50) || 'Unknown error'}${(error?.message?.length || 0) > 50 ? '...' : ''}`,
+      description: '',
+      severity: 'high' as 'low' | 'medium' | 'high' | 'critical',
+    },
+    validate: {
+      title: (value) =>
+        value.trim().length < 5 ? 'Title must be at least 5 characters' : null,
+      description: (value) =>
+        value.trim().length < 10
+          ? 'Please provide more details (at least 10 characters)'
+          : null,
+    },
+  });
+
+  const getBrowserInfo = useCallback((): BrowserInfo => {
+    return {
+      userAgent: navigator.userAgent,
+      platform: navigator.platform,
+      language: navigator.language,
+      cookiesEnabled: navigator.cookieEnabled,
+      onLine: navigator.onLine,
+      screenWidth: window.screen.width,
+      screenHeight: window.screen.height,
+      colorDepth: window.screen.colorDepth,
+      pixelRatio: window.devicePixelRatio,
+    };
+  }, []);
+
+  const getErrorDetails = useCallback((): string => {
+    const parts = [
+      '--- Error Details ---',
+      `Message: ${error?.message || 'Unknown error'}`,
+    ];
+
+    if (error?.stack) {
+      parts.push('', 'Stack Trace:', error.stack);
+    }
+
+    return parts.join('\n');
+  }, [error]);
+
+  const handleSubmit = async (values: typeof form.values) => {
+    setIsSubmitting(true);
+    try {
+      // Build the full description with error details
+      const fullDescription = [
+        values.description,
+        '',
+        getErrorDetails(),
+      ].join('\n');
+
+      // Create the report
+      await createReport({
+        title: values.title,
+        description: fullDescription,
+        severity: values.severity,
+        reporterType,
+        reporterId,
+        reporterEmail,
+        reporterName,
+        url: window.location.href,
+        route: window.location.pathname,
+        browserInfo: JSON.stringify(getBrowserInfo()),
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight,
+        networkState: navigator.onLine ? 'online' : 'offline',
+      });
+
+      notifications.show({
+        title: 'Bug report submitted',
+        message: 'Thank you for reporting this error! We will investigate.',
+        color: 'green',
+        icon: <IconCheck size={16} />,
+      });
+
+      onSuccess?.();
+
+      form.reset();
+      close();
+    } catch (submitError) {
+      console.error('Failed to submit bug report:', submitError);
+      notifications.show({
+        title: 'Submission failed',
+        message: 'Could not submit bug report. Please try again.',
+        color: 'red',
+      });
+      onError?.(submitError instanceof Error ? submitError : new Error(String(submitError)));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleOpen = () => {
+    // Reset form with current error info
+    form.setValues({
+      title: `Error: ${error?.message?.slice(0, 50) || 'Unknown error'}${(error?.message?.length || 0) > 50 ? '...' : ''}`,
+      description: '',
+      severity: 'high',
+    });
+    open();
+  };
+
+  return (
+    <>
+      <Button
+        data-testid="error-report-bug-button"
+        leftSection={<IconBug size={16} />}
+        onClick={handleOpen}
+        variant={variant}
+        color={color}
+      >
+        Report Bug
+      </Button>
+
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={
+          <Group gap="xs">
+            <IconBug size={20} />
+            <Text fw={600}>Report This Error</Text>
+          </Group>
+        }
+        size="md"
+      >
+        <LoadingOverlay visible={isSubmitting} />
+        <form onSubmit={form.onSubmit(handleSubmit)}>
+          <Stack gap="md">
+            <TextInput
+              label="Title"
+              placeholder="Brief summary of the issue"
+              required
+              {...form.getInputProps('title')}
+            />
+
+            <Textarea
+              label="What were you doing when this error occurred?"
+              placeholder="Please describe what you were trying to do, what you expected to happen, and any other relevant context."
+              required
+              minRows={3}
+              {...form.getInputProps('description')}
+            />
+
+            <Select
+              label="Severity"
+              placeholder="How severe is this issue?"
+              data={[
+                { value: 'low', label: 'Low - Minor inconvenience' },
+                { value: 'medium', label: 'Medium - Affects workflow' },
+                { value: 'high', label: 'High - Major functionality broken' },
+                { value: 'critical', label: 'Critical - System unusable' },
+              ]}
+              {...form.getInputProps('severity')}
+            />
+
+            {/* Error Details Preview */}
+            <Paper withBorder p="xs" radius="md" bg="var(--mantine-color-red-light)">
+              <Stack gap="xs">
+                <Group gap="xs">
+                  <Badge size="xs" color="red">
+                    Error Details (auto-included)
+                  </Badge>
+                </Group>
+                <Text
+                  size="xs"
+                  c="dimmed"
+                  style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}
+                >
+                  {error?.message || 'Unknown error'}
+                </Text>
+              </Stack>
+            </Paper>
+
+            {/* Auto-captured Info Badge */}
+            <Paper withBorder p="xs" radius="md">
+              <Group gap="xs">
+                <Badge size="xs" variant="outline" color="gray">
+                  Auto-captured
+                </Badge>
+                <Text size="xs" c="dimmed">
+                  Browser info, URL, viewport size, and full stack trace will be included.
+                </Text>
+              </Group>
+            </Paper>
+
+            {/* Submit Buttons */}
+            <Group justify="flex-end" mt="md">
+              <Button variant="subtle" onClick={close} disabled={isSubmitting}>
+                Cancel
+              </Button>
+              <Button type="submit" color="red" loading={isSubmitting}>
+                Submit Report
+              </Button>
+            </Group>
+          </Stack>
+        </form>
+      </Modal>
+    </>
+  );
+}
+
+export default ErrorBugReportButton;

package/src/react/index.ts

@@ -44,3 +44,8 @@ export {
   BugReportButton,
   type BugReportButtonProps,
 } from './BugReportButton';
+
+export {
+  ErrorBugReportButton,
+  type ErrorBugReportButtonProps,
+} from './ErrorBugReportButton';