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


102

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?

Réponses:


91

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


4
Après avoir mis ce morceau de code, je peux voir la demande dans la Developer Console, mais toutes mes demandes échouent avec un statut 404. Quelqu'un a une idée pourquoi cela pourrait arriver?
Peter_Fretter

1
Cela marche. Pris ceci de Github
frevib

1
Cela ne fonctionne pas pour moi. J'utilise l'émulateur Android et l'onglet réseau indique que des demandes vides sont envoyées même
Ville Miekk-oja

19
Cela ne fonctionne plus, l'erreur suivante apparaît dans la console (je ne sais pas quel changement a causé cela):Uncaught Error: unsupported BodyInit type at Response.Body._initBody (fetch.js:231) at new Response (fetch.js:390) at XMLHttpRequest.xhr.onload (fetch.js:437)
Maxim Zubarev

1
Fonctionne de mon côté sur React Native Debugger avec cette configuration en une seule ligne. Merci un million de fois, @tryangul
Kaloyan Kosev

88

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» Activation de l'inspection du réseau

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

Déboguer! Network Inspect en action


10
Si vous survolez et voyez cette réponse, notez que vous DEVEZ faire un clic droit et Enable Network Inspectque cela fonctionne. Par défaut, ce n'est pas le cas.
Stephen Saucier

1
Cela fonctionne très bien! Cela rendra ma vie tellement plus facile.
Augusto Samamé Barrientos

1
Wow, pourquoi cette fonctionnalité est-elle masquée par un clic droit sur le panneau principal. Je n'ai jamais su que cela existait. Changeur de jeu. Les réponses Json n'apparaissaient pas ... apparaissaient tout de suite sur la bascule. Merci!
Matt le

2
Pourquoi n'est-ce pas plus largement connu? 🤷‍♂️
Tom Mulkins

1
Plus comme pourquoi n'est-ce pas le comportement par défaut chaque fois que nous visitons l'onglet Réseau ou marquons comme paramètre (case à cocher ou certaines sortes) dans cet onglet!
CyberMew

46

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:

entrez la description de l'image ici

Sur l'onglet réseau:

entrez la description de l'image ici


C'est génial! Merci
DJ Forth

À quel moment de la demande initiale est-ce déclenché? Je pense en fait à l'utiliser comme mécanisme pour déclencher des jetons d'actualisation si une réponse a un 401. Y a-t-il un problème avec cela?
tushar747

FANTASTIQUE Sankalp! J'ai eu du mal à faire fonctionner Reacotron sans planter mon constructeur de métro. Votre solution fonctionne très bien. Fonctionne même dans React Native Debugger.
mediaguru

La valeur de l'en-tête «Access-Control-Allow-Origin» dans la réponse ne doit pas être le caractère générique «*» lorsque le mode des informations d'identification de la demande est «inclure». L' accès d' origine ' localhost: 8081 ' n'est donc pas autorisé. Le mode d'informations d'identification des demandes initiées par XMLHttpRequest est contrôlé par l'attribut withCredentials.
Nikhil Mahirrao

Impressionnant. Merci beaucoup
Mark

27

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

entrez la description de l'image ici


3
c'est en fait la meilleure solution parmi toutes les réponses ici (pour moi) .. super facile à configurer et n'a pas tous les effets secondaires de l'utilisation de chrome
Blue Bot

Quels sont les effets secondaires de l'utilisation du chrome qui vous inquiètent? Reactotron utilise le Chromium Embedded Framework.
Peter Evan Deal

impressionnant !! merci de m'avoir sauvé des jours de recherche sur le net
Alain

12

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


Reactotron semblait ne fonctionner que si vous utilisiez une bibliothèque externe appelée apisauce. Cela ne fonctionne pas pour une récupération normale. Donc, si vous souhaitez surveiller les demandes envoyées par des bibliothèques externes dans votre application, reactotron n'est pas bon.
Ville Miekk-oja

1
@ VilleMiekk-oja en fait reactotron supporte le Networking with Fetch depuis mars, c'est juste que la documentation était obsolète. Je l'ai essayé moi-même et je l'ai corrigé sur le readme :)
Juan Carlos Alpizar Chinchilla

cela fonctionne très bien; J'ai vu tellement de problèmes avec: GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
Petrogad

1
reactotron est vraiment facile à configurer et utile pour suivre les appels réseau des applications natives de réaction
Ram

9

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.


Qu'est-ce qu'une requête «même origine», dans le contexte de requêtes effectuées depuis une application React Native? Celui qui est sur le même domaine que le débogueur (c'est-à-dire probablement localhost)?
Mark Amery

pour mon cas, vous devez désactiver CORS dans Chrome pour le faire fonctionner pour l'origine croisée. vérifiez ce plugin chrome: chrome.google.com/webstore/detail/allow-control-allow-origi/…
Mouhamed Halloul

@MouhamedHalloul pouvez-vous expliquer comment avez-vous utilisé ce plugin?
alexmngn

@alexmngn hey, installez simplement le plugin et allumez-le en faisant glisser le bouton, l'icône doit être verte quand elle est allumée et rouge quand elle est éteinte c'est tout. dropbox.com/s/242fflwgcew6m50/…
Mouhamed Halloul

5

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

5

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


2

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


1
Je viens d'essayer Charles et il semble capturer uniquement http://localhost:8081/index.android.bundle?platform=android&dev=true.. comment le faire capturer TOUTES les demandes? (Je frappe une API externe)
jakeforaker

Votre API externe utilise-t-elle HTTPS? Si tel est le cas, vous devez configurer un peu Charles pour les attraper également.
Ran Yefet le

lors de l'utilisation d'Android, charles peut être un peu problématique pour capturer les demandes sortantes. vous devez configurer «manuellement» votre simulateur pour accéder à charles (et la dernière fois que j'ai essayé, aller dans le panneau de configuration ne ferait pas le travail - l'ip proxy devait être transmis à partir d'une instanciation de ligne de commande).
joe

1

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é.

liste react-native-network-logger

détails de react-native-network-logger

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.


Mec, cette lib est géniale! Merci
Emidomenge

0

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.

entrez la description de l'image ici

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 entrez la description de l'image ici

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 .


-25

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.