Screenshots are disappearing from Github imported sandboxes

[igordanchenko]

🐛 bug report

Preflight Checklist

• [X] I have read the Contributing Guidelines for this project.
• [X] I agree to follow the Code of Conduct that this project adheres to.
• [X] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

Several days ago I noticed 2 of my Github imported sandboxes lost their screenshots, and today another 2 sandboxes got their screenshots replaced with a default banner.

Pinging https://codesandbox.io/api/v1/sandboxes//screenshot.png to re-generate screenshots no longer seems to work.

To Reproduce

Visit one of the following pages.

• https://codesandbox.io/examples/package/react-photo-album
• https://codesandbox.io/search?query=react%20photo%20album&page=1&configure%5BhitsPerPage%5D=12&refinementList%5Btags%5D%5B0%5D=react%20photo%20album

Link to sandbox: link

Your Environment

Software	Name/Version
Сodesandbox	5ikre
Browser	Safari / Chrome
Operating System	macOS

[JamesACS]

Thanks for raising this @igordanchenko - we're aware of a few issues with how CodeSandbox generates screenshots at the moment and are working on a fix!

[andrasbacsai]

Hey @igordanchenko,

We fixed our screenshot service, it should work now as expected!

[igordanchenko]

Thanks!

Is there a way to re-generate a screenshot in case the system captured an incorrect one? For instance, the following screenshot captured black "installing dependencies" screen - https://codesandbox.io/api/v1/sandboxes/81r48/screenshot.png

The previously suggested endpoint https://codesandbox.io/api/v1/sandboxes//screenshot.png to longer seems to work.

[JamesACS]

One of our team has suggested that making a GET to codesandbox.io//api/v1/sandboxes/:sandbox_id/screenshot.png should regenerate it, where :shortid is the 5-6 character random id for your sandbox. The easiest way to find it is to open the sandbox, and the preview will have shortid.csb.app as the url.

[igordanchenko]

Unfortunately I'm not seeing any effect after making a call to that endpoint.

curl -sSD - https://codesandbox.io/api/v1/sandboxes/81r48/screenshot.png -o /dev/null

HTTP/2 302 
date: Thu, 17 Feb 2022 15:29:25 GMT
content-type: text/html; charset=utf-8
location: https://screenshots.codesandbox.io/81r48/21.png
cache-control: private, max-age=0, no-cache, no-store
x-request-id: FtScbz5ZvHY2M-EwaRDB
via: 1.1 google
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400
cf-cache-status: MISS
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server: cloudflare
cf-ray: 6df00d15fc821774-EWR

It does redirect to the current screenshot, but never updates it.

[JamesACS]

Hm, you may have to make an edit to the Sandbox first?

[igordanchenko]

Huh, that did the trick, thank you. I guess this approach is perfectly fine for hosted sandboxes, however it's a little cumbersome for GitHub-imported template repositories as every change requires a push to GitHub repository.

I'm closing this ticket since the original issue is resolved. Thanks again.

But on a side note I want to mentioned the following issues with screenshots that I observed while trying to re-generate my screenshots.

1) Quite often screenshot captures a black screen with "transpiling modules" or "installing dependencies" message. 2) The screenshots are displayed cropped out on horizontal axis on the package examples page (example - https://codesandbox.io/examples/package/react-photo-album) 3) Quite often screen shots are captured before the page is completely loaded (example - https://screenshots.codesandbox.io/kimxv/19.png)

[JamesACS]

No problem, glad it worked! As for the Github templates that would definitely be a bit more tricky but we've had a few screenshot issues recently so are working on a bit of an overhaul!