MithrilJS / MithrilJS/mithril.js
Error handling in view
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 14.5k
- Forks
- 922
- PR merge metrics
- No merged PRs in 30d
Description
It seems like Mithril does not handle errors thrown in the view function.
My personal experience is that if an error is thrown inside the view, the UI does not get properly updated. Not only the component fails to be updated, but the entire app as well.
Context
In this example, an error is thrown inside ErrorComp.view. The error prevents UI update in the entire app, hence button label is not updated.
var data = {
flag: true
}
var ErrorComp = {
view: function () {
console.log(data.flag)
return (data.flag ?
`No error.`
:
undefined.error
)
}
}
var App = {
view: function () {
return [
m(ErrorComp),
m('div', 'Click the button below.'),
m('button', { onclick: () => data.flag = !data.flag },
'Toggle flag: ' + data.flag
)
]
}
}
m.mount(document.getElementById('app'), App)
Steps
- Click the button.
Expected
ErrorComp not to render, but the rest of the application to update (button label to show false).
Actual
The UI does not update.
Suggestion
Mithril could catch the error and render an empty string where the component should be (and log the error). Maybe an errorView method could be supported (if defined).
It is all too easy to get an error in a component. For example if part of a data path is undefined, as loaded from AJAX. I think keeping the rest of the UI up to date would result in a more robust application. One that I as a developer can trust will work in the wild.
I know I can work around this, and I do. But I think Mithril could do better, and be more friendly to devs.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the failure using the linked JSFiddle, starting with the error thrown in ErrorComp.view and the update triggered by App.view's button. Trace the view update path to determine the intended error behavior; done means the failing component does not prevent the button label and rest of the application from updating.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100