Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Can you show an example of using Reactotron to monitor network requests
    Reactotron React Native network requests Axios debugging Reactotron Redux React Native debugging network monitoring


Can you show an example of using Reactotron to monitor network requests


Sure, here's an example of how you can use Reactotron to monitor network requests in a React Native app:

javascript
import Reactotron, { networking } from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';

// Configure Reactotron
Reactotron.configure()
  .use(reactotronRedux())
  .use(networking())
  .connect();

// Wrap your API client (e.g. Axios) with Reactotron's networking plugin
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
});

api.interceptors.request.use((request) => {
  Reactotron.onNetworkRequest(request);
  return request;
});

api.interceptors.response.use(
  (response) => {
    Reactotron.onNetworkResponse(response);
    return response;
  },
  (error) => {
    Reactotron.onNetworkError(error);
    return Promise.reject(error);
  }
);

// Use the API client in your app
async function fetchData() {
  try {
    const response = await api.get('/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

In this example, we first configure Reactotron to use the `reactotronRedux` and `networking` plugins. This allows us to monitor Redux actions and network requests/responses.

Next, we create an Axios instance and wrap it with Reactotron's networking plugin. We use the `interceptors.request.use` and `interceptors.response.use` methods to hook into the request and response lifecycle, and then call the corresponding Reactotron methods (`onNetworkRequest`, `onNetworkResponse`, and `onNetworkError`) to log the network activity.

Finally, we can use the API client in our app, and the network requests and responses will be displayed in the Reactotron desktop app.

In the Reactotron desktop app, you'll be able to see a timeline of all the network requests and responses, along with details like the URL, method, status code, headers, and response body. This can be extremely helpful for debugging network-related issues in your React Native app.

Citations:
[1] https://stackoverflow.com/questions/33997443/how-can-i-view-network-requests-for-debugging-in-react-native
[2] https://github.com/infinitered/reactotron/tree/master
[3] https://snyk.io/advisor/npm-package/reactotron-react-native/functions/reactotron-react-native.networking
[4] https://dev.to/paulocappa/reactotron-debugging-tool-for-react-react-native-p0b
[5] https://www.reactnativeschool.com/install-and-use-reactotron-for-debugging/