Image onError logs undefined on Android

[connorwaslo]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

Environment

OS: Windows 10
Node: 8.2.1
Yarn: 1.3.2
npm: 5.8.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.1.0.0 AI-173.4670197

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.0 => 0.55.0

Steps to Reproduce

<ImageBackground style={{ flex: 1 }}
                             resizeMode='stretch'
                             onError={({ nativeEvent: {error} }) => console.log('Error:', error) }
                             source={require('../../res/images/img.png')}>
    {/* Children */}
</ImageBackground>

Expected Behavior

Logging error variable should print the reason that the Image is not being loaded.

Actual Behavior

error is undefined.

[react-native-bot]

Thanks for posting this! It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

Thank you for your contributions.

[maxhawkins]

I am also experiencing this issue.

react: 16.3.1 => 16.3.1
react-native: 0.55.3 => 0.55.3

My steps to reproduce are a little simpler.

<Image
  onError={ ({ nativeEvent: {error} }) => console.warn(error) }
  source={{ uri: imageUrl }} />

imageUrl is a path in the application cache directory. It points to an image from the camera that was processed by an image crop tool.

I verified that the image exists at imageUrl using RNFetchBlob.fs.stat. I pulled the image to my computer and was able to open it.

I expected an error to be passed to onError. Instead, error is undefined.

[maxhawkins]

I fixed my issue. I needed to prepend the path with file:// on Android.

Frustrating no error is passed to onError on Android!

[tad-lispy]

I am also affected by this. In my case I am loading many (thousands) images in a FlatList. On Android some of them are not loaded and onError callback is being called, but the argument to it doesn't seem to contain any useful information (just as OP described error.nativeEvent.error === undefined. So I'm left to trial and error and guesswork to understand the reason.

Perhaps it's related to #7440

For reference, also reported here: https://stackoverflow.com/questions/49136720/react-native-image-how-to-use-onerror#comment85402686_49137662

In my particular case I suspect it's some kind of memory or other resource related problem, as same images are loaded if I limit the total number of images. IOS doesn't seem to be affected, perhaps due to a better performance.

[edo1493]

Same

[vitorebatista]

Same here...

[FibreFoX]

This got already posted but closed as resolved, which is wrong:
#7440

I got in the same situation and found that old issue. Using the workaround by using https://www.npmjs.com/package/react-native-android-image-polyfill helped a bit, but this should be done inside RN-core itself IMHO.

[Jyrno42]

Same issue here, but I cannot use the workaround due to Image.prefetch having no support for headers :(

Would love to work on this if I could just figure out where to start...

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[Jyrno42]

not stale