Codesandbox-client: CodeSandboxs are broken with 502: Bad Gateway

[nikolasburk]

🐛 bug report

I have two CodeSandboxes that are imported from GitHub, both seem to be broken while they used to just a few hours ago.

• https://codesandbox.io/s/github/prisma-csb/prisma-client-demo-ts
• https://codesandbox.io/s/github/prisma-csb/prisma-client-demo-js

[lbogdan]

Hey @nikolasburk , it's because you changed the start script, which is the one we run when a server sandbox is started.

[nikolasburk]

Thanks a lot for the quick reply @lbogdan 🙏 I indeed adjusted the start script, but I guess I don't understand why this is breaking the CSB now.

The start script now should simply run the info.{ts,js} script to print something to the console. Do you have a recommended fix?

[lbogdan]

We assume the start script (actually, we look for dev, develop, serve, start, in this particular order) starts the main process of the sandbox (the dev server, if you will). So, instead of demo, you can use one of dev, develop or serve.

[nikolasburk]

But I do want the start script to be executed 🙂it provides the instructions for people to get started. The prior yarn start was of no use because it triggered an interactive CLI that could not be used in the imported CSB. That's why I changed it to yarn demo, so that it doesn't get executed by default any more.

[lbogdan]

So what would you expect to see on https://rlkyjwx2nq.sse.codesandbox.io/, if there is no server running?

[nikolasburk]

Ah sorry, that's of course a valid point! I actually wouldn't have expected anything because there's indeed no server running. However, the prior behaviour seemed to be that the embedded browser would show the terminal that runs the yarn start command:

That's why I expected to see the terminal output that's printed with the new yarn start command. Maybe this wasn't the expected behaviour in the first place and now everything is as expected?

[lbogdan]

It only shows that while the sandbox is started, so you can have some feedback while you're waiting for it to start. After that, it expects that one of those scripts I enumerated earlier starts a webserver, which it will then expose on https://sandbox-id.sse.codesandbox.id, or show the 502 page if no webserver is running.

[nikolasburk]

Ok, that makes sense. Thanks a lot for the explanations! 🙏

I guess what I really need is this feature then, so that people who want to use the demo can jump right into the terminal and do not get distracted by the error in the browser.

[lbogdan]

Or you could start a small express server that would serve a static page with the setup instructions. 🙂

[schickling]

I'd suggest a more helpful error message that there's no server running. Maybe fallback to the CLI output while there is no HTTP server reachable.

[lbogdan]

@schickling Isn't "We had trouble connecting to the server, try restarting it or check the logs to see what happened." helpful enough?
I guess we could fallback to the CLI (although it's a bit tricky to implement because of the current architecture), but then again we kind of assume there's a webserver running in the sandbox at all times, so it makes sense to show an error page when that's not the case, instead of just showing the CLI.

[schickling]

I don't think it's helpful enough, that's why I brought it up :)

Completely understand that it can be difficult to implement but right now UX is clearly suffering from it.