Using mitmproxy for better native-app traffic debugging

As I work more on the native app for Meet Kinksters, it’s been important to debug network traffic between it and various backend services.

Especially when building with Expo, there are a few options depending on your execution environment. When doing initial development with Expo Go, the React Native Debugger effectively runs your code inside of Chrome, and network requests can be traced there. (Beware, if your backend sets cookies, Chrome will store and use them!)

The Expo docs recommend Flipper for debugging a bare app, and it generally works well. However, I’ve found the network inspector’s layout to be a bit clunky and there are known bugs which result in annoying duplicate table entries. Also, if I’m testing on a physical device not connected via USB, only the React Native logs are available, anyway.

The Expo docs link to a tutorial on using mitmproxy, however it suggests installing a system-wide proxy on your phone which may be overkill. In my case, I mostly care about viewing traffic to my main app backend. (If I need a more global view of all my microservices, I can just use Flipper and the emulator.) This led me to running mitmproxy in reverse proxy mode, and simply adding it to my docker-compose project and pointing the app at that port.

services:
  mitmproxy:
    image: mitmproxy/mitmproxy
    environment:
      http_proxy: http://web:8080
    ports:
      - "127.0.0.1:8090:8081"
      - "${WEB_HOST_BASE}:8083:8080"
    command:
      - mitmweb
      - --web-host
      - 0.0.0.0
      - --mode
      - reverse:http://web:8080
      - --set
      - keep_host_header=true

The web UI will be available at http://localhost:8090 in this example.

The keep_host_header setting is important if your app generates URLs based on the current request (and makes mitmproxy act more like a production reverse proxy in that regard.) I don’t believe it sets headers such as x-forwarded-for out of the box, however.

Nothing revolutionary here, but maybe this will give you an additional option to consider when developing your own app.