React: Clean up function can’t catch error properly?

I am trying to abort a fetch in a useEffect clean up function but it seems that, even if the error is catch in the code and logging the ‘Error catching’, there is still a default js error triggering somewhere …

Simple code to test:

useEffect(() => {
    const url = "https://swapi.dev/api/films/1/";
    const controller = new AbortController()
    fetch(
        url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
            signal: controller.signal,
        }
    ).then(function(response) {
        response.json().then(function(data) {
            console.log('Success', data)
        }).catch(function(error) {
            console.log('Json error', url)
        })
    }).catch(function(error) {
        console.log('Error catching', url)
    })

    return () => {
        console.log("Cleanup")
        controller.abort()
    }
}, [])

Output:
output screen

I tried to replace then/catch by try/catch but I think I am using it correctly and anyways it didn’t change anything.

I expect the error to be catch in the function AND not triggering the default behavior for js error (console.error).

Thanks for any solution, I already tested a lot of different things and I still can’t understand what is happening.