How to Monitor Network requests in React Native

Debugging API calls in mobile applications have always been a hassle and time-consuming process. This is not the case with Intercept.rest.

Let’s see how we can easily debug and monitor the network request from your mobile app using Intercept.Rest

• Let’s Start off by creating a new React native project.

• react-native init InterceptDemo
• After the project has been created, you can open it in any IDE of your choice. I would recommend using VSCode.
• Navigate to App.js render function and create a button which will trigger the network call requestData().
• Add code for fetch() inside requestData().

• Declare a constant for URL. Now we will create the API URL using interceptor.
• Now open Intercept.rest and create an account.
• Create a new Interceptor by giving the endpoint URL as the Desired API URL and click the ‘create’ button.

Creating a new Interceptor

• Now copy the new URL which has been generated.

• Now open your code and paste this URL as the value of constant URL and then run the app.
• Press the button we created and meanwhile, check your interceptor dashboard.

• You can Monitor all the network request. press expand to see the full JSON response.

Full code of App.js

Intercept.rest lets you debug and monitor API requests and responses. It is similar to the Network tab in Chrome Developer Tools but works for any API: mobile apps, web hooks, frontend etc.