Network Error React Native on IOS Production - ios

Question

I am facing an issue with a react native app in production. Some request fails and other go through. The issue happens to a lot of users and it's random. Only happens to our ios app and not our android app. The device has internet because we have #react-native-community/netinfo logging every time the network changes and in almost all the cases is not logging any change (there are some times that the user losses internet in which case it's fine the network error).
We use sentry to log app errors. In the image below you can see the device makes a post request to our API and very quickly it goes to response interceptor error.
In the tags image you can see that the problem only occurs on release 5.3.3 but I don't know what is causing this from this release. I have not changed anything from axios request.
Since I don't have a reputation of 10 I cannot post images but here are the links.
Network Issue Report: https://i.postimg.cc/PJWjvCvt/Screen-Shot-2022-06-16-at-11-25-06-AM.png
Image of sentry tags: https://i.postimg.cc/Y0NSBr7s/Screen-Shot-2022-06-16-at-11-43-37-AM.png
This is our axios interceptor:
const axiosInstance = axios.create({
baseURL: ENV.API_URL,
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
});
axiosInstance.interceptors.request.use(async function (config) {
config.headers['device-app-version'] = DeviceInfo.getVersion();
try {
const token = await AsyncStorage.getItem('token');
if (token) {
config.headers['authorization'] = "JWT " + token;
}
} catch (error) {
console.log("ERROR GET ASYNCSTORAGE DATA FAILED ON TOKEN", error);
}
const httpMetric = firebase.perf().newHttpMetric(config.url, config.method.toUpperCase());
config.metadata = { httpMetric };
await httpMetric.start();
return config;
}, function (error) {
console.log("Request interceptor error");
console.log(error);
return Promise.reject(error);
});
axiosInstance.interceptors.response.use(async function (response) {
const { httpMetric } = response.config.metadata;
if (response.status != 200) {
Sentry.withScope(function(scope) {
scope.setTag('API', response.config.url);
scope.setExtra('API', response.config.url);
scope.setFingerprint(['API', response.config.url]);
Sentry.captureException(response);
});
}
httpMetric.setHttpResponseCode(response.status);
httpMetric.setResponseContentType(response.headers['content-type']);
await httpMetric.stop();
return response;
}, async function (error) {
const { httpMetric } = error.config.metadata;
console.log("Response interceptor error");
console.log(error);
console.log("error.response");
console.log(error.response);
const scope = new Sentry.Scope();
if (error.response) {
// Request made and server responded
console.log(error.response.data);
console.log(error.response.headers);
console.log("Status:", error.response.status);
if (error.response.status == 403) {
return Promise.reject(error);
}
scope.setTag('API', error.response.config.url);
scope.setExtra('API', error.response.config.url);
scope.setFingerprint(['API', error.response.config.url]);
Sentry.captureException(error.response, scope);
} else if (error.request) {
// The request was made but no response was received
console.log(error.request);
Sentry.captureException(error.request, scope);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
Sentry.captureException(error.message, scope);
}
httpMetric.setHttpResponseCode(error.response.status);
httpMetric.setResponseContentType(error.response.headers['content-type']);
await httpMetric.stop();
if (!error.response) {
error.response = {
data: [],
status: 401,
message: 'Error ocurred making request. Try again'
}
}
return Promise.reject(error);
},
);
Package.json (affected packages)
"axios": "^0.26.1",
"react": "17.0.2",
"react-native": "0.66.1",