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.