search

craftcms / cms

Build bespoke content experiences with Craft.
https://craftcms.com
Other
3.23k stars 630 forks source link

Browser hangs while Assets are loading #2547

Open heymarkreeves opened 6 years ago

heymarkreeves commented 6 years ago

Description

Yesterday I uploaded upwards of 1GB of images to an S3 bucket, spanning 17 subdirectories. I then indexed them in Craft. That all went fine.

When I navigate to Assets in the CP and click on some of the subdirectory names, some have thumbnails cached on the web server and load quickly. Others do not, and when I click into those, the spinner fires up.

At this point I'm just waiting, and I can't navigate anywhere else using the current browser. Clicking on another subfolder name doesn't do anything, nor does clicking on another link in the CP. It's just spinning in the current subfolder view. If I open a new tab in the same browser and try to visit /admin, that doesn't respond either. There's no error—it just spins.

This is a localhost server on MAMP Pro, and I assumed the server was just busy generating all those images. BUT if I open another browser—say Chrome's spinning and I switch to Safari—I can get right into the CP; the server is responsive. Once I try visiting those subfolders without thumbnails there, though, the same thing happens. I get stuck in one without thumbnails.

For the sake of it, I then switched to Firefox. Same thing: I can get right in to the CP while the other two browsers are hung.

At one point I did see a "Waiting for socket" status in Chrome when trying to hit the CP again in a new tab.

There seems to be the underlying performance issue in the browser, but also the fact that a "normal" admin user is going to be lost in this scenario. The site's still responding—to other users or browsers—but without switching browsers, they can't get back into the CP.

Steps to reproduce

  1. Index a large number of new files across subdirectories.
  2. Try visiting one of those folders in the CP under Assets, where thumbnails have not yet been generated.

Additional info

heymarkreeves commented 6 years ago

Update: After about 10 minutes I still can't reach the CP in a new tab or window in Chrome, even after closing the others. Safari's still spinning. But if I navigate around the CP in Firefox—where I hadn't hit the Assets folders yet—everything works fine.

heymarkreeves commented 6 years ago

Chrome and Safari are still unresponsive at this point, even in a new window. Firefox can still hit the CP fine.

After quitting Safari and hitting the /admin URL, it loads fine.

heymarkreeves commented 6 years ago

And quitting Chrome and then visiting the CP works. Nothing worked in any browser that had hung while loading one of the Assets subfolders without quitting the browser.

sfdrummer commented 6 years ago

I'm getting the same kind of problem, just with a tiny amount of files. This seems to have happened after a recent update. I was getting the problem with MAMP Pro and Laravel Valet, not tested on my UAT server yet.

I'm dragging about 20K worth of small images onto an assets field, I get the progress bar and it takes ages to upload all those files, then my laptop fan wants a piece of the action.

sfdrummer commented 6 years ago

I found the answer to the issue I was having. My max_allowed_packet was set to about 4megs in my development environment. I increased it an everything is working fine now. Don't know if this helps anybody else.

angrybrad commented 6 years ago

@circa1977 does sfdrummer's solution solve it for you as well?

heymarkreeves commented 6 years ago

I don't see a max_allowed_packet configured in my environment. I'm not seeing that in php.ini. I wasn't under the impression that @sfdrummer's issue was the same as mine. I wasn't uploading assets through the CP. I had successfully synched assets prior. My issue was when I was viewing assets organized in subdirectories, where the server was still generating thumbnails for them. Once that view hung, I couldn't do anything else with the CP in that browser.

andris-sevcenko commented 6 years ago

@circa1977 Did you use the speed-index feature where the images are not downloaded during indexing?

heymarkreeves commented 6 years ago

@andris-sevcenko Are you referring to the "cache remote images" lightswitch? I did not toggle that on, no. There was nothing there that indicated what would be cached, and it states that it aids "transform generation," not thumbnails.

But again, my issue is not so much the thumbnails. It's that if the site is in a state where thumbnails of the images aren't cached, any user with access to the Control Panel will get locked out while browsing Assets subfolders. There's no error message there. I'm assuming if did toggle "cache remote images" and then at some point cleared all caches, the same thing would happen: The thumbnails would be regenerated as you were browsing the Assets subfolders, and you'd get a hung session in the Control Panel until you closed your browser.

As I was able to log in and use the Control Panel in another browser, this wasn't a server-side issue. Any browser session was fine until I went into those folders. From that point on, I couldn't use the CP in that browser—even in a new tab or window.

andris-sevcenko commented 6 years ago

Well, thumbnails also are transforms in a sense.

The issue is that if the source is not available from which to generate the thumbnail, it must be downloaded. Say you have 40 images in a folder that need thumbnails. You open that folder and your browser lines up those 40 requests. Maximum parallel connection count for the same domain is what, six, these days? Now, if the images are large-ish and download+resize takes 10 seconds, that means that means that after 10 seconds the browser finally sends the 7th request to the server. So this is why it takes a while.

I'm not arguing that it's not a problem - I fully agree that this is incredibly frustrating, however, what options are there? If there's 1GB worth of images on S3 and you want thumbnails, then that 1GB at some point needs to be downloaded to the server. At least for now. When #2077 happens, then that might not be necessary anymore.

This issue currently is a browser limitation, and I'm not entirely sure how to work around it.

