This repo contains a minimal repro for an issue with the latest Instabug SDK for react-native.
Make sure to add a valid Instabug token on config.ts
.
To allow visualizing the error easily in dev, since it is an unhandled promise rejection. I'm including a patch in the patches folder that add logs to react-native. After running npm install
it should be applied automatically by patch-package
but ideally check under node_modules to be sure.
If the network logger is enabled (it is by default), the error is trigger in the network check.
instabug-networklogger-issue.mp4
After trying out upgrade from Instabug 14.0.0 to 14.1.0 we started to see a bunch of non-fatal errors on the "Crashes" section on our dashboard for the release build with the following message:
Error - Request has not been opened
The error is thrown from this react-native file: https://github.com/facebook/react-native/blob/110450105e140d0846c63d3d15f356beefaeb020/packages/react-native/Libraries/Network/XMLHttpRequest.js#L540. I verified by manually insertting logs there in my node_modules/eract-native.
Reverting back to 14.0.0 solves it. We stop getting those.
After some debugging I found that when Instabug's Network Logger is enabled, some http requests from the connectivity checks done with @react-native-community/netinfo (a pretty standard package to check for network status) start to throw that error. So disabling the Network Logger on 14.1.0 also solves it.
The first underlying request it does when you try like NetInfo.fetch
will trigger that. And you can't catch it. You can simulate the first request by recalling NetInfo.configure
to reset the initial.
I looked at the changes from 14.0 to 14.1 and found something that can cause issues.
This is the original XMLHttpRequest
send
method implementation from react-native:
https://github.com/facebook/react-native/blob/110450105e140d0846c63d3d15f356beefaeb020/packages/react-native/Libraries/Network/XMLHttpRequest.js#L538
Where send
has this signature:
send: (data: any): void
This is the override done by Instabug 14.0.0 on the XhrNetworkInterceptor when you have the Network Logger enabled:
Method is still
send: (data: any): void
And this is it on Instabug 14.1.0:
Now this turns into
send: async (data: any): Promise<void>
because it is doing:
async function (data) {
// ...
const traceparent = await getTraceparentHeader(cloneNetwork); // <--- awaiting this
if (traceparent) {
this.setRequestHeader('Traceparent', traceparent);
}
//...
}
So something that is originally sync is now being overriden with an async operation that can have some delay before resolving.
This can break stuff that was relying on the sync behavior.
So I tried manually doing this on 14.1.0:
diff --git a/node_modules/instabug-reactnative/src/utils/XhrNetworkInterceptor.ts b/node_modules/instabug-reactnative/src/utils/XhrNetworkInterceptor.ts
index 4443940..1862b36 100644
--- a/node_modules/instabug-reactnative/src/utils/XhrNetworkInterceptor.ts
+++ b/node_modules/instabug-reactnative/src/utils/XhrNetworkInterceptor.ts
@@ -175,7 +175,7 @@ export default {
originalXHRSetRequestHeader.apply(this, [header, value]);
};
- XMLHttpRequest.prototype.send = async function (data) {
+ XMLHttpRequest.prototype.send = function (data) {
const cloneNetwork = JSON.parse(JSON.stringify(network));
cloneNetwork.requestBody = data ? data : '';
@@ -310,10 +310,10 @@ export default {
}
cloneNetwork.startTime = Date.now();
- const traceparent = await getTraceparentHeader(cloneNetwork);
- if (traceparent) {
- this.setRequestHeader('Traceparent', traceparent);
- }
+ // const traceparent = await getTraceparentHeader(cloneNetwork);
+ // if (traceparent) {
+ // this.setRequestHeader('Traceparent', traceparent);
+ // }
originalXHRSend.apply(this, [data]);
};
isInterceptorEnabled = true;
And it fixes the issue.