Skip to main content

Debug Network Requests in React Native

· 3 min read
Beniamin Marcu
Full Stack Developer

debug network requests in react native

Network bugs are some of the most common React Native production issues. A screen may fail because the request is wrong, the token is missing, Firebase rules reject the user, App Check blocks the call, the backend returns a 500, or the simulator cannot reach the host.

Quick Answer​

Use React Native DevTools Network for supported requests, add structured logging around your API client, inspect backend logs, and reproduce the bug in a release-like build. Do not rely on old "Debug JS Remotely" or Flipper-only network debugging instructions as your default workflow.

Start with React Native DevTools​

React Native DevTools includes a Network panel in current React Native versions. It records supported fetch, XMLHttpRequest, and image requests while DevTools is open.

Use it to inspect:

  • URL and method;
  • status code;
  • request and response headers;
  • response preview;
  • timing;
  • initiator call stack where supported.

Expo apps may also show Expo-specific network tooling for additional request sources.

Add API Client Logging​

Network panels are useful, but production debugging needs structured logs around your API boundary.

export async function requestJson(url: string, options: RequestInit = {}) {
  const startedAt = Date.now();

  try {
    const response = await fetch(url, options);
    const text = await response.text();

    console.info('api.response', {
      url,
      status: response.status,
      durationMs: Date.now() - startedAt,
    });

    if (!response.ok) {
      throw new Error(`Request failed with status ${response.status}`);
    }

    return text ? JSON.parse(text) : null;
  } catch (error) {
    console.warn('api.error', {
      url,
      durationMs: Date.now() - startedAt,
      message: error instanceof Error ? error.message : String(error),
    });
    throw error;
  }
}

Keep secrets out of logs. Never log authorization headers, refresh tokens, or payment payloads.

Axios Interceptors​

If your app uses Axios, use interceptors for consistent metadata:

api.interceptors.response.use(
  response => response,
  error => {
    console.warn('api.error', {
      url: error.config?.url,
      method: error.config?.method,
      status: error.response?.status,
      message: error.message,
    });

    return Promise.reject(error);
  }
);

Check Firebase and Backend Logs​

Client logs often stop at "Network request failed." For Firebase apps, inspect:

  • Firestore rules;
  • Storage rules;
  • App Check enforcement;
  • missing composite indexes;
  • Functions logs;
  • Cloud Storage billing and Blaze requirements;
  • region mismatches;
  • expired auth tokens.

Use Firebase Errors and Firebase Production Checklist when debugging generated Instamobile apps.

FAQ​

Why does a request work in debug but fail in release?​

Release builds can use different API URLs, signing keys, App Check state, network security config, entitlements, or Firebase app files.

Should I use Flipper for network debugging?​

Only when an existing project already has a working Flipper setup. Start with React Native DevTools and backend logs for new work.

Why does localhost fail on a device?​

A physical device cannot reach your computer through localhost. Use your machine IP, a tunnel, or a proper staging API URL.

Useful References​

Conclusion​

Debugging network requests is a full-stack activity. Inspect the request in React Native DevTools, log the API boundary, verify backend logs, and always test release-like builds before assuming the client code is the only problem.