glitchgrab 1.0.1 → 1.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 +22 -21
  2. package/dist/index.d.mts +25 -4
  3. package/dist/index.d.ts +25 -4
  4. package/dist/index.js +522 -204
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +509 -191
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +5 -2
package/README.md CHANGED
@@ -20,14 +20,13 @@ import { GlitchgrabProvider } from "glitchgrab";
20
20
 
21
21
  export default function RootLayout({ children }) {
22
22
  return (
23
- <GlitchgrabProvider token="gg_your_token">
24
- {children}
25
- </GlitchgrabProvider>
23
+ <GlitchgrabProvider token="gg_your_token">{children}</GlitchgrabProvider>
26
24
  );
27
25
  }
28
26
  ```
29
27
 
30
28
  This gives you:
29
+
31
30
  - Auto-capture of unhandled errors and promise rejections
32
31
  - Error boundary around your entire app
33
32
  - Page visit tracking for reproduction context
@@ -45,6 +44,7 @@ This gives you:
45
44
  ### 1. Auto-Capture (zero config)
46
45
 
47
46
  Just add the provider. Production errors are captured automatically with:
47
+
48
48
  - Error message and stack trace
49
49
  - Current URL (sanitized)
50
50
  - User agent
@@ -89,15 +89,15 @@ import { GlitchgrabProvider, ReportButton } from "glitchgrab";
89
89
  <GlitchgrabProvider token="gg_your_token">
90
90
  {children}
91
91
  <ReportButton />
92
- </GlitchgrabProvider>
92
+ </GlitchgrabProvider>;
93
93
  ```
94
94
 
95
95
  Options:
96
96
 
97
97
  ```tsx
98
98
  <ReportButton
99
- position="bottom-left" // "bottom-right" (default) | "bottom-left"
100
- label="Report Issue" // default: "Report Bug"
99
+ position="bottom-left" // "bottom-right" (default) | "bottom-left"
100
+ label="Report Issue" // default: "Report Bug"
101
101
  />
102
102
  ```
103
103
 
@@ -113,19 +113,20 @@ import { GlitchgrabErrorBoundary } from "glitchgrab";
113
113
  fallback={<div>Something went wrong in this section</div>}
114
114
  >
115
115
  <DangerousComponent />
116
- </GlitchgrabErrorBoundary>
116
+ </GlitchgrabErrorBoundary>;
117
117
  ```
118
118
 
119
119
  ### 5. Provider Options
120
120
 
121
121
  ```tsx
122
122
  <GlitchgrabProvider
123
- token="gg_your_token" // Required — your API token
123
+ token="gg_your_token" // Required — your API token
124
124
  baseUrl="https://your-api.com" // Optional — custom API URL (default: glitchgrab.dev)
