New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix blank screen on home page #4575
Conversation
Also used this on malformed advanced queries to improve styling and communication of error
@@ -147,11 +147,15 @@ | |||
(when (seq queries) | |||
[:div#today-queries.mt-10 | |||
(for [query queries] | |||
(rum/with-key | |||
(block/custom-query {:attr {:class "mt-10"} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Weirdly enough, this component has a catch-error but it was not taking effect
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems that rum components don't catch errors in both :init and :will-component lifecycles.
https://github.com/tonsky/rum/blob/gh-pages/src/rum/core.clj#L131-L138
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's likely that lifecycle hooks have something to do with it but wouldn't explain why the page component works while custom-query
doesn't
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
This fixes #4539 where two users had shared default-queries that were causing their home screen to crash. This PR also improves the error handling of default-queries so that any future errors render an inline error instead of blanking the screen like:
This PR also introduces a reusable block-error component and uses it when advanced queries fail to parse correctly. Before it looked like:
and now the error looks like:
If we like this block-error component, I could use it in a couple more places where we render blocks errors with
div.warning ...