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.

Prasun · Answer 1 · 2018-03-07T03:03:29.823

15

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.

edited Mar 07 '18 at 03:03

answered Mar 06 '18 at 18:28

Prasun

4,943
2
21
23

1

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 – tjkind Mar 06 '18 at 18:54
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. – Prasun Mar 07 '18 at 03:05
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 ¯\_(ツ)_/¯ – tjkind Mar 09 '18 at 17:14
`nativeEvent` is an empty object for me also. Are you sure this works for your Prasun? – Noitidart Apr 15 '18 at 06:57
Yes, I was able to catch error using the said approach, take a look at this https://stackoverflow.com/questions/47254383/https-image-not-rendering-in-react-native-image/47270670#47270670. BTW which version of RN you are using? – Prasun Apr 15 '18 at 07:05
1

I just tested using the code ` 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. – Prasun Apr 15 '18 at 07:18
1

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 – tjkind Jul 05 '18 at 23:36

score -1 · Answer 2 · answered Jan 01 '19 at 09:44

try this

 <Image
                    onError={(error) => {

                      const getCircularReplacer = () => {
                        const seen = new WeakSet();
                        return (key, value) => {
                          if (typeof value === "object" && value !== null) {
                            if (seen.has(value)) {
                              return;
                            }
                            seen.add(value);
                          }
                          return value;
                        };
                      };
                      console.log("this Images Error ")
                      console.log(JSON.stringify(error, getCircularReplacer()))

                    } 
                    }
                    />

React Native Image how to use onError

2 Answers2