CP hangs when using the asset field (sometimes)

Bug description

We have been getting an occasional issue on the control panel while uploading content to a new site where the control panel will just hang on the loading bar as shown below:

https://youtu.be/nwOplVv7prY

This appears to lead on to the following error on Chrome (reported by our clients team):

And this on Safari:

This happens when selecting an image through the asset field. No errors are thrown in the backend logs, or in the browser logs from looking.

The team have also reported an issue when uploading images that it can become duplicated, but I'm not sure if this is at all connected, they have sent me a screenshot of one which became duplicated but can't be deleted:

How to reproduce

Unable to consistantly reproduce, but the client has provided the following video showing the steps they take to upload and select an asset: https://youtu.be/sD7vl1bMLwg (I'm not sure why they are uploading in a separate tab).

Images are stored on S3 not locally.

Logs

No response

Environment

Environment
Application Name: Pelorus
Laravel Version: 10.39.0
PHP Version: 8.2.12
Composer Version: 2.6.6
Environment: production
Debug Mode: OFF
URL: pelorus-travel.strattons.com/
Maintenance Mode: OFF

Cache
Config: CACHED
Events: NOT CACHED
Routes: CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: redis
Database: mysql
Logs: stack / single
Mail: smtp
Queue: redis
Session: redis

Statamic
Addons: 6
Antlers: runtime
Stache Watcher: Enabled
Static Caching: Disabled
Version: 4.42.0 PRO

Statamic Addons
doefom/currency-fieldtype: 1.2.3
gerttimmerman/statamic-zapier: 1.5
jacksleight/statamic-bard-texstyle: 3.1.4
ndx/statamic-bard-color-picker: 1.2.0
ryanmitchell/statamic-translation-manager: 1.2.2
withcandour/aardvark-seo: 3.0.0

Installation

Fresh statamic/statamic site via CLI

Antlers Parser

Runtime (default)

Additional details

Please let me know if there is any more info I can collect from the server or browser that would be helpful in solving this, it's causing a lot of problems with the client having to re-do work when they have to reload the page.

I also ran into this issue today and found the cause.

Ultimately, you have one or more corrupt images uploaded to the asset manager.

When you open the asset manager/viewer containing one or more corrupt (partially uploaded?) images, it will try to generate the thumbnail as it can not find a cached version. This will cause PHP/GD to hang and lock your session. This only happens when you navigate to a folder or search/filter for media that contains a corrupt image.

After this, when you select any image, your PHP session has already been locked by the thumbnail generation, causing the page to hang with a progress bar.

In my case of running nginx, I got a 502 timeout after 60 seconds.

How to fix.

php please assets:generate-presets

This will regenerate all the image sizes and cp thumbnail images. After this is done, instead of trying to generate a thumbnail and locking your session on corrupt images, you will now see broken images, which will help you identify which are corrupt (as seen below).

My understanding is that generating the image sizes via the command line generates a blank cache file when it hits a corrupt image. The media manager/viewer then tries to load this blank file instead of generating the thumbnail on the fly.

I hope this helps you and anyone else who finds this via Google like I did.

statamic / cms