Editing Exception handling (section)

== In user interfaces ==

[[Front-end web development]] frameworks, such as [[React (JavaScript library)|React]] and [[Vue.js|Vue]], have introduced error handling mechanisms where errors propagate up the [[user interface]] (UI) component hierarchy, in a way that is analogous to how errors propagate up the call stack in executing code.<ref>{{Cite web|url=https://reactjs.org/docs/error-boundaries.html|title=Error Boundaries|website=React|access-date=2018-12-10}}</ref><ref>{{Cite web|url=https://vuejs.org/v2/api/#errorCaptured|title=Vue.js API|website=Vue.js|access-date=2018-12-10}}</ref> Here the error boundary mechanism serves as an analogue to the typical try-catch mechanism. Thus a component can ensure that errors from its child components are caught and handled, and not propagated up to parent components.

For example, in Vue, a component would catch errors by implementing <code>errorCaptured</code><syntaxhighlight lang="javascript">
Vue.component('parent', {
    template: '<div><slot></slot></div>',
    errorCaptured: (err, vm, info) => alert('An error occurred');
})
Vue.component('child', {
    template: '<div>{{ cause_error() }}</div>'
})
</syntaxhighlight>When used like this in markup:<syntaxhighlight lang="html">
<parent>
    <child></child>
</parent>
</syntaxhighlight>The error produced by the child component is caught and handled by the parent component.<ref>{{Cite web|url=https://catchjs.com/Docs/Vue|title=Error handling with Vue.js|website=CatchJS|access-date=2018-12-10}}</ref>