heymarkreeves commented 6 years ago

Thanks, @andris-sevcenko, for the background. Sounds like there are two takeaways:

  1. There needs to be some sort of solution to either avoid this scenario or make it obvious to the "average" CP user.
  2. If I re-index the files with the caching option toggled, which I assume will take longer, that would serve as a preventative step?
andris-sevcenko commented 6 years ago

Option number two will take significantly longer, but the source files shall remain on the server (depending on the https://docs.craftcms.com/api/v3/craft-config-generalconfig.html#$maxCachedCloudImageSize-detail setting), so that would definitely serve as a preventative step.

echantigny commented 6 years ago

I'm having a similar issue to this, but everything is local.

I have a local folder with this in it: 16 178 files, 360 folders (2.5G worth of images).

I can index the whole thing but I can't see any of it in the CP Assets page or in an image field listing. It just never loads and tells me the page hang. They all load fine in the front-end of the site though. They were all assigned to products in Craft Commerce 2 with the Feed-me import plugin. I don't have any transforms set on them either.

Anything that could help me with this issue? This won't be usable until we can resolve the issue.

andris-sevcenko commented 6 years ago

@echantigny What Craft version are you using?

echantigny commented 6 years ago

@andris-sevcenko I am on 3.0.20. I had a conversation with Brandon and he explained to me that my main issue is the depth and width of my folder structure. I will try to flatten that out a bit, but it would be great to have a solid/real solution to this issue.

cmalven commented 5 years ago

I'm experiencing this same issue, and have experienced it many times on other sites.

andris-sevcenko commented 5 years ago

@cmalven it takes longer because the files have to be downloaded to generate the thumbnails at some point. You can re-index the asset Volume and make sure that you're enabling the "Cache remote images" option. That will download the images to your server and store a local copy according to your https://docs.craftcms.com/v3/config/config-settings.html#maxcachedcloudimagesize setting. That should speed up the creating of thumbnails.

JackKora commented 5 years ago

We are also experiencing this problem. Our ENTIRE site starts returning 504's when this happens. I gotta say that this is a CRITICAL problem. I mean Craft has one job to do - host the site and it fails at that.

We are running stock Craft 3.1 without any modifications or plugins.

Any idea when this will be fixed?

JackKora commented 5 years ago

@andris-sevcenko, reading your comments you say that it's a browser limitation. But the problem is that the entire Craft freezes up and our entire site is inaccessible when this happens. If that one page freezes / slows down - I get it.

But is there a way to fix this such that other pages load?

brandonkelly commented 5 years ago

@ykorabelnikov Sounds like your server’s max connections needs to be bumped up, try contacting your web host about that. Craft will only take up to 3 connections at a time to load element thumbnails.

JackKora commented 5 years ago

@brandonkelly, we tried that - bumped it to 10 but the same problem still happened. We are using nginx/php-fpm. We did see that only 3 requests to the server are made. However overall the entire server still froze up.

We're going to try this again in our staging env. We tried this in our local setup only for now.

Any further ideas are appreciated!

michalochman commented 5 years ago

@brandonkelly in our case it's not a matter of bumping up max connections, our server – nginx + php-fpm via fastcgi – is easily capable of handling more connections – I can see that by visiting php-fpm status page.

For more context, our assets are stored on AWS S3 and we use craftcms/aws-s3@1.2.5 plugin and craftcms/cms@3.1.34.2.

What I see is happening: 1) A request is made to actions/assets/thumb&uid=UID&width=WIDTH&height=HEIGHT&v=V (one is enough). 2) While the thumbnail is generated, any further requests to index.php file that runs Craft app seem locked for the session that initiated thumbnail generation. 3) Accessing Craft app using any of the following works without any issues – browser private mode, another browser, curl.

From the above reports, it is the closest to what @circa1977 describes. The issue is unrelated to the number of assets for which thumbnails need to be generated, it is sufficient that the thumbnail generation takes significant amount of time.

I am open for screen sharing session if you want to see it live.

arifje commented 5 years ago

Same issue here on Craft 3.3.6.

We've got multiple Volumes, with thousands of images and videos. We are storing all assets in an subfolder (/path-to-volume/owner.id/), so assets are linked to the entry.

As soon as I click on one of the volume folder to show the subfolders, the browser get locked my laptop is starting to make a lot of noise :-)

The website and CP are accessible in another browser. Server load is also normal.

Note: All assets are stored on remote server, accessible via a local NFS share.

brandonkelly commented 5 years ago

@skoften That’s actually a UI issue, not quite the same as what this thread is about. We have an idea on how to solve it here: #1629 . In the meantime, try to create a deeper folder structure, rather than wide. For example, maybe instead of {owner.id}, go with {owner.uid[0:2]}/{owner.id}, which will split them up into groups based on the first two characters of their UIDs.

arifje commented 5 years ago

Great, thanks for the tip.

If we make these changes; does this have any effect on old folders/paths? Is it gonna re-index automatically or do I have to do that manually?

brandonkelly commented 5 years ago

Nothing would change immediately, but if they were placed based on an Assets field with Restrict uploads to a single folder? ticked, then you can resave all the entries in the section via the ./craft resave/entries --section=<sectionHandle> terminal command.

leevigraham commented 4 years ago

go with {owner.uid[0:2]}/{owner.id}

@brandonkelly 🔥