Embora tenha o potencial de fornecer a melhor UX para os usuários, desenvolver aplicativos iOS e Android nativamente geralmente não é uma opção para desenvolvedores de JavaScript. É aqui que o React Native entra em ação.
O código do aplicativo React Native pode ser analisado com o inspetor, criador de perfil e depurador remoto, todos acessados pelo menu de desenvolvimento no aplicativo . Você pode combinar isso com as Ferramentas de desenvolvedor do React autônomas. Em contraste com o desenvolvimento nativo, no entanto, essa abordagem tem seus limites com relação à depuração da comunicação de rede.
Este artigo cobre ferramentas adicionais para React Native que permitem recursos de depuração que as React Native Developer Tools não oferecem. O foco é inspecionar e reescrever o tráfego de rede entre o aplicativo e o servidor.
No final deste artigo, você terá aprendido que a depuração do tráfego de rede para aplicativos Android tem seus limites dependendo das abordagens de desenvolvimento selecionadas, como fluxo de trabalho gerenciado Expo, expulsão da abordagem gerenciada Expo ou React Native CLI.
Este artigo descreve as ferramentas úteis de proxy local Charles Proxy , HTTP Toolkit e Proxyman . Para depurar o tráfego de rede criptografado para iOS, abordo Proxyman e Charles Proxy, e para Android, HTTP Toolkit e Proxyman (pulo Charles Proxy embora isso é compatível ).
Meu objetivo não é cobrir todos os casos de uso possíveis com todas as ferramentas, mas mostrar diferentes cenários com diferentes ferramentas para não arrastar o artigo desnecessariamente. Eu apenas cobrirei como depurar o tráfego de sua ferramenta iOS conectada com Proxyman, por exemplo, e não com Charles Proxy (embora seja possível).
Além disso, alguns casos de uso de depuração só são possíveis em dispositivos reais; portanto, vou mostrar a você duas ferramentas úteis para desenvolvimento iOS e Android para espelhar as telas do dispositivo em sua máquina. Este é um salva-vidas em uma sessão remota de programação em par.
React ambientes nativos e seus recursos de depuração de rede
Existem várias maneiras de desenvolver um aplicativo React Native . As opções mais comuns são:
- O método padrão recomendado pelo Facebook com a React Native CLI
- Um fluxo de trabalho gerenciado com Expo , que representa o menor obstáculo inicial
- Uma abordagem híbrida com componentes de código nativo e componentes escritos em React Native
Existem muitas diferenças entre essas três abordagens, mas a distinção mais importante em termos de depuração do tráfego de rede é se você tem acesso ao código nativo do Android ou não.
Como você verá mais tarde, para habilitar todos os recursos de depuração de rede, você precisa definir algumas configurações de segurança no código Android nativo. Isso é possível com as opções 1 e 3, mas não com 2-exceto se você ejetar do fluxo de trabalho gerenciado .
Sua capacidade de inspecionar chamadas de rede HTTPS depende da possibilidade de estabelecer um proxy HTTP (S) em seu configuração de desenvolvimento com uma ferramenta de proxy local como Charles Proxy ou Proxyman. Eles instalam certificados SSL que permitem que você visualize conteúdo HTTPS criptografado. Para o Android em particular, tudo se resume a se você pode personalizar a configuração de segurança de rede nativa.
Abaixo está uma visão geral de se as solicitações e respostas criptografadas podem ser inspecionadas para cada uma das três opções analisadas acima:
- iOS, Android
- iOS; mas se ejetado do fluxo de trabalho gerenciado, Android também
- iOS, Android
React Native Development Environment
Para os leitores que são novos no React Native, a próxima seção fornecerá uma visão geral rápida sobre como configurar um React Native environment (opções 1 e 2 acima). Não abordo a abordagem híbrida (3) porque isso iria além do escopo do artigo.
Fluxo de trabalho gerenciado com Expo
A Expo é uma ótima maneira de colocar um aplicativo React Native básico em funcionamento rapidamente. Se você não planeja trabalhar em um projeto de aplicativo híbrido, Expo é uma boa escolha. Certifique-se de implementar todos os seus requisitos com as bibliotecas de componentes existentes .
$ npm install--global expo-cli [1] instalar expo cli globalmente $ expo init react-native-sandbox [1] criar um projeto
O segundo comando abre um menu interativo para selecionar a partir de um modelo, com ou sem TypeScript.
Atualmente, a equipe da Expo cria um projeto com Yarn como gerenciador de pacotes, então use o seguinte comando da pasta raiz do projeto para iniciar o Bundler Metro :
$ yarn start
O bundler Metro deve abrir em seu navegador padrão.
Como você pode ver, a Expo obtém notas altas com uma boa experiência de desenvolvedor e um fluxo de trabalho intuitivo. Basta abrir o aplicativo da câmera no seu dispositivo móvel e escanear o código QR e, simsalabim, o aplicativo é aberto no seu dispositivo.
Se o Metro travar, pode ajudar a reinstalar Watchman , que é usado nos bastidores.
$ brew reinstalar watchman
React Native CLI
É justo dizer que a abordagem gerenciada da Expo pode não se adequar ao seu caso de uso-digamos, se você quiser incorporar módulos nativos. Dê uma olhada na documentação da Expo sobre suas limitações . O vídeo a seguir oferece uma boa visão geral de quando usar Expo ou React Native CLI:
Antes de criar um projeto , você precisa para configurar seu ambiente de desenvolvimento para iOS e Android. Você precisará investir mais tempo na configuração inicial em comparação com a Expo, mas assim que estiver concluída, os comandos a seguir produzirão um projeto inicial funcional.
Para Android, você precisa ter um emulador instalado e funcionando ou conectar um dispositivo. iOS é um pouco mais fácil de atender; o simulador abre automaticamente. A próxima seção dá mais detalhes sobre como configurar isso.
$ npx react-native init rnCliPlayground # init project $ cd rnCliPlayground && npx react-native run-ios # start iOS app $ cd rnCliPlayground && npx react-native run-android # start Android app
Em contraste com a Expo, minha experiência é que mais coisas podem dar errado durante a configuração e pode demorar mais para o iOS e o Android rodarem. Por outro lado, a documentação da equipe React Native é útil. Dito isso, porém, a Expo funciona tão bem como sempre fora da caixa.
Projeto de exemplo
Os exemplos no restante do artigo sempre se referem a um projeto de Expo muito simples; Acabei de gerar o projeto conforme descrito acima. A única mudança é substituir App.js pelo código a seguir, que busca uma matriz JSON de filmes :
importar {StatusBar} de'expo-status-bar';
import React, {useEffect, useState} de'react';
import {StyleSheet, Text, View} de'react-native';
função padrão de exportação App () { const [movies, setMovies]=useState ([]) const [carregando, setLoading]=useState (false); useEffect (()=> { setLoading (true); const getMoviesFromApi=()=> { return fetch ('https://reactnative.dev/movies.json') .então ((resposta)=> { if (response.status <400) { return response.json () } senão { Retorna { filmes: [] }; } }) .então ((json)=> { return json.movies; }) .catch ((erro)=> { Retorna { filmes: [] }; }); }; getMoviesFromApi (). then (response=> { setMovies (resposta) setLoading (false); }); }, []) Retorna ( Carregando... } {! carregando && movies.length> 0 && movies.map (filme=> {movie.title} )} {! loading && movies.length===0 && nenhum filme encontrado } );
}
estilos const=StyleSheet.create ({ container: { flex: 1, backgroundColor:'#fff', alignItems:'center', justifyContent:'center', },
});
Configure o simulador iOS e o emulador Android
Para os fins deste artigo, você precisará usar o iOS Simulator/Android Emulator ou dispositivos reais. Portanto, você precisa configurar o Xcode e o Android Studio, respectivamente. Da perspectiva do iOS, você só precisa abrir o Simulador, enquanto com o Android, você precisa personalizar as configurações de segurança no código.
Xcode
Você pode baixar e instalar o Xcode em developer.apple.com ou em App Store . Na Expo CLI, você pode pressionar i ou clicar no link Executar no simulador iOS na interface do navegador Expo. Você pode pressionar ⌘ d no Simulador para abrir o menu do desenvolvedor no aplicativo.
Android Studio
Depois de instalar o Android Studio , você deve configure-o para abrir seu projeto React Native no Android Emulator. Inicie o empacotador Metro do seu projeto Expo com o seguinte comando:
$ yarn start
O fluxo de trabalho gerenciado inicia o Metro e abre as ferramentas do desenvolvedor dentro do navegador e no terminal. No terminal, você pode pressionar a para abrir seu aplicativo Expo no Android Emulator. Você pode fazer isso na Expo CLI ou na visualização do navegador clicando em Executar no dispositivo/emulador Android .
Você pode abrir o menu do desenvolvedor no aplicativo com ⌘ m .
Ferramentas que promovem a colaboração remota
Existem casos de uso de desenvolvimento em que não é possível trabalhar com o simulador iOS ou o emulador Android, por exemplo, depurando seu aplicativo iOS com diferentes configurações de rede ou modo avião. Portanto, você precisa trabalhar com seu dispositivo real.
Esta seção apresenta ferramentas úteis para trabalhar com dispositivos reais para facilitar a depuração de dispositivos reais. Também existem maneiras de espelhar a tela do seu dispositivo real na máquina de desenvolvimento, o que melhora a experiência do desenvolvedor em cenários de programação em par remoto.
scrcpy para espelhamento de tela e controle remoto
scrcpy é um utilitário incrível para desenvolvimento Android que está disponível para todos os principais sistemas operacionais. Ele espelha a tela de um dispositivo conectado via cabo USB à máquina do desenvolvedor.
O que é especialmente interessante é que o dispositivo móvel também pode ser controlado remotamente pela ferramenta em sua máquina de desenvolvimento em vez de usar gestos em um dispositivo. É especialmente útil se você compartilhar sua tela em uma videoconferência para que os colegas possam ver o cursor do mouse e ter uma ideia de como você interage com o dispositivo espelhado.
A instalação do macOS é direta com Homebrew . Como requisito, você precisa do ADB (Android Debug Bridge) instalado e funcionando. Além disso, você deve ativar a depuração USB em seu dispositivo Android.
$ brew install scrcpy $ brew install--cask android-platform-tools [1] install adb
Para que o scrcpy funcione com um aplicativo React Native em execução no seu dispositivo, você precisa estabelecer um proxy reverso com adb reverse .
$ adb reverse tcp: 8081 tcp: 8081
Quicktime para espelhamento de tela
Ao conectar seu dispositivo iOS via cabo USB ao Mac, você pode aproveitar o QuickTime Player para espelhar a tela do seu dispositivo. Primeiro, você precisa confiar no seu Mac conectado, depois abrir o QuickTime Player e iniciar uma nova gravação de filme ( ⌥ ⌘ N ). Ao lado do botão vermelho de gravação, abra o menu suspenso e selecione o dispositivo conectado na entrada da câmera. É isso.
A captura de tela abaixo mostra como espelhei meu aplicativo Expo do meu iPhone conectado via cabo USB ao meu MacBook.
Inspecionando o tráfego de rede com Proxyman
O Proxyman é uma ferramenta de proxy exclusiva para macOS para interceptar, visualizar, depurar e reescrever o tráfego de rede HTTP (S) de aplicativos iOS e Android.
Usando com o aplicativo Expo em execução no simulador iOS e em um dispositivo iOS
Para inspecionar mensagens HTTPS criptografadas, você deve instalar o certificado CA do Proxyman em sua máquina. Em seguida, basta abrir a caixa de diálogo do certificado selecionando Certificado > Instalar certificado neste Mac… no menu principal. Clique no botão instalar na guia Automático .
Este é um pré-requisito para usar o Proxyman com simuladores e dispositivos iOS.
Configure o simulador iOS
Você precisará realizar uma configuração única para instalar e confiar nos certificados em todos os simuladores iOS. Portanto, selecione a caixa de diálogo de configuração no menu principal selecionando Certificado > Instalar certificado no iOS > Simuladores… . Clique nos botões das etapas 2 e 3 e pronto.
O que eu realmente admiro é a usabilidade dessa ferramenta, especialmente as listas de verificação interativas muito úteis para os diferentes cenários.
Configurar dispositivos iOS
Esta etapa é semelhante, mas precisa de um pequeno trabalho adicional no dispositivo real. Você precisa conectar seu dispositivo iOS ao Mac via cabo USB. Certifique-se de que apareça no aplicativo Finder antes de prosseguir. Em seguida, abra a caixa de diálogo do certificado no menu principal ( Certificado > Instalar certificado no iOS > Dispositivos físicos… ).
Faça apenas o que a caixa de diálogo pede que você faça. Proxyman usa a porta 9090.
Visualize o tráfego da rede
Agora você pode começar a ver o tráfego da rede. Abra o pacote Metro do seu aplicativo Expo e pressione i para um simulador ou escaneie o código QR com o aplicativo da câmera no seu dispositivo iOS conectado por cabo USB.
Você deve ver o tráfego de rede do aplicativo, que invoca uma solicitação GET toda vez que você recarrega do menu de desenvolvimento Expo pressionando d no simulador iOS ou agitando seu dispositivo iOS.
Para inspecionar o corpo da resposta, você precisa habilitar o proxy SSL clicando no botão Habilitar todos os domínios da “Expo” . A captura de tela a seguir mostra a resposta inspecionada enviada pelo servidor após invocar uma chamada GET do simulador iOS.
Deactivate caching
In the example request, the server answers with a 304 status code because the response has already been cached by the client. To change this behavior and get a 200 status code with the movie content, you can deactivate caching via Tools > No Caching.
Stub network calls
In order to play out different use cases, it is useful to fake network calls by creating stubs. In this example, we’d like to change the response body to consist of one movie instead of four.
Proxyman provides different options for that. Load a local JSON file as a stub with the Map Local Tool whenever the route matches the concrete URL https://reactnative.de/movies.json. This is the file you want to load:
//stub.json
{ "title":"The Basics-Networking", "description":"Your app fetched this from a remote endpoint!", "movies": [ { "id":"1899", "title":"Dumb and Dumber", "releaseYear":"1994" } ]
}
You can define multiple stubs and enable or disable them as you like.
Whenever you press ⌘ r in the Expo CLI, a new request is invoked and the content of the JSON file is returned instead of the original server response.
Breakpoints
The concept of Breakpoints is a powerful tool to debug the correct behavior between your app and the server. The following example shows an example breakpoint for the concrete URL https://reactnative.de/movies.json.
With that in place, every time this rule is matched, the network call is paused. As you can see in the next screenshot, you then have the ability to manually define the response body. In this case, you’d change the response body to consist only of one movie. By the way, you can see that the loading logic works correctly because the user sees the loading label during the loading process.
Using Proxyman with Android
To use Proxyman with Android, you need to override the security settings in Android Studio, as explained in the official documentation.
The nice thing with Proxyman is the interactive documentation. To use it with Android, select Certificate Menu > Install Certificate on Android > Emulator… from the main menu. In the opening dialog, you get the code to use as a security setting to enable SSL proxying.
Because we have Expo’s managed workflow, we do not have the chance to insert the above provided config code. That’s why we have SSL handshake problems and cannot see the response body.
In order to change this, you need to eject from the managed workflow. If you want to stick to this workflow, you just can eject for the debugging session and revert your Git changes after that.
In my current work project, we are developing on a hybrid approach that consists of a natively developed framework with components partly written in React Native. The above security configuration is defined for non-production builds.
I have refrained from this in this article. I describe how to debug network calls for Android with the next tool.
Inspecting network traffic with HTTP Toolkit
HTTP Toolkit is a nice looking and intuitive tool to intercept, view, and debug HTTP(S) endpoints. You can stub requests and responses to rewrite or redirect your app’s network traffic with your server, or inject errors. It’s available for macOS, Windows, and Linux.
During the preparation of this article, HTTP Toolkit has been the tool working best out of the box — no configuration was necessary. The only restriction is that, at the time of writing, it doesn’t support iOS.
Using HTTP Toolkit with an Expo app running in Android Emulator
The first step is to open up an Android emulator from Android Studio. Next, start the Metro bundler of your Expo app. Press a to launch the React Native app in the emulator.
I experienced more problems with Android emulators than with iOS simulators. If you cannot get the Expo app running, the easiest way is to remove the Android emulator and create it again from the Android Virtual Device Manager.
Next, start HTTP Toolkit and click on the option Android device connected via ADB within the Intercept section.
A dialog should pop up on your emulator to establish a VPN connection. Click on OK.
If everything worked out right, then you should see a success message.
View network traffic
Now you should be up and running. As a first step, switch to the View section in order to monitor the network traffic of your Expo app with the server. In this case, you’re interested in the reactnative.dev endpoint, which you can filter for in the lower part of the UI.
As you can see, without any intervention, the response body of the GET call is decrypted.
During the preparation of this article, I could reliably use HTTP Toolkit to view HTTPS messages with the managed Expo project.
Rewrite network calls
You can define rewrite rules in the Mock. Create a rule to intercept every GET request with the URL https://reactnative.dev/movies.json and create a custom response.
After reloading the app, you can see that the GET request (status code 304) has been paused, and you’ll have a chance to change the response body. While the response is paused, you can debug your app and check whether the loading state is working correct. Change the response to contain only one movie and a status code of 200.
After a click on the Resume button, the app only shows one movie due to the fact that the mocked network call returned with status code 200 and the custom JSON object.
Inspecting network traffic with Charles Proxy
Charles Proxy is a widely used local proxy tool. It’s available for macOS, Windows, and Linux, and it supports iOS and Android. In this article, I describe how to set it up with iOS and skip the Android part since I describe another option with HTTP Toolkit for Android inspection later in this article.
View SSL-encrypted content
You can use Charles Proxy to intercept, view, and manipulate HTTPS contents. This includes requests, responses, and the HTTP headers. It is especially useful for monitoring your React Native app’s network traffic in the simulator/emulator and on your connected physical device as well.
In my current project, it has allowed me to debug error handling due to server errors. As an example, you can block entire requests to force an error condition.
Charles Proxy is not exclusive for React Native development. There exist many installation guides. Here, I’ll describe how to set it up on a Mac for an Expo project.
After downloading and installing Charles Proxy, you have to grant privileges.
Open up Charles Proxy and you’ll see network traffic popping up in the sequence view. Open this in the browser and filter for jsonplaceholder.typicode.com. Click on the entry and select Contents and Raw. As you can see from the next screenshot, the network content cannot be displayed correctly because it is SSL-encrypted.
To change this, you have to open the Proxy Settings (Proxy > Proxy Settings…, or ⇧⌘L) and add an entry to the SSL entry section.
In this example, I only set it up for jsonplaceholder.typicode.com (host jsonplaceholder.typicode.com and port *), but you can also define host * and port *. After ticking the checkbox, reload your page and click on the new entry again.
In Chrome, you’ll get a warning that your connection is not private. You need to proceed.
Reload your browser page again, click again on the request, and you can see the content unencrypted.
Using with the Expo app running in iOS simulators
Right now, if you run your React Native app in the iOS simulator, Charles Proxy does not show the network traffic. We need to install Charles root certificates.
Install the certificate for iOS simulators (Help > SSL Proxying > Install Charles Root Certificate in iOS Simulators). Make sure the macOS proxy is selected as well (Proxy > MacOS proxy) and the certificate is trusted in the iOS simulator (Settings app > General > About > Certificate Trust Settings > Activate Charles Proxy CA).
Block requests
For debugging error scenarios, it might be useful to add requests to a block list (right-click on Request > Block list).
In the simple example project, I have blocked the reactnative.dev GET call. As you can see from the screenshot, it showed that such errors are not handled correctly and the user has to make do with a blank page.
More debugging features
Charles Proxy is pretty powerful. There are many more features (rewriting network calls with map local/remote, breakpoints, or deactivating caching) that I skipped here because I have already showed it in the Proxyman section. It can also be used for debugging Android apps. As with Proxyman, you need to eject from the managed Expo workflow to establish the right security configuration.
Conclusion
There are powerful tools available to React Native developers that extend the shipped dev tools for inspecting and even rewriting network traffic. This is useful for debugging complex client-to-server interactions. This article gives an overview of proxy tools, and there are quite a few choices available — I haven’t even looked at Fiddler yet.
Using proxy tools for iOS development is much easier to configure and less error-prone. In contrast, I had to delete and recreate Android emulators a lot during the preparation of this article. For full-fledged Android debugging, you might not be able to use Expo’s managed workflow because you may need to override Android’s security settings in Android Studio.
From my experience, this is a required step for Proxyman and Charles. With HTTP Toolkit, however, I could view SSL-encrypted network calls out of the box without any extra configuration or ejection from Expo’s managed workflow.
But even if you have to eject from Expo’s workflow, then there’s a solution even for this use case. Revert your Git changes after your debug session is done, and you can continue with your development approach of choice. One last word: make sure you do not use the proxy setup for your production builds.
The post How to debug encrypted network traffic in React Native appeared first on LogRocket Blog.
