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

Question

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

Please tell the solution for the issue.

Tanvi Agarwal
– Tanvi Agarwal

2020-09-05 18:06:00 +00:00
Commented Sep 5, 2020 at 18:06 — Tanvi Agarwal
– Tanvi Agarwal, Commented Sep 5, 2020 at 18:06
I posted my fix as an answer @TanviAgarwal -

Philipp Sumi
– Philipp Sumi

2020-09-07 07:51:08 +00:00
Commented Sep 7, 2020 at 7:51 — Philipp Sumi
– Philipp Sumi, Commented Sep 7, 2020 at 7:51

Philipp Sumi · Accepted Answer · 2020-06-23 11:43:29Z

1

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")

answered Jun 23, 2020 at 11:43

Philipp Sumi

1,00710 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hassan · Accepted Answer · 2023-02-27 17:26:59Z

Try adding a timeout to the config in axios

private axios: Axios;
private config: AxiosRequestConfig = {
    baseURL: 'http://192.168.10.18:8000/api',
    headers: {
        'Content-Type': 'application/json'
    },
    timeout: 5000
}
constructor() {
    this.axios = new Axios(this.config);
}

I had the same issue, axios request was crashing the application. No logs on the console or anything. Even tried resolving by the answer accepted but didn't work.

Logcat did help in understanding the issue that null was being passed in Double Data type in java. I thought maybe some animation was we were using was causing this issue, but looks like null is being passed via axios to some library like okhttp for HTTP request.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related