Academy
mediumEngineering Practices#79

Flipper network inspector

Prompt

Network inspection tooling has churned: Flipper is deprecated, and React Native DevTools now ships a Network panel. But a logging fetch wrapper is still the portable answer — it works in every environment and feeds your own telemetry.

Write fetchWithLogging(url, options, fetchImpl = fetch) that logs the method and URL before the request and the response status after, then returns the response. Inject fetchImpl so it's testable.

Solution

function fetchWithLogging(url, options = {}, fetchImpl = fetch) {
  const method = options.method || 'GET'
  console.log(`[Network] ${method} ${url}`)
  return fetchImpl(url, options).then(response => {
    console.log(`[Network] ${method} ${url} -> ${response.status}`)
    return response
  })
}
Mentor's take

The network boundary is where mobile apps actually fail — flaky radios, misconfigured backends, auth expiry — so instrumenting it is observability, not debugging vanity. Tooling context first, because it dates candidates: Flipper is deprecated; interactive inspection now lives in React Native DevTools' Network panel (or a proxy like Charles/mitmproxy when you need to see traffic below JS). The wrapper pattern survives all tooling churn because it's yours: the same seam that logs in development feeds timing spans to Sentry or your analytics in production.

Three mechanics carry the design. Logging before and after gives you the request that never came back — the before-line with no after-line is the hung request a single completion log can never show you. Returning the response keeps the wrapper transparent: callers chain .json() exactly as if it were bare fetch. And injecting fetchImpl as a parameter is the same testability move as injecting clocks or randomness — the tests below pass a fake and assert the contract without touching the network.

Red flag: reading the body inside the logger. response.json() consumes the body stream — the caller then gets "Body already read". If you must log payloads, response.clone() first, and keep payload logging out of release builds: bodies are where PII lives.

Say it: "I instrument the fetch boundary with a transparent wrapper — log before and after, return the response untouched, inject the fetch implementation so the contract is testable without a network."