Amazon S3 throwing Error 500 on "random" Images, so not all of my pics appear

Live site: http://137.184.106.209/vehicle_list3_dayof?ev=HR&make=&model=

This screen SHOULD show 10 thumbnails.
They are “generated” by the S3 “fit-in” Cloud Formation/Lambda directive.
But I’d bet you won’t get all 10 images.
Some thumbs will be missing/broken links due to an Error 500 (see Chrome Inspector)

If you COPY that URL (from the 500) you can paste it in a new tab and you’ll get a thumbnail. No error. Refresh the page and it prolly still won’t show.

Try one of the other events (from the pulldown) and you’ll get many missing images, all due to http error 500.

If you click on any record, you’ll see additional images generated for 300x300 size. These work fine. And there’s a Lightbox that shows bigger images (although there is some bug and images repeat - I think due to the fact that there’s ALSO a lightbox on the OffCanvas page, but I’m using different group names, but I still think thats the issue.)

My biggest issue is with these main thumbs.

Thx and Happy Monday!

Everything loaded on first attempt for me:

Windows 10, MS Edge, InPrivate tab.

Works fine for me too, tried a few refreshes without cache:

Maybe check more details about this 500 error in your dev tools.

‘Rendezvous’ also worked for me. However, there were problems with the others - in particular, ‘Open Car Show’:

I see this error in the response:

So maybe check:

https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-custom-object-caching/#:~:text=If%20the%20X-Cache%20header%20is%20"Miss%20from%20cloudfront%2C,to%20not%20cache%20the%20response.

From all my testing, I just think Rendezvous works because it’s a small group.
But more requests from the other events shows the error 500s.
I didn’t configure “custom “ caching. Am on default settings but can’t check all that as I’m on iPad right now in bed.
Hoping @Dave can shed light as he has S3 exp.

Don’t skip this step!

Yep, that’s the issue. (Didn’t post this in Bugs section because it’s not a Wappler bug. not saying that.)

Update:

  1. Bucket too new to have any logging details in S3
  2. But I noticed items were encrypted. Which doesn’t make sense in a public bucket, so I selected the items in S3 bucket management, and changed to un-encrypted about an hour ago. No noticeable improvement immediately afterward.
  3. I now get 100% images in Chrome on new Macbook Pro.
  4. But in Safari, about 20 missing thumbs on “Open” event.
  5. 5 mins ago, Safari couldn’t show the Austin-Healey Frogeye thumb. But chrome would show it. Now its there. Side by side reloads. Error 500 on Safari.
  6. Tried “hard” reloads on both browsers. Didn’t improve results.

I think its related to a network issue in S3… or more a propagation issue across servers.
because now 15 mins after I started testing on Macbook, I’m down to only 10 missing Safari images. Very odd.

EDIT: Now, 1 hour later Safari shows all images without errors.

Sorry @Robert_LM have only just seen the tagging. Did you resolve the issue?

Can you tell me? If you go to the link and pull up each of the three events, do you see all of the thumbnails?

Rendezvous:

Concours:

Open Car Show:

Everything appears fine, all images are displayed.

Dave, there’s something I don’t understand about S3… haven’t fully cracked the code.
In your last pic, the 4th image is missing.
Did you scroll all the way thru that list? I bet more were missing.

I changed the thumb size I was wanting a few hours ago and now I have very few images on Safari even tho all the images show on Chrome.
Part of me thinks its rebuilding them, or it waits until they’re required and builds them - yet its failing and returning err500… but that really doesn’t make sense.
Because on Chrome I can Force Reload and see the MB transfer for ALL the thumbs.
Yet on Safari (both Phone and Desktop) I can clear and “Reload from Origin” and get only about 10% of the thumbs.

Maybe I need to find the Purge command to force a reload on cloudfront.

Very weird. I’m not at all sure what is happening. We use a Cloud Formation script to allow us to resize images on the fly, but have not implemented the script you are using. Seems when an image is clicked all the thumbs for the selected vehicle display just fine, is this using the same script to do so? Almost as if it needs a slight delay to load everything before displaying… Will try to look in to it a bit more later Robert.

thx
I’m using that same cloud script, with all the defaults, and followed that video.
(except somewhere I changed my bucket to be unencrypted because I thought that might contribute to the issue)
today, all 120px thumbs show fine ON CHROME, but on my ipad many are missing.
and safari below:
An image of my safari browser left over from yesterday:

And after a “reload from origin” just now, a few more images popped in:


This missing images still showing err500:
image
ImageLink

I see Lazy load is included in the page, have you tried without it? Not sure it will make a difference though… Worth a shot.

The error is returned from the server, not from the components used on the page:

also, if you’re referring to these lines in the source:
<sc_ript src="/dmxAppConnect/dmxLazyLoad/dmxLazyLoad.js" defer="">
<sc_ript src="/dmxAppConnect/dmxLazyLoad/lazysizes.min.js" defer="">

Those are orphans.
Loading on the Thumb is Eager.

Same as the “swiper” lines. I removed the swiper yet it left the references to the scripts.

EDIT:
check that,
those came from my main.eps page.

What are the exclamation marks for?

131**!!**Shelby-2.jpg

delimiter. between my unique ID for the vehicle and the filename
can be anything.