React Native Image how to use onError

Question

Hi I'm currently trying to load several network images and they often fail to load on android. I'm trying to use onError to diagnose why but can't seem to get it to work.

I've tried using it as

onError={(e) => console.log(e}

and

onError(error){
  console.log(error)
}

onError={ this.onError.bind(this) }

but both of these result in this object

Proxy [[Handler]]: Object [[Target]]: SyntheticEvent [[IsRevoked]]: false

which, as best as I can tell, is the error event and doesn't contain anything useful.

My question is how do I use onError to diagnose why my network images are failing? but if you have any ideas about why I'll gladly take those too.

Solution

This is an SyntheticEvent, as specified in the Image doc here, you can try following code

onError=({ nativeEvent: {error} }) => console.log(error)

Hope this will help.

Comments

[tjkind]

Thanks for your help, I did not realise that was what the docs were saying. It's no longer giving me the object but the error is just 'undefined' and it looks like the native event is an empty object

[Prasun]

Hi @tjkind, my bad, I had put extra bracket, I have edited the answers, earlier it was {{ nativeEvent: {error} }}, but correct one is { nativeEvent: {error} }, please try agin, it should work. Sorry for the extra bracket.

[tjkind]

I did actually catch that. I'm currently using this onError={(e) => console.log(e.nativeEvent.error)} and it prints out undefined. But I've been told to move on so ¯_(ツ)_/¯

[Noitidart]

nativeEvent is an empty object for me also. Are you sure this works for your Prasun?

[Prasun]

Yes, I was able to catch error using the said approach, take a look at this stackoverflow.com/questions/47254383/…. BTW which version of RN you are using?

[Prasun]

I just tested using the code <Image onError={({ nativeEvent: {error} }) => console.log(error) } style={{height: 200, width: 200}} source={{uri:'https://randomuser.me/api/portraits/women/2ww.‌​jpg'}}/> in RN-52, I was able to see the error log.

[tjkind]

After several months of casual experimentation I've found that if the error is on ios there is an error message (sometimes not a useful one) but that on android it's always an empty object