React Native'de ağ isteklerini (hata ayıklama için) nasıl görüntüleyebilirim?

Ağ isteklerimi, hata ayıklamama yardımcı olması için React Native'de görmek istiyorum - ideal olarak Chrome'un geliştiricilerinin 'Ağ' sekmesinde.

GitHub'da bununla ilgili bazı kapalı sorunlar var ( https://github.com/facebook/react-native/issues/4122 ve https://github.com/facebook/react-native/issues/934 ) ama yapmıyorum t tamamen anlamak. React Native'in bazı çoklu dolgularını geri almam ve ardından fazladan hata ayıklama bayraklarıyla bazı komutlar çalıştırmam ve belki bazı Chrome güvenlik ayarlarını değiştirmem gerekiyor gibi görünüyor. Görünüşe göre, bunu yaparken onu korkunç bir fikir haline getirebilecek bazı güvenlik sorunları var, ancak iş parçacığına dahil olan hiç kimse bunların ne olduğunu açıkça belirtmedi.

Birisi, Ağ sekmesinin React Native ile çalışmasını sağlamak için adım adım bir kılavuzun yanı sıra bununla ilgili güvenlik sorunlarının bir açıklamasını sağlayabilir mi?

Şimdiye kadar neden kimsenin bu çözüme işaret etmediğinden emin değilim. React Native Debugger'ı kullanın - https://github.com/jhen0409/react-native-debugger ! Bence React Native için en iyi hata ayıklama aracıdır ve Network Inspection'ı kutudan çıkarır.

Bu ekran görüntülerine bir göz atın.

Sağ tıklayın ve 'Ağ Denetimini Etkinleştir'i seçin

Sağ tıklayın ve 'Ağ Denetimini Etkinleştir'i seçin

Hata ayıklayın!

Uygulamamın giriş noktasında kullandığım şey bu

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

XMLHttpRequest = _XHR

DÜZENLEME: frevib aşağıda daha kısa sözdizimiyle bağlantılı. Teşekkürler frevib!

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

Açıklama:

GLOBAL.originalXMLHttpRequestXHR'nin Chrome Geliştirici Araçları kopyasını ifade eder. RN tarafından bir kaçış kapağı olarak sağlanır. Shvetusya'nın çözümü yalnızca dev araçları açıksa ve bu nedenle sağlanırsa işe yarayacaktır XMLHttpRequest.

DÜZENLEME: Hata ayıklayıcı modundayken çapraz kaynak isteklerine izin vermeniz gerekecektir. Chrome ile bu kullanışlı eklentiyi kullanabilirsiniz .

DÜZENLEME: Beni bu çözüme götüren RN github sorunu hakkında bilgi edinin

Uygulamamda aşağıdakileri kullanıyorum (Bunu ana app.js giriş noktası dosyanıza ekleyin):

// 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;
  });
};

En iyi şey, konsolda iyi biçimlendirilmiş getirme günlüklerini de göstermesidir.

Ekran görüntüsü:

Ağ sekmesinde:

Ağ talebini izlemek için Reactotron kullanıyorum .

Bunun eski bir soru olduğunu biliyorum, ancak şimdi bunu yapmanın CORS'u devre dışı bırakmayı veya React Native kaynak kodunu değiştirmeyi gerektirmeyen çok daha güvenli bir yolu var. Yalnızca API çağrılarını izlemekle kalmayan (ağ eklentisini kullanarak), aynı zamanda Redux mağazanızı ve Sagas'ı ek kurulumla izleyebilen Reactotron adlı üçüncü taraf bir kitaplık kullanabilirsiniz:

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

React Native'i içe aktardıktan sonra React Native'in sağladığı polyfill'i silerek Chrome'daki isteklerimde hata ayıklayabildim.

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

Bu benim için aynı menşe talepleri için çalıştı. Çapraz kaynak için çalışmasını sağlamak için Chrome'da CORS'u devre dışı bırakmanız gerekip gerekmediğinden emin değilim.

Lütfen bu koda dikkat edin.

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

Yardımcı oluyor ve harika ama yüklemeyi yok ediyor. Yüklenen dosyaların neden gerçek dosya yerine [nesne Nesnesi] gönderdiğini anlamaya çalışmak için 2 gün harcıyorum. Nedeni yukarıdaki bir koddur.

Normal aramalar için değil, çok parçalı / form veri aramaları için kullanın

Geçmişte GLOBAL.XMLHttpRequestAPI isteklerimi izlemek için hack kullandım, ancak bazen çok yavaş oluyor ve varlık istekleri için işe yaramıyordu. Postman’s proxyTelefondan çıkan HTTP iletişimini incelemek için özelliği kullanmaya karar verdim . Ayrıntılar için resmi belgelere bakın , ancak temelde üç kolay adım vardır:

• Postacı'da proxy'yi ayarlayın
• Bilgisayarınızın IP adresini kontrol edin ( $ ifconfig)
• Wifi ayarlarında mobil cihazınızda HTTP proxy'yi yapılandırın

Uygulamanızın yayın sürümünde ağ isteklerinde hata ayıklamak istiyorsanız, kitaplık react-native-network-logger'ı kullanabilirsiniz . Uygulama içindeki ağ isteklerini özel bir hata ayıklama ekranından izlemenizi ve görüntülemenizi sağlar.

Daha sonra bunu üretim uygulamasında kullanıcılar için devre dışı bırakmak üzere bir yapı bayrağının veya ağ bayrağının arkasına yerleştirebilirsiniz.

Sadece yükleyin ve yarn add react-native-network-loggerardından bunu uygulamanızın giriş noktasına ekleyin:

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

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

Ve bu bir hata ayıklama ekranında:

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

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

Sorumluluk reddi: Ben paket yazarıyım.

Ağ isteklerinizi incelemek için Charles'ı kullanmanızı öneririm. Gerçekten iyidir ve daha fazla görünürlük sağlar ve gelişmiş şeyler yapmanıza olanak tanır.

http://charlesproxy.com

Android telefonunuz veya emülatörünüz varsa

• npx react-native start

Ardından Android Studio'yu açın .

Aç androidbir Android Studio Project gibi projenizin klasör.

Android Profiler olan mavi simgeye tıklayın

Android Profiler başladıktan sonra, uygulamanızı SESSIONSetiketin yanındaki gri artı simgesiyle ekleyebilirsiniz.

Artık bu araç aracılığıyla ağ iletişimini inceleyebilirsiniz. Ağ etkinliğinizi gösteren üçgenler görebilirsiniz.

Ağ trafiğinin incelenmesi hakkında daha fazla bilgi için lütfen bunu kontrol edin .

İstek veya yanıtı görebileceğiniz js'de Hata Ayıklayıcı'yı ekleyin