125
- onError={(error) => { // Optional — callback when errors are captured
125
+ onError={(error) => {
126
+ // Optional — callback when errors are captured
126
127
  console.log("Captured:", error.message);
127
128
  }}
128
- fallback={<ErrorPage />} // Optional — what to show when the app crashes
129
+ fallback={<ErrorPage />} // Optional — what to show when the app crashes
129
130
  >
130
131
  {children}
131
132
  </GlitchgrabProvider>
@@ -135,25 +136,25 @@ import { GlitchgrabErrorBoundary } from "glitchgrab";
135
136
 
136
137
  ### Components
137
138
 
138
- | Component | Description |
139
- |-----------|-------------|
140
- | `GlitchgrabProvider` | Wraps your app. Captures errors, tracks pages. |
141
- | `ReportButton` | Optional floating bug report button with modal. |
139
+ | Component | Description |
140
+ | ------------------------- | ------------------------------------------------ |
141
+ | `GlitchgrabProvider` | Wraps your app. Captures errors, tracks pages. |
142
+ | `ReportButton` | Optional floating bug report button with modal. |
142
143
  | `GlitchgrabErrorBoundary` | Standalone error boundary for specific sections. |
143
144
 
144
145
  ### Hooks
145
146
 
146
- | Hook | Returns | Description |
147
- |------|---------|-------------|
147
+ | Hook | Returns | Description |
148
+ | ----------------- | ------------------------------- | -------------------------------------- |
148
149
  | `useGlitchgrab()` | `{ reportBug, token, baseUrl }` | Access bug reporting in any component. |
149
150
 
150
151
  ### Utilities
151
152
 
152
- | Function | Description |
153
- |----------|-------------|
154
- | `sanitizeUrl(url)` | Strips sensitive query params from URLs. |
155
- | `captureContext(pages)` | Returns current URL, user agent, timestamp. |
156
- | `sendReport(payload, baseUrl)` | Low-level function to send a report. |
153
+ | Function | Description |
154
+ | ------------------------------ | ------------------------------------------- |
155
+ | `sanitizeUrl(url)` | Strips sensitive query params from URLs. |
156
+ | `captureContext(pages)` | Returns current URL, user agent, timestamp. |
157
+ | `sendReport(payload, baseUrl)` | Low-level function to send a report. |
157
158
 
158
159
  ## Safety
159
160
 
package/dist/index.d.mts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import React, { ReactNode } from 'react';
2
+ import * as React from 'react';
3
+ import { ReactNode } from 'react';
3
4
 
4
5
  interface GlitchgrabConfig {
5
6
  token: string;
@@ -62,8 +63,22 @@ interface CapturedContext {
62
63
  breadcrumbs: Breadcrumb[];
63
64
  deviceInfo: DeviceInfo | null;
64
65
  }
66
+ interface GlitchgrabSession {
67
+ /** Primary key of the user in your database (required) */
68
+ userId: string;
69
+ /** Display name (required) */
70
+ name: string;
71
+ /** Email address */
72
+ email?: string | null;
73
+ /** Phone number */
74
+ phone?: string | null;
75
+ /** Any extra fields you want attached to reports */
76
+ [key: string]: unknown;
77
+ }
65
78
  interface GlitchgrabProviderProps {
66
79
  token: string;
80
+ /** Logged-in user session — include userId (your DB primary key) so reports are traceable */
81
+ session?: GlitchgrabSession | null;
67
82
  baseUrl?: string;
68
83
  onError?: (error: Error) => void;
69
84
  onReportSent?: (result: ReportResult) => void;
@@ -73,7 +88,7 @@ interface GlitchgrabProviderProps {
73
88
  fallback?: ReactNode;
74
89
  }
75
90
  interface ReportButtonProps {
76
- position?: "bottom-right" | "bottom-left";
91
+ position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
77
92
  label?: string;
78
93
  className?: string;
79
94
  /** Allow reporting feature requests, questions, not just bugs */
@@ -112,7 +127,13 @@ interface UseGlitchgrabReturn {
112
127
  declare function useGlitchgrab(): UseGlitchgrabReturn;
113
128
  declare function GlitchgrabProvider(props: GlitchgrabProviderProps): react_jsx_runtime.JSX.Element;
114
129
 
115
- declare function ReportButton({ position, label, className, }: ReportButtonProps): react_jsx_runtime.JSX.Element;
130
+ declare function ReportButton({ position, label, className, children, }: ReportButtonProps & {
131
+ /** Render prop — receives { onClick, capturing } so you can use your own trigger button */
132
+ children?: (props: {
133
+ onClick: () => void;
134
+ capturing: boolean;
135
+ }) => ReactNode;
136
+ }): react_jsx_runtime.JSX.Element;
116
137
 
117
138
  interface ErrorBoundaryProps {
118
139
  token: string;
@@ -146,4 +167,4 @@ declare function captureContext(visitedPages: string[]): CapturedContext;
146
167
  */
147
168
  declare function sendReport(payload: ReportPayload, baseUrl?: string): Promise<ReportResult | null>;
148
169
 
149
- export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, type GlitchgrabConfig, GlitchgrabErrorBoundary, GlitchgrabProvider, type GlitchgrabProviderProps, ReportButton, type ReportButtonProps, type ReportPayload, type ReportResult, type ReportType, type UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, clearBreadcrumbs, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, useGlitchgrab };
170
+ export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, type GlitchgrabConfig, GlitchgrabErrorBoundary, GlitchgrabProvider, type GlitchgrabProviderProps, type GlitchgrabSession, ReportButton, type ReportButtonProps, type ReportPayload, type ReportResult, type ReportType, type UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, clearBreadcrumbs, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, useGlitchgrab };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import React, { ReactNode } from 'react';
2
+ import * as React from 'react';
3
+ import { ReactNode } from 'react';
3
4
 
4
5
  interface GlitchgrabConfig {
5
6
  token: string;
@@ -62,8 +63,22 @@ interface CapturedContext {
62
63
  breadcrumbs: Breadcrumb[];
63
64
  deviceInfo: DeviceInfo | null;
64
65
  }
66
+ interface GlitchgrabSession {
67
+ /** Primary key of the user in your database (required) */
68
+ userId: string;
69
+ /** Display name (required) */
70
+ name: string;
71
+ /** Email address */
72
+ email?: string | null;
73
+ /** Phone number */
74
+ phone?: string | null;
75
+ /** Any extra fields you want attached to reports */
76
+ [key: string]: unknown;
77
+ }
65
78
  interface GlitchgrabProviderProps {
66
79
  token: string;
80
+ /** Logged-in user session — include userId (your DB primary key) so reports are traceable */
81
+ session?: GlitchgrabSession | null;
67
82
  baseUrl?: string;
68
83
  onError?: (error: Error) => void;
69
84
  onReportSent?: (result: ReportResult) => void;
@@ -73,7 +88,7 @@ interface GlitchgrabProviderProps {
73
88
  fallback?: ReactNode;
74
89
  }
75
90
  interface ReportButtonProps {
76
- position?: "bottom-right" | "bottom-left";
91
+ position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
77
92
  label?: string;
78
93
  className?: string;
79
94
  /** Allow reporting feature requests, questions, not just bugs */
@@ -112,7 +127,13 @@ interface UseGlitchgrabReturn {
112
127
  declare function useGlitchgrab(): UseGlitchgrabReturn;
113
128
  declare function GlitchgrabProvider(props: GlitchgrabProviderProps): react_jsx_runtime.JSX.Element;
114
129
 
115
- declare function ReportButton({ position, label, className, }: ReportButtonProps): react_jsx_runtime.JSX.Element;
130
+ declare function ReportButton({ position, label, className, children, }: ReportButtonProps & {
131
+ /** Render prop — receives { onClick, capturing } so you can use your own trigger button */
132
+ children?: (props: {
133
+ onClick: () => void;
134
+ capturing: boolean;
135
+ }) => ReactNode;
136
+ }): react_jsx_runtime.JSX.Element;
116
137
 
117
138
  interface ErrorBoundaryProps {
118
139
  token: string;
@@ -146,4 +167,4 @@ declare function captureContext(visitedPages: string[]): CapturedContext;
146
167
  */
147
168
  declare function sendReport(payload: ReportPayload, baseUrl?: string): Promise<ReportResult | null>;
148
169
 
149
- export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, type GlitchgrabConfig, GlitchgrabErrorBoundary, GlitchgrabProvider, type GlitchgrabProviderProps, ReportButton, type ReportButtonProps, type ReportPayload, type ReportResult, type ReportType, type UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, clearBreadcrumbs, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, useGlitchgrab };
170
+ export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, type GlitchgrabConfig, GlitchgrabErrorBoundary, GlitchgrabProvider, type GlitchgrabProviderProps, type GlitchgrabSession, ReportButton, type ReportButtonProps, type ReportPayload, type ReportResult, type ReportType, type UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, clearBreadcrumbs, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, useGlitchgrab };