react-native-bug-reporter 1.1.0 → 1.1.1
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.
- package/README.md +58 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -62,8 +62,8 @@ export default function App() {
|
|
|
62
62
|
<BugReporterProvider
|
|
63
63
|
config={{
|
|
64
64
|
supabaseUrl: 'https://YOURPROJECT.supabase.co',
|
|
65
|
-
supabaseAnonKey: 'eyJ...anon-key',
|
|
66
|
-
notifyEmails: 'admin@yourcompany.com',
|
|
65
|
+
supabaseAnonKey: 'eyJ...anon-key', // safe to ship; RLS controls access
|
|
66
|
+
notifyEmails: 'admin@yourcompany.com', // who gets the email
|
|
67
67
|
environment: __DEV__ ? 'development' : 'production',
|
|
68
68
|
getUser: () => ({ id: user.id, name: user.name, email: user.email }),
|
|
69
69
|
}}
|
|
@@ -94,12 +94,12 @@ function HelpScreen() {
|
|
|
94
94
|
|
|
95
95
|
`useBugReporter()` returns:
|
|
96
96
|
|
|
97
|
-
| Field | Type
|
|
98
|
-
|
|
99
|
-
| `openReporter` | `(screenshot?) => void`
|
|
100
|
-
| `closeReporter` | `() => void`
|
|
101
|
-
| `isOpen` | `boolean`
|
|
102
|
-
| `isAutoDetectEnabled` | `boolean`
|
|
97
|
+
| Field | Type | Description |
|
|
98
|
+
| --------------------- | ----------------------- | ------------------------------------------------ |
|
|
99
|
+
| `openReporter` | `(screenshot?) => void` | Open the modal (optionally pre-attach an image). |
|
|
100
|
+
| `closeReporter` | `() => void` | Close it. |
|
|
101
|
+
| `isOpen` | `boolean` | Modal visibility. |
|
|
102
|
+
| `isAutoDetectEnabled` | `boolean` | Whether screenshot detection is on. |
|
|
103
103
|
|
|
104
104
|
### Track the current screen
|
|
105
105
|
|
|
@@ -107,14 +107,17 @@ The SDK is navigation-agnostic. Report the active route so it's attached to bug
|
|
|
107
107
|
reports. With **React Navigation**:
|
|
108
108
|
|
|
109
109
|
```tsx
|
|
110
|
-
import {
|
|
110
|
+
import {
|
|
111
|
+
setCurrentScreen,
|
|
112
|
+
getActiveRouteName,
|
|
113
|
+
} from 'react-native-bug-reporter';
|
|
111
114
|
|
|
112
115
|
<NavigationContainer
|
|
113
|
-
onStateChange={
|
|
116
|
+
onStateChange={state => {
|
|
114
117
|
const route = getActiveRouteName(state);
|
|
115
118
|
if (route) setCurrentScreen(route);
|
|
116
119
|
}}
|
|
117
|
-
|
|
120
|
+
/>;
|
|
118
121
|
```
|
|
119
122
|
|
|
120
123
|
…then pass `getCurrentScreen` in the config:
|
|
@@ -131,12 +134,35 @@ Or just call `setCurrentScreen('Checkout')` from any screen's effect.
|
|
|
131
134
|
```tsx
|
|
132
135
|
import { BugReportAdminScreen } from 'react-native-bug-reporter';
|
|
133
136
|
|
|
134
|
-
<BugReportAdminScreen config={{ supabaseUrl, supabaseAnonKey }}
|
|
137
|
+
<BugReportAdminScreen config={{ supabaseUrl, supabaseAnonKey }} />;
|
|
135
138
|
```
|
|
136
139
|
|
|
137
140
|
Live-lists all reports from Supabase (realtime) with screenshot thumbnails and a
|
|
138
141
|
tap-to-cycle status control. Pass the same `supabaseUrl` + `supabaseAnonKey`.
|
|
139
142
|
|
|
143
|
+
### Multi-app support
|
|
144
|
+
|
|
145
|
+
Give each app its own `appKey` (and `appName`) — every report is tagged with it:
|
|
146
|
+
|
|
147
|
+
```tsx
|
|
148
|
+
<BugReporterProvider config={{ supabaseUrl, supabaseAnonKey, appKey: 'shop', appName: 'Shop App' }}>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
The web admin panel then shows a per-app sidebar with bug counts, and email
|
|
152
|
+
notifications are routed per app.
|
|
153
|
+
|
|
154
|
+
### Web admin panel + per-app notification emails
|
|
155
|
+
|
|
156
|
+
Open [`supabase/dashboard.html`](../supabase/dashboard.html) in a browser, enter
|
|
157
|
+
your Supabase URL + anon key, and (for Send/Resend) the Edge Function name. It
|
|
158
|
+
gives you:
|
|
159
|
+
|
|
160
|
+
- **Per-app sidebar** with live bug counts, overall stats
|
|
161
|
+
- **Status + severity filters**, search, CSV export, screenshot lightbox
|
|
162
|
+
- **Report details** (full JSON), status change, **resend email**, delete
|
|
163
|
+
- **🔔 Notify Emails** per app — add multiple emails at once; the Edge Function
|
|
164
|
+
emails all of them for that app's new bugs. **Send test email** to verify.
|
|
165
|
+
|
|
140
166
|
### Theming
|
|
141
167
|
|
|
142
168
|
```tsx
|
|
@@ -169,22 +195,24 @@ config={{
|
|
|
169
195
|
|
|
170
196
|
## Config reference (`BugReporterConfig`)
|
|
171
197
|
|
|
172
|
-
| Option
|
|
173
|
-
|
|
174
|
-
| `supabaseUrl`
|
|
175
|
-
| `supabaseAnonKey`
|
|
176
|
-
| `
|
|
177
|
-
| `
|
|
178
|
-
| `
|
|
179
|
-
| `
|
|
180
|
-
| `
|
|
181
|
-
| `
|
|
182
|
-
| `
|
|
183
|
-
| `
|
|
184
|
-
| `
|
|
185
|
-
| `
|
|
186
|
-
| `
|
|
187
|
-
| `
|
|
198
|
+
| Option | Type | Default | Description |
|
|
199
|
+
| -------------------- | ------------------------------ | ------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
200
|
+
| `supabaseUrl` | `string` **(required)** | — | Supabase project URL. |
|
|
201
|
+
| `supabaseAnonKey` | `string` **(required)** | — | Supabase anon (public) key. |
|
|
202
|
+
| `appKey` | `string` | `default` | Multi-app id — tags every report so the admin panel shows per-app sections + counts and routes emails per app. |
|
|
203
|
+
| `appName` | `string` | `appKey` | Human-friendly app name shown in the admin panel. |
|
|
204
|
+
| `tableName` | `string` | `bug_reports` | Postgres table for reports. |
|
|
205
|
+
| `storageBucket` | `string` | `bug-reports` | Storage bucket for screenshots. |
|
|
206
|
+
| `notifyEmails` | `string \| string[]` | — | Extra recipient(s); merged with the app's emails from the admin panel. |
|
|
207
|
+
| `getUser` | `() => UserInfo \| Promise<…>` | — | Current signed-in user. |
|
|
208
|
+
| `getCurrentScreen` | `() => string \| null` | — | Active route name. |
|
|
209
|
+
| `environment` | `string` | — | e.g. `"production"`. |
|
|
210
|
+
| `showContextSummary` | `boolean` | `true` | Show the "Automatically attached" block (data is always collected). |
|
|
211
|
+
| `disableAutoDetect` | `boolean` | `false` | Manual-only reporting. |
|
|
212
|
+
| `theme` | `BugReporterTheme` | light theme | Color overrides. |
|
|
213
|
+
| `onSubmitted` | `(report) => void` | — | Success callback. |
|
|
214
|
+
| `onError` | `(error) => void` | — | Failure callback. |
|
|
215
|
+
| `debug` | `boolean` | `false` | Verbose logging. |
|
|
188
216
|
|
|
189
217
|
---
|
|
190
218
|
|
|
@@ -203,12 +231,13 @@ The JS layer shows the image in the modal and streams it to your backend as
|
|
|
203
231
|
|
|
204
232
|
---
|
|
205
233
|
|
|
234
|
+
<!--
|
|
206
235
|
## Publishing your own copy
|
|
207
236
|
|
|
208
237
|
```sh
|
|
209
238
|
npm version patch
|
|
210
239
|
npm publish # runs `bob build` via the prepare script
|
|
211
|
-
```
|
|
240
|
+
``` -->
|
|
212
241
|
|
|
213
242
|
The build emits CommonJS, ESM, and TypeScript declarations to `lib/`.
|
|
214
243
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-bug-reporter",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "Universal React Native bug reporter: auto-detect screenshots, annotate, collect device/app/user context, and ship to Supabase (Postgres + Storage) with Edge Function email.",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|