bug: exception in an async componentWillLoad method will break the rendering cycle

[wittemann]

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.0

Steps 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.

[tanner-reits]

Hey @wittemann 👋

Can confirm there is a discrepancy between Stencil handling errors in synchronous and async lifecycle methods. I'm working on a solution and should have a fix up soon, hopefully 🤞

Thanks for reporting!

[wittemann]

Thanks for the quick fix @tanner-reits. Much appreciated!

[tanner-reits]

A fix for this was included in today's v4.19.0 release!