@jarve/bug-reporter 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +97 -0
  2. package/dist/index.d.mts +23 -0
  3. package/dist/index.d.ts +23 -0
  4. package/dist/index.js +943 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +919 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +47 -0
package/README.md ADDED
@@ -0,0 +1,97 @@
1
+ # @jarve/bug-reporter
2
+
3
+ Bug reporter widget for Next.js apps. Reports flow to your JARVE Agency dashboard.
4
+
5
+ ## How it works
6
+
7
+ 1. A floating bug icon appears in the bottom-right corner of your app
8
+ 2. Click it to enter capture mode - hover over a section and click to screenshot it
9
+ 3. An AI assistant interviews the user to build a structured bug report
10
+ 4. The report (with screenshot, console errors, network errors, and AI conversation) is submitted to your JARVE Agency dashboard
11
+
12
+ ## Setup
13
+
14
+ ### 1. Register your site
15
+
16
+ Go to your JARVE Agency dashboard at `/admin/bug-reports/sites` and:
17
+ - Click **Add Site**
18
+ - Enter your site name and color
19
+ - Click **Generate API Key**
20
+ - Copy the API key (starts with `brk_`)
21
+
22
+ ### 2. Install
23
+
24
+ ```bash
25
+ pnpm add @jarve/bug-reporter
26
+ # or
27
+ npm install @jarve/bug-reporter
28
+ ```
29
+
30
+ ### 3. Add Tailwind content path
31
+
32
+ The widget uses Tailwind CSS classes. Add the package to your Tailwind content configuration so the classes aren't purged.
33
+
34
+ **Tailwind v4** (add `@source` in your CSS file):
35
+
36
+ ```css
37
+ @source "../node_modules/@jarve/bug-reporter/dist";
38
+ ```
39
+
40
+ **Tailwind v3** (add to `content` in `tailwind.config.ts`):
41
+
42
+ ```js
43
+ content: ['./node_modules/@jarve/bug-reporter/dist/**/*.{js,mjs}']
44
+ ```
45
+
46
+ ### 4. Wrap your layout
47
+
48
+ ```tsx
49
+ // app/layout.tsx
50
+ import { JarveBugReporter } from '@jarve/bug-reporter'
51
+
52
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
53
+ return (
54
+ <html>
55
+ <body>
56
+ <JarveBugReporter
57
+ apiUrl="https://jarve.com.au/api/bug-reporter/external"
58
+ apiKey="brk_your_api_key_here"
59
+ user={{ name: 'James', email: 'james@example.com' }}
60
+ >
61
+ {children}
62
+ </JarveBugReporter>
63
+ </body>
64
+ </html>
65
+ )
66
+ }
67
+ ```
68
+
69
+ ### 5. Done!
70
+
71
+ Click the blue bug icon (bottom-right) to report bugs. They'll appear in your JARVE Agency dashboard.
72
+
73
+ ## Props
74
+
75
+ | Prop | Type | Required | Description |
76
+ |------|------|----------|-------------|
77
+ | `apiUrl` | `string` | Yes | Base URL for the external bug reporter API |
78
+ | `apiKey` | `string` | Yes | Your site's API key (starts with `brk_`) |
79
+ | `user` | `{ name: string, email: string }` | No | User info. If omitted, the AI will ask during conversation |
80
+ | `children` | `ReactNode` | Yes | Your app content |
81
+
82
+ ## What gets captured
83
+
84
+ - Screenshot of the clicked section
85
+ - Page URL and section identifier
86
+ - Device type, browser, OS, viewport size
87
+ - Console errors (last 50)
88
+ - Failed network requests (last 30)
89
+ - Clicked element details (tag, text, selector path)
90
+ - AI conversation transcript
91
+ - Structured report (summary, expected/actual behavior, severity)
92
+
93
+ ## Requirements
94
+
95
+ - React 18+
96
+ - Tailwind CSS (v3 or v4)
97
+ - Next.js recommended but not required
package/dist/index.d.mts ADDED
@@ -0,0 +1,23 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ interface BugReporterUser {
4
+ name: string;
5
+ email: string;
6
+ }
7
+ interface BugReporterApiConfig {
8
+ apiUrl: string;
9
+ apiKey: string;
10
+ }
11
+
12
+ interface JarveBugReporterProps {
13
+ /** Base URL for the external bug reporter API (e.g. "https://jarve.com.au/api/bug-reporter/external") */
14
+ apiUrl: string;
15
+ /** API key for your site (starts with "brk_") */
16
+ apiKey: string;
17
+ /** Optional user info. If not provided, the AI will ask for name/email during the conversation. */
18
+ user?: BugReporterUser;
19
+ children: React.ReactNode;
20
+ }
21
+ declare function JarveBugReporter({ apiUrl, apiKey, user, children, }: JarveBugReporterProps): react_jsx_runtime.JSX.Element;
22
+
23
+ export { type BugReporterApiConfig, type BugReporterUser, JarveBugReporter };
package/dist/index.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ interface BugReporterUser {
4
+ name: string;
5
+ email: string;
6
+ }
7
+ interface BugReporterApiConfig {
8
+ apiUrl: string;
9
+ apiKey: string;
10
+ }
11
+
12
+ interface JarveBugReporterProps {
13
+ /** Base URL for the external bug reporter API (e.g. "https://jarve.com.au/api/bug-reporter/external") */
14
+ apiUrl: string;
15
+ /** API key for your site (starts with "brk_") */
16
+ apiKey: string;
17
+ /** Optional user info. If not provided, the AI will ask for name/email during the conversation. */
18
+ user?: BugReporterUser;
19
+ children: React.ReactNode;
20
+ }
21
+ declare function JarveBugReporter({ apiUrl, apiKey, user, children, }: JarveBugReporterProps): react_jsx_runtime.JSX.Element;
22
+
23
+ export { type BugReporterApiConfig, type BugReporterUser, JarveBugReporter };