react-simple-img: Unhandled promise rejection error

This library is throwing unhandled promise rejection errors - I suspect possibly here when image loading fails: https://github.com/bluebill1049/react-simple-img/blob/4599a9b5e6d735749fa85169aa7d31d1579e6054/src/utils/fetchImage.js#L4

Unhandled promise rejection 
error

bubbles: false

cancelBubble: false

cancelable: false

composed: false

currentTarget: null

defaultPrevented: false

eventPhase: 0

explicitOriginalTarget: <img src="">

isTrusted: true

originalTarget: <img src="">

srcElement: <img src="">

target: <img src="">

timeStamp: 30636

type: "error"

<prototype>: EventPrototype { composedPath: composedPath(), stopPropagation: stopPropagation(), stopImmediatePropagation: stopImmediatePropagation(), … }
es6.promise.js:110
onUnhandled/</result<
es6.promise.js:110
module.exports
_perform.js:3:12
onUnhandled/<
es6.promise.js:104
module.exports
_invoke.js:5
<anonymous>
_task.js:35
run
_task.js:21
listener
_task.js:25

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (11 by maintainers)

Most upvoted comments

@dima-f1 sorry just saw this message, thanks for trying out this component. i will fix that in the next patch. it’s definitely production ready, many websites already use this component in prod. just so you aware that error will occur due to image not load or user navigate away, but i am going to make an option to silence it. let me know what you thoughts.

https://github.com/bluebill1049/react-simple-img/releases/tag/2.1.5 also please contribute if you have good suggestion or idea.

thanks

bluebill1049 on Mar 24, 2019

hi @davidfurlong,

i have reproduced the error in production, this will happen when routes change and images not finished loading. in terms of empty error message, i haven’t seem that before. (srcSet is not required.)

how many of those empty errors do you get in prod? how often does that happens. if it’s due to route change then it’s fine, i will take a look in the meantime.

bluebill1049 on Nov 9, 2018

Hey Bill, sorry for the delay. The error is now logged into the console, which is not ideal for production apps either. My main issue is that is seems to occur when the load hasn’t failed, and the error is empty. An example:

💩 Fetch image failed with target

<img class="card-img-top card_image" alt="sfdsdfsd" src="https://deedmob-dev-images.s3.eu-west-1.amazonaws.com/job_1_1541549476091%40300x168" srcset="" data-src="https://deedmob-dev-images.s3.eu-west-1.amazonaws.com/job_1_1541549476091%40300x168" style="visibility: visible;" width="250" height="140">

and error message {}

This is happening on almost all of our image loads. Looks like it may be an empty src. However we still have some images which have a valid src but srcSet is undefined and it’s erroring

davidfurlong on Nov 9, 2018

Right so I think that’s the issue I’m experiencing. I’m not sure throwing an error on image fetch fail is the best practice, as its not really possible for me to catch the error implementing the library. Perhaps there should be a prop onFetchFailed or something so the implementer can manually retry, show a placeholder or handle it themselves

On Wed, Oct 3, 2018 at 3:05 AM Bill notifications@github.com wrote:

right now if the image fetch failed will throw an Error, i am thinking of changing it into console.error

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bluebill1049/react-simple-img/issues/30#issuecomment-426479770, or mute the thread https://github.com/notifications/unsubscribe-auth/AAlhcDqhhJgnwtdPESFuXhhu7R4JW7_tks5uhA0-gaJpZM4XAanV .

davidfurlong on Oct 3, 2018

Unfortunately I dont think this has fixed the problem. I’m getting a

Unhandled promise rejection Error: "💩 Fetch image failed with target <img
class="card-img-top card_image" alt="Sailing on IJsselmeer and Wad and
being a volunteer? That's possible at SailWise" src="
https://deedmob-prod.imgix.net/job_3044089_1520252877899%40300x168?auto=format&amp;w=250&amp;h=140&amp;fit=crop&amp;blur=60&amp;q=10"
srcset="" data-src="
https://deedmob-prod.imgix.net/job_3044089_1520252877899%40300x168?auto=format&amp;w=250&amp;h=140&amp;fit=crop"
data-srcset="
https://deedmob-prod.imgix.net/job_3044089_1520252877899%40300x168?auto=format&amp;w=250&amp;h=140&amp;fit=crop
1x,
https://deedmob-prod.imgix.net/job_3044089_1520252877899%40300x168?auto=format&amp;w=250&amp;h=140&amp;fit=crop&amp;q=45&amp;dpr=2
2x,
https://deedmob-prod.imgix.net/job_3044089_1520252877899%40300x168?auto=format&amp;w=250&amp;h=140&amp;fit=crop&amp;q=30&amp;dpr=3
3x" width="250" height="140"> and error message { "isTrusted": true }"

On Tue, Oct 2, 2018 at 1:16 PM Bill notifications@github.com wrote:

This should be resolved by the latest patch

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bluebill1049/react-simple-img/issues/30#issuecomment-426236425, or mute the thread https://github.com/notifications/unsubscribe-auth/AAlhcL1yZeRrgC2nUVdHvIT2ClEDzLxBks5ug0r6gaJpZM4XAanV .

davidfurlong on Oct 2, 2018