TypeError: Cannot read property 'blobId' of undefined - But I'm not even using Blobs

51 views Asked by At

Relevant Packages:

"expo": "~49.0.15",
"react": "18.2.0",
"react-native": "0.72.6",
"react-native-fetch-api": "^3.0.0",

Relevant Code:

const makeRequest = async (payload:IPayload, accessKey:string) => {            
let retryCount = 0;
        let success = false;
        let {body, method, path} = payload;
        var options = {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                ...(payload.guest ? {} : { 'Authorization': 'Bearer ' + accessKey }),
                ...(process.env.NODE_ENV != 'development' ? {} : { 'ngrok-skip-browser-warning': '93'}),
            },
            ... (body !== null) && { body: JSON.stringify(body) }
        };

        do {
            try {
                path = payload.logout === true ? props.api.logout:path
                if(payload.stream){
                    options = {...options,
                         // @ts-ignore
                        reactNative: { textStreaming: true }}
                }
                const response = await fetch(apiUrl + path, options);
                if (validHttpCodes.includes(response.status)) {
                    setAccessKeyIsValid(true);
                    if (payload.stream) {
                        // This is a STREAM
                        console.log('WE STREAM NOW')
                            let reader:any
                            const cleanup = () => {
                              if (reader) {
                                reader.cancel();
                              }
                            };
                          
                            try {
                                reader = response.body!.getReader();
                              const processStream = async ({done, value}: { done: boolean, value: Uint8Array }) => {
                                if (done) {
                                  success = true
                                  cleanup(); // Call the cleanup function when the stream is finished
                                  if(payload.endStream){
                                    payload.endStream()
                                  }
                                  return;
                                }
                                const text = new TextDecoder().decode(value)
                                console.log('from api'+text)
                                payload.callback(text);
                                reader!.read().then(processStream);
                              };
                          
                              reader!.read().then(processStream);
                              break;
                            } catch (error) {
                              console.error("Error while fetching the stream:", error);
                              cleanup(); // Cleanup in case of errors
                            }
                    } else {
                        let jsonResponse = await response.json();
                        if(props.trigger_retry(jsonResponse)==false){
                            if(payload.logout===true){ logout() }

                            jsonResponse = {
                                ...jsonResponse,
                                httpCode: response.status
                            }
                            payload.callback(jsonResponse);
                            success = true;
                            break;
                        }
                    }
                } else {
                    setAccessKeyIsValid(false)
                    break;
                }
            } catch (error) {
                console.error("An error occurred:", error);
            }
            
            retryCount++;
            await new Promise(resolve => setTimeout(resolve, Math.pow(2, retryCount) * 1000));
            
        } while (retryCount < props.max_retry);
        if( retryCount===props.max_retry && success==false){
            props.networkError()
            console.error("Maximum re-tries attempted. All failed.")
        }
    }

App.tsx imports polyfills to make this work

import polyfills from 'react-native-polyfill-globals';
polyfills()

What Im trying to accomplish:

I'm using react-native-fetch-api with polyfills to enable streaming HTTP support on Mobile.

Problem I'm Facing:

When my app is compiled and sent to Apple TestFlight, I get this error for ALL http requests. Not even streaming requests, just regular requests:

[TypeError: Cannot read property 'blobId' of undefined]

I'm only getting this when its in TestFlight, everywhere else it works.

What I've tried:

  • I've tried disabling polyfills. The error disappears, and regular HTTP requests start working again in TestFlight environment. Obviously not streaming requests, as expected since I'm not uisng the polyfills.
  • This tells me its related to my polyfills.
0

There are 0 answers