search

denoland / fresh

The next-gen web framework.
https://fresh.deno.dev
MIT License
12.05k stars 607 forks source link

Errors - a choice for "Blank screen of death" ? #2520

Open saeho opened 2 weeks ago

saeho commented 2 weeks ago

In Deno, production or development, when there's an error, it breaks the app but it's handled silently. Javascript simply ceases to work. I can't click on anything, I can't navigate anywhere, and I can't do any interactions what so ever.

This confuses the user, and it leaves the user thinking the app is frozen or taking a long time to do something when in reality, it's just broken.

In other React frameworks, you get a very "in your face" ERROR screen when the app breaks. In production, the entire screen goes blank, which leaves the user with no choice except to hit that refresh button.

I think this is a much better solution than how errors and broken apps are handled right now in Fresh.

Can we change the error behavior in Fresh to something like this please?

CAYdenberg commented 2 weeks ago

A serverside error should result in rendering your _500.tsx template, if you have one.

For clientside errors, I think one of the advantages of Fresh is that breaking one island doesn't break the entire page. Links and so on should continue to work (in fact, other islands will continue to work! Just tested this); JavaScript is a progressive enhancement. You could wrap islands in an error boundary to get a common experience when an island breaks.

Idea for the core team: allow the equivalent of a layout for islands ... a common component that wraps all islands so that authors can provide a common error state design.

saeho commented 2 weeks ago

I'm actually talking about client side errors.

I want it to break the entire page.

Links may continue to work, but Javascript does not. I may be able to "click a link" to switch the page I'm on, but if that link changes a to render a different page on the main section of app, that partial section will not change, leaving the old screen behind. As a user this is completely confusing. I'm building a chat app, and once I have a javascript error that breaks the app, it looks like my app is working but I will not receive any javascript updates when a new message comes in, making the app look dead because I can't receive any real time feed. And I can't go to new chat rooms even if I can change the URL using a <a href=".." /> link

If the client's screen just went blank, they'll know to refresh.

I understand Fresh is NOT a SPA, and that's great. But there some SPA-esque behaviors all modern apps built in 2024 require.

CAYdenberg commented 2 weeks ago

I want it to break the entire page.

You could have your error boundary render a fixed position element that takes over the page.

I'm not on the core team so I'll let them respond to whether your suggestion is something they'll take under consideration ... but just sayin' you could do that without any help from them.