fix(app, app-shell): handle binary data transfer over USB/IPC for images (#20299)

Closes RQA-4941

Axios cannot return Blob types when in a Node.js environment (there is no native blob type in the version of Axios we use), and Electron's IPC mechanism does not properly serialize Blob objects into strings anyway.

To fix, on the node layer we can request an ArrayBuffer type instead, transform it to an Array type, and then send this data across the IPC as it becomes perfectly serializable. We can then parse this Array type back into a Blob on the browser layer.

Note that downloading images works perfectly fine - it's just an issue whenever we request the raw image files themselves.

Author: mjhuff

app-shell/src/usb.ts

@@ -133,11 +133,23 @@ async function usbListener(
       ...config,
       data,
       headers: { ...config.headers, ...formHeaders },
+      // Axios can't create proper blob types on the node layer, so we use
+      // arraybuffer instead.
+      responseType:
+        config.responseType === 'blob' ? 'arraybuffer' : config.responseType,
     })
     usbLog.silly(`${config.method} ${config.url} resolved ok`)
+
+    // Convert ArrayBuffer to regular Array for IPC transfer, since ArrayBuffer
+    //  objects cannot be sent across the IPC reliably.
+    const responseData =
+      config.responseType === 'blob' && response.data instanceof ArrayBuffer
+        ? Array.from(new Uint8Array(response.data))
+        : response.data
+
     return {
       error: null,
-      data: response.data,
+      data: responseData,
       status: response.status,
       statusText: response.statusText,
     }

app/src/redux/shell/remote.ts

@@ -61,6 +61,15 @@ export async function appShellRequestor<Data>(
   if (result?.error != null) {
     throw result.error
   }
+
+  // Blob data doesn't serialize properly across the IPC, so we parse it from
+  // an Array type sent from the shell layer.
+  if (config.responseType === 'blob' && Array.isArray(result.data)) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const uint8Array = new Uint8Array(result.data)
+    result.data = new Blob([uint8Array]) as Data
+  }
+
   return result
 }