Skip to content

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

@wittemann

Description

@wittemann

Prerequisites

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bug: ValidatedThis PR or Issue is verified to be a bug within Stencil

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions