@synostudios/app-reporter 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synostudios/app-reporter",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A draggable bug-report button for Expo apps: screenshot, note and context, sent to your own endpoint. Shows only in dev and TestFlight builds.",
   "license": "MIT",
   "main": "src/index.tsx",

package/src/index.tsx

@@ -66,7 +66,7 @@ function Reporter({ harnessUrl, getToken, buildSha, getContext, insets = { top:
     // Let the button disappear from the screen before capturing it.
     await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
     try {
-      setShot(await captureScreen({ format: "png", result: "base64" }));
+      setShot(await captureScreen({ format: "jpg", quality: 0.8, result: "base64" })); // a full-screen PNG ran to 3–5 MB, over the harness's 4.5 MB limit (413)
     } catch {
       setShot(""); // report without a screenshot rather than not at all
     } finally {
@@ -175,7 +175,7 @@ function Sheet({ shot, top, onClose, send }: { shot: string; top: number; onClos
         ) : (
           <View style={styles.body}>
             {/* eslint-disable-next-line jsx-a11y/alt-text -- a web rule; React Native's Image is labelled with accessibilityLabel */}
-            {shot ? <Image source={{ uri: `data:image/png;base64,${shot}` }} style={styles.thumb} resizeMode="contain" accessibilityLabel="Screenshot of the screen you were on" /> : <Text style={styles.muted}>No screenshot (capture failed).</Text>}
+            {shot ? <Image source={{ uri: `data:image/jpeg;base64,${shot}` }} style={styles.thumb} resizeMode="contain" accessibilityLabel="Screenshot of the screen you were on" /> : <Text style={styles.muted}>No screenshot (capture failed).</Text>}
             <TextInput
               value={note}
               onChangeText={setNote}
@@ -208,10 +208,13 @@ async function send(r: {
   if (!r.token) return { error: "Sign in to the app first: the harness takes reports from its testers only." };
   // One JSON body with the screenshot as base64: multipart file parts differ between React Native's fetch and Expo's
   // (Expo's rejects { uri, name, type } parts with "Unsupported FormDataPart implementation").
+  // The harness runs on Vercel, which answers 413 to a request body over 4.5 MB. A screenshot that would push the report
+  // past that is left out (and the note says so) rather than losing the whole report.
+  const tooBig = !!r.shot && r.shot.length > MAX_SHOT_CHARS;
   const payload = JSON.stringify({
-    screenshot: r.shot || undefined,
+    screenshot: tooBig ? undefined : r.shot || undefined,
     report: {
-      note: r.note.trim(),
+      note: r.note.trim() + (tooBig ? "\n\n(The screenshot was too large to send and was left out.)" : ""),
       expected: r.expected.trim() || undefined,
       meta: {
         bundleId: Application.applicationId,
@@ -241,6 +244,9 @@ async function send(r: {
   }
 }
 
+// About 3 MB of image once decoded: the rest of the 4.5 MB request is the JSON and base64's overhead.
+export const MAX_SHOT_CHARS = 4_000_000;
+
 const styles = StyleSheet.create({
   button: {
     position: "absolute",