Comment afficher les demandes réseau (pour le débogage) dans React Native?

J'aimerais afficher mes demandes réseau dans React Native pour m'aider à déboguer - idéalement dans l'onglet `` Réseau '' des outils de développement de Chrome.

Il y a quelques problèmes résolus à ce sujet sur GitHub ( https://github.com/facebook/react-native/issues/4122 et https://github.com/facebook/react-native/issues/934 ) mais je ne le fais pas ' t les comprendre entièrement. Il semble que je doive annuler certains des polyfills de React Native, puis exécuter certaines commandes avec des indicateurs de débogage supplémentaires, et peut-être modifier certains paramètres de sécurité de Chrome? Et apparemment, il y a des problèmes de sécurité impliqués dans ce processus qui pourraient en faire une idée terrible, mais personne impliquée dans le fil n'a explicitement déclaré ce qu'ils sont.

Quelqu'un pourrait-il fournir un guide étape par étape pour faire fonctionner l'onglet Réseau avec React Native, ainsi qu'une explication des problèmes de sécurité impliqués dans cette opération?

C'est ce que j'utilise dans le point d'entrée de mon application

const _XHR = GLOBAL.originalXMLHttpRequest ?  
    GLOBAL.originalXMLHttpRequest :           
    GLOBAL.XMLHttpRequest                     

XMLHttpRequest = _XHR

EDIT: frevib lié à une syntaxe plus concise ci-dessous. Merci frevib!

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

Explication:

GLOBAL.originalXMLHttpRequestfait référence à la copie Chrome Dev Tools de XHR. Il est fourni par RN comme trappe d'évacuation. La solution de Shvetusya ne fonctionnera que si les outils de développement sont ouverts et donc fournis XMLHttpRequest.

EDIT: Vous devrez autoriser les demandes d'origine croisée en mode débogueur. Avec Chrome, vous pouvez utiliser ce plugin pratique .

EDIT: Lisez à propos du problème RN github qui m'a conduit à cette solution

Je ne sais pas pourquoi personne n'a signalé cette solution jusqu'à présent. Utilisez React Native Debugger - https://github.com/jhen0409/react-native-debugger ! C'est le meilleur outil de débogage pour React Native à mon avis et il donne une inspection du réseau prête à l'emploi.

Jetez un œil à ces captures d'écran.

Faites un clic droit et sélectionnez «Activer l'inspection du réseau»

Faites un clic droit et sélectionnez «Activer l'inspection du réseau»

Déboguer!

J'utilise ce qui suit dans mon application (ajoutez ceci dans votre fichier de point d'entrée principal app.js):

// To see all the requests in the chrome Dev tools in the network tab.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
    GLOBAL.originalXMLHttpRequest :
    GLOBAL.XMLHttpRequest;

  // fetch logger
global._fetch = fetch;
global.fetch = function (uri, options, ...args) {
  return global._fetch(uri, options, ...args).then((response) => {
    console.log('Fetch', { request: { uri, options, ...args }, response });
    return response;
  });
};

La meilleure chose à faire est qu'il affiche également les journaux d'extraction dans la console qui sont bien formatés.

Capture d'écran:

Sur l'onglet réseau:

J'utilise Reactotron pour suivre les demandes du réseau.

Je sais que c'est une vieille question, mais il existe un moyen beaucoup plus sûr de le faire maintenant qui ne nécessite pas de désactiver CORS ou de modifier le code source de React Native. Vous pouvez utiliser une bibliothèque tierce appelée Reactotron qui non seulement suit les appels d'API (à l'aide du plugin réseau), mais peut également suivre votre magasin Redux et Sagas avec une configuration supplémentaire:

https://github.com/infinitered/reactotron https://github.com/infinitered/reactotron/blob/master/docs/plugin-networking.md

J'ai pu déboguer mes requêtes dans Chrome en supprimant le polyfill fourni par React Native après l'importation de React Native.

var React = require('react-native');
delete GLOBAL.XMLHttpRequest;

Cela a fonctionné pour moi pour les mêmes demandes d'origine. Je ne sais pas si vous devez désactiver CORS dans Chrome pour le faire fonctionner pour l'origine croisée.

Dans le passé, j'ai utilisé le GLOBAL.XMLHttpRequesthack pour suivre mes demandes d'API, mais parfois il est très lent et ne fonctionnait pas pour les demandes d'actifs. J'ai décidé d'utiliser la Postman’s proxyfonction pour inspecter la communication HTTP sortant du téléphone. Pour plus de détails, consultez la documentation officielle , mais en gros, il y a trois étapes simples:

• Configurer le proxy dans Postman
• Vérifiez l'adresse IP de votre ordinateur ( $ ifconfig)
• Configurez le proxy HTTP sur votre appareil mobile dans les paramètres wifi

Soyez prudent avec ce code.

XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
   GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;

Cela aide et c'est génial, mais cela détruit le téléchargement. Je passe 2 jours à essayer de comprendre pourquoi les fichiers téléchargés envoient [objet objet] au lieu du vrai fichier. La raison est un code ci-dessus.

Utilisez-le pour les appels réguliers, pas mais pour les appels multipart / form-data

Je suggère d'utiliser Charles pour inspecter vos demandes réseau. C'est vraiment bien et offre plus de visibilité et vous permet de faire des choses avancées.

http://charlesproxy.com

Si vous cherchez à déboguer des requêtes réseau sur une version commerciale de votre application, vous pouvez utiliser la bibliothèque react-native-network-logger . Il vous permet de surveiller et d'afficher les demandes réseau dans l'application à partir d'un écran de débogage personnalisé.

Vous pouvez ensuite placer cela derrière un indicateur de construction ou un indicateur de réseau pour le désactiver pour les utilisateurs de l'application de production.

Installez-le simplement avec, yarn add react-native-network-loggerpuis ajoutez-le au point d'entrée de votre application:

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

startNetworkLogging();
AppRegistry.registerComponent('App', () => App);

Et ceci sur un écran de débogage:

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

const MyScreen = () => <NetworkLogger />;

Avertissement: je suis l'auteur du package.

Si vous avez un téléphone ou un émulateur Android,

• npx react-native start

Ensuite, ouvrez Android Studio .

Ouvrez le androiddossier de votre projet en tant que projet Android Studio.

Cliquez sur cette icône bleue qui est Android Profiler

Après le démarrage d'Android Profiler, vous pouvez ajouter votre application via l'icône grise plus près de l' SESSIONSétiquette

Vous pouvez maintenant inspecter le réseau via cet outil. Vous pouvez voir des triangles indiquant votre activité sur le réseau.

Veuillez vérifier ceci pour plus d'informations sur l' inspection du trafic réseau .

Ajouter un débogueur dans les js où vous pouvez voir la demande ou la réponse