We have global script Application.jsx
export default class extends React.Component {
render() {
return (
<GlobalErrorBoundary>
<Content/>
</GlobalErrorBoundary>
)
}
}
(I omit import sections in my snippets to show more concise code)
GlobalErrorBoundary.jsx
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {error: null};
}
componentDidCatch(error, errorInfo) {
this.setState({error});
}
render() {
if (this.state.error) {
return (
<p>Global Boundary</p>
);
}
return this.props.children;
}
}
Content.jsx
const _getElement = Symbol();
export default class extends React.Component {
render() {
return (
<LocalErrorBoundary>
{this[_getElement]()}
</LocalErrorBoundary>
)
}
[_getElement]() {
return (<div><InnerComponent/><InnerComponent2/></div>)
}
}
LocalErrorBoundary.jsx
export default class extends React.Component {constructor(props) {super(props);this.state = {error: null};}componentDidCatch(error, errorInfo) {this.setState({error});}render() {if (this.state.error) {return (<p>Local Boundary</p>);}return this.props.children;}
}
Component1.jsx
const _getElement = Symbol();
export default class extends React.Component {
render() {
return (
<div>
{this[_getElement]()};
</div>
)
}
[_getElement]() {
return 'InnerComponent1'
}
}
Component2.jsx
const _getElement = Symbol();export default class extends React.Component {render() {return (<div>{this[_getElement]()};</div>)}[_getElement]() {return 'InnerComponent2'}
}
And waht will happened when Content.jsx thows an error?
[_getElement]() {
throw 500;
}
It will be cought by
componentDidCatch(error, errorInfo) {
this.setState({error});
}
and printed what we expected:
<p>Global Boundary</p>
But what happenes when we have some widget s on our page and one of them throws an error? Error will be caughed by <LocalErrorBoundary> and will be printed:
<p>Local Boundary</p>
In many cases this is a desirable behavior, but not in my case.
In my case, when I have many independent widgets on page and each of them gets data content from other resource (which could thow an error) this solution does not work. I’ll expect that problematic widget, which throws an error, will print error information only in its own block and Error Handling will not stop rendering other widgets.
Maybe is the other solution? I'll try to find out.
