infinitered / infinitered/reactotron

Network requests not showing in RN 0.80+

Open
#1,591 3 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.6k
Forks
972
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

Thank you for this amazing tool!

It appears that network requests are no longer showing in RN 0.80+ and specifically RN 0.81.4 in our case (we don't have the new arch enabled yet but plan to very soon). The change in this recent PR for `reactotron-react-native` does not seem to be working for RN 0.80+ - #1571

_**EDIT**_ - It's possible that this is only affecting apps that are not on the new arch. Someone mentioned that they have no issues on RN 0.81 with `reactotron-react-native@5.1.17` and the new arch enabled.

What is working for us is to update the `XHRInterceptor` import location like how `react-native-network-logger` did - https://github.com/alexbrazier/react-native-network-logger/pull/117.

It sounds like the RN team is going to be removing ability to import the `XHRInterceptor` based on this discussion here - https://github.com/react-native-community/discussions-and-proposals/discussions/893#discussioncomment-13468748. If I understand right the change in #1571 is doing what [rozenite](https://github.com/callstackincubator/rozenite/tree/main/packages/network-activity-plugin/src/react-native) is?

I see that the [example app here](https://github.com/infinitered/reactotron/blob/master/apps/example-app/package.json) is running RN 0.74.5 and the change in #1571 seems to be working fine there (hermes enabled also). I wonder if something changed internally in RN 0.80+ that doesn't allow monkey patching, or if there is something else going on.

Here is a patch for `reactotron-react-native@5.1.18` that is working for RN 0.81.4

```
diff --git a/node_modules/reactotron-react-native/dist/commonjs/plugins/networking.js b/node_modules/reactotron-react-native/dist/commonjs/plugins/networking.js
index f6194ad..e282546 100644
--- a/node_modules/reactotron-react-native/dist/commonjs/plugins/networking.js
+++ b/node_modules/reactotron-react-native/dist/commonjs/plugins/networking.js
@@ -4,7 +4,14 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
-var _xhrInterceptor = require("../xhr-interceptor");
+// The change in this PR for reactotron does not work with RN 0.80+ - https://github.com/infinitered/reactotron/pull/1571
+// What does work for RN 0.80+ is importing the XHRInterceptor from the new location directly as done below.
+// This will be likely be being removed in RN 0.82 so a better long term solution will be needed.
+// See this discussion here - https://github.com/react-native-community/discussions-and-proposals/discussions/893#discussioncomment-13468748
+// Additional context - https://github.com/alexbrazier/react-native-network-logger/pull/117
+// RN 0.80+ moved XHRInterceptor to a new location
+var _xhrInterceptor = require('react-native/src/private/devsupport/devmenu/elementinspector/XHRInterceptor');
+_xhrInterceptor = { XHRInterceptor: _xhrInterceptor.default };
/**
* Don't include the response bodies for images by default.
*/

```

### Reactotron version

5.1.18

### React Native version

0.81.4 - new architecture is not enabled

Contributor guide

Open the contributing guide

Research direction

Start with the reactotron-react-native networking plugin in dist/commonjs/plugins/networking.js and compare its XHRInterceptor import with the RN 0.80+ location cited in the report. Reproduce on React Native 0.81.4 with the old architecture, then verify that network requests appear while considering the stated future removal of that import path.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile-dev, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.