Fetch / Axios crashing hard in React Native (but only for certain URLs)

Viewed 1183

My app is crashing hard when doing certain API calls, and I narrowed it down to this point:

  • it's not an HTTP vs HTTPS thing
  • I eventually used two different mock APIs, and to my suprise, one worked, the other didn't. Both are basically the same, see snippet below
  • same behavior on both WIFI or cellular network
  • same issue in axios instead of fetch
  • the catch block is invoked with a nondescript network error, but then the app still crashes hard

Environment: Android 10 (actual device), RN 0.61.5

Both calls below just do a simple HTTP GET which results in a JSON snippet being returned. One works, the other causes a hard crash.

async foo() {
    try {

        // this endpoint CRASHES my app
        const r = await fetch("http://jsonplaceholder.typicode.com/todos/1");
        
        // this endpoint works just fine
        //const r = await fetch("http://echo.jsontest.com/key/value/one/two");

    } catch(e) {
        console.log("Invoked, but the app still crashes hard right after");
    }
}
1 Answers

Ok, I found a hint in Logcat - it appears that using OkHttp3 is causing some sort of versioning conflict that only manifests in one of the responses (maybe due to CORS headers, but that's pure, unfounded speculation ;).

My fix was to change my dependency on OkHttp3 in build.gradle from

implementation "com.squareup.okhttp3:okhttp:4.7.2"

to

api(platform("com.squareup.okhttp3:okhttp-bom:4.7.2"))
api("com.squareup.okhttp3:okhttp")
api("com.squareup.okhttp3:logging-interceptor")
Related