-
-
Notifications
You must be signed in to change notification settings - Fork 835
bug: exception in an async componentWillLoad method will break the rendering cycle #5824
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Stencil Version
v4.18.3
Current Behavior
The test setup contains two components, one parent component and one child. The child component does have an issue and throws an error in its componentWillLoad function. Depending on the type of function (async or not) the code will behave different.
The sync case
componentWillLoad() {
throw new Error('my child error');
}
The error will be logged to the console but the whole application sill works as good as possible. The parent seems to be unaffected by that and the child component has been rendered.
The async case
async componentWillLoad() {
throw new Error('my child error');
}
The behavior changes and the rendering of the child and the parent is stoped. The child is also not rendered. It seems to be in a state where it can not recover and keep on working.
Expected Behavior
The async case should behave like the sync case. In any case, the child should not be able to break the rendering cycle of the parent.
System Info
System: node 22.2.0
Platform: darwin (23.5.0)
CPU Model: Apple M2 Pro (10 cpus)
Compiler: /Users/mw/workspace/experiments/willoadexception/node_modules/@stencil/core/compiler/stencil.js
Build: 1716921701
Stencil: 4.18.3 😄
TypeScript: 5.4.5
Rollup: 2.56.3
Parse5: 7.1.2
jQuery: 4.0.0-pre
Terser: 5.31.0Steps to Reproduce
- Clone and run the demo application
- Click the button to show the child component
- Current result will be a stoped rendering cycle of the parent
Code Reproduction URL
https://github.com/wittemann/async-componentWillLoad-issue
Additional Information
I tried to dig down into the stencil code a bit and it seems to be rooted here:
https://github.com/ionic-team/stencil/blob/main/src/runtime/update-component.ts#L98
In the async case, the safeCall method will not catch the exception and with that, the returned promise will go into the enqueue function which is waiting for the promise to be fulfilled which will never happen as it will be rejected. Therefore, the updateComponent function is not going to be called.