Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon How do I view API responses in Reactotron


How do I view API responses in Reactotron


To view API responses in Reactotron, you need to configure Reactotron to monitor network requests and responses. Here's how you can do it:

1. Install the `reactotron-apisauce` plugin:

bash
npm install --save-dev reactotron-apisauce

2. Import the `apisauce` plugin and configure Reactotron:

javascript
import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';
import apisaucePlugin from 'reactotron-apisauce';

Reactotron.configure()
  .use(reactotronRedux())
  .use(apisaucePlugin())
  .connect();

3. Wrap your API client (e.g., Apisauce) with Reactotron's networking plugin:

javascript
import { create } from 'apisauce';

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

api.addMonitor(Reactotron.apisauce);

4. Use the API client in your app:

javascript
async function fetchData() {
  const response = await api.get('/data');
  console.log(response.data);
}

Now, when you make API requests using the wrapped API client, Reactotron will automatically monitor and display the requests and responses in the timeline tab[1][2][3].

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.

If you're using Axios instead of Apisauce, you can still monitor network requests and responses by manually intercepting the requests and responses using Reactotron's networking plugin[5].

Citations:
[1] https://www.npmjs.com/package/reactotron-apisauce
[2] https://docs.infinite.red/reactotron/
[3] https://www.reactnativeschool.com/install-and-use-reactotron-for-debugging/
[4] https://dev.to/singhvishal802/reactotron-debugging-tool-for-react-native-and-react-project-33ic
[5] https://github.com/infinitered/reactotron/issues/1229