React Native Network Logger

Common errors

• Error: XHRInterceptor location for RN 80

  cause The `react-native-network-logger` library failed to correctly locate and patch the global `XMLHttpRequest` object due to changes in React Native's internal structure in versions 0.79 or 0.80.
  fix Update `react-native-network-logger` to version 2.0.0 or newer. Specifically, version 2.0.1 addresses compatibility issues with React Native 0.80.

• TS2305: Module '"react-native-network-logger"' has no exported member 'NetworkLogger'. Did you mean to use 'import NetworkLogger from "react-native-network-logger"' instead?

  cause Attempting to import `NetworkLogger` as a named export (`{ NetworkLogger }`) when it is a default export of the package.
  fix Change the import statement from `import { NetworkLogger } from 'react-native-network-logger';` to `import NetworkLogger from 'react-native-network-logger';`.

• ReferenceError: Can't find variable: XHRInterceptor

  cause The internal `XHRInterceptor` could not be found or correctly imported by `react-native-network-logger`, often due to `react-native` version incompatibilities or Metro bundler caching issues.
  fix Ensure `react-native-network-logger` is updated to a version compatible with your `react-native` version (e.g., v2.0.1 for RN 0.80). Clear your Metro bundler cache (`npm start -- --reset-cache`) and reinstall node modules (`rm -rf node_modules && npm install`).

• TS2305: Module '"react-native-network-logger"' has no exported member 'NetworkLoggerProps'.

  cause Attempting to import the `NetworkLoggerProps` type as a value import (`import { NetworkLoggerProps } from ...`) rather than a type-only import.
  fix Use a type-only import: `import type { NetworkLoggerProps } from 'react-native-network-logger';`.

Warnings

• breaking Version 2.0.0 introduced breaking changes related to the package's build format and exports, which might require updates to import statements or custom Metro/Babel configurations in your React Native project.
  Fix: Review your project's import paths and module resolution settings. Ensure your build environment is compatible with modern React Native module formats. Update your `import` statements according to the new export structure (e.g., `NetworkLogger` is a default export).
• breaking The internal `XHRInterceptor`'s location changed in v2.0.0 and v2.0.1 to accommodate updates in React Native versions 0.79+ and 0.80+. Failure to update the package may result in network logging not functioning correctly or silent failures, particularly for projects on newer React Native versions.
  Fix: Ensure you are using the latest `react-native-network-logger` version compatible with your React Native version. Version 2.0.0 provides a fallback for `XHRInterceptor` import paths, while 2.0.1 specifically resolves issues for React Native 0.80+.
• gotcha Custom theme objects provided to the `NetworkLogger` component are not guaranteed to maintain backward compatibility across minor or major version updates of the library, potentially requiring adjustments after upgrading.
  Fix: Thoroughly test any custom theme implementations after upgrading `react-native-network-logger`. For more stable theming, consider using the built-in `dark` or `light` string options.

Install

• npm install react-native-network-logger npm
• yarn add react-native-network-logger yarn
• pnpm add react-native-network-logger pnpm

Imports

• startNetworkLogging
  wrong:

  const startNetworkLogging = require('react-native-network-logger').startNetworkLogging;

  correct:

  import { startNetworkLogging } from 'react-native-network-logger';

  This function should be called as early as possible in your app's entry point (e.g., `index.js` or `App.js`) to ensure all network requests are intercepted.
• NetworkLogger
  wrong:

  import { NetworkLogger } from 'react-native-network-logger';

  correct:

  import NetworkLogger from 'react-native-network-logger';

  The `NetworkLogger` component is a default export and should be imported without curly braces. It provides the UI to display intercepted network traffic.
• NetworkLoggerProps
  wrong:

  import { NetworkLoggerProps } from 'react-native-network-logger';

  correct:

  import type { NetworkLoggerProps } from 'react-native-network-logger';

  This is a TypeScript type definition. Use `import type` to avoid bundling unused code in environments that support it, or a standard `import` if your setup doesn't differentiate.

Quickstart

This code demonstrates how to initialize `react-native-network-logger` to start intercepting HTTP requests and then render the `<NetworkLogger />` component within a modal to display the intercepted traffic. It includes basic styling and options for `startNetworkLogging` like `maxRequests` and `ignoredUrls`.

import { startNetworkLogging } from 'react-native-network-logger';
import NetworkLogger from 'react-native-network-logger';
import React, { useEffect, useState } from 'react';
import { View, Button, Modal, Text, StyleSheet } from 'react-native';

// Start logging as early as possible in your app's entry point.
// For demonstration, it's shown here, but typically placed in index.js or App.js.
startNetworkLogging({
  maxRequests: 500, // Retain a maximum of 500 requests
  // Example: ignore specific URLs or patterns
  ignoredUrls: [/^https:\/\/example\.com\/health/, /localhost\:\d+\/__/],
});

const App = () => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // In a real app, you might trigger the logger visibility via a debug menu
    // or a specific gesture in development builds.
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native Network Logger Demo</Text>
      <Button title="Show Network Logger" onPress={() => setIsVisible(true)} />
      <Modal
        animationType="slide"
        transparent={false}
        visible={isVisible}
        onRequestClose={() => setIsVisible(false)}
      >
        <NetworkLogger
          theme="dark" // Optional: specify 'dark' or 'light'
          // Or provide a custom theme object: { backgroundColor: '#222', textColor: '#eee', ... }
        />
        <Button title="Close Logger" onPress={() => setIsVisible(false)} />
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default App;