fix(runtime): catch errors in async lifecycle methods

[tanner-reits]

What is the current behavior?

There is a discrepancy between how Stencil handles errors in synchronous vs asynchronous component lifecycle methods. In synchronous components, the error is thrown, but the component will still render. For async, the error block component rendering.

Fixes: #5824

What is the new behavior?

The runtime will now catch errors thrown from async lifecycle methods, log them, and then continue the render cycle.

Documentation

Does this introduce a breaking change?

• [ ] Yes
• [x] No

Testing

Validated fix in the associated issue's reproduction case.

Other information

[github-actions[bot]]

PR built and packed!

Download the tarball here: https://github.com/ionic-team/stencil/actions/runs/9487277437/artifacts/1594945266

If your browser saves files to ~/Downloads you can install it like so:

unzip -d ~/Downloads ~/Downloads/stencil-core-4.18.3-dev.1718214344.a39a6b2.tgz.zip && npm install ~/Downloads/stencil-core-4.18.3-dev.1718214344.a39a6b2.tgz

[github-actions[bot]]

@stencil/core@4.18.3 ts tsc --noEmit --project scripts/tsconfig.json && tsx scripts/tech-debt-burndown-report.ts

--strictNullChecks error report

Typechecking with --strictNullChecks resulted in 1080 errors on this branch.

That's the same number of errors on main, so at least we're not creating new ones!

reports and statistics

Our most error-prone files

| Path | Error Count | | --- | --- | | src/dev-server/index.ts | 37 | | src/dev-server/server-process.ts | 32 | | src/compiler/prerender/prerender-main.ts | 22 | | src/runtime/vdom/vdom-render.ts | 21 | | src/runtime/client-hydrate.ts | 20 | | src/screenshot/connector-base.ts | 19 | | src/testing/puppeteer/puppeteer-element.ts | 19 | | src/dev-server/request-handler.ts | 15 | | src/compiler/prerender/prerender-optimize.ts | 14 | | src/compiler/sys/stencil-sys.ts | 14 | | src/runtime/connected-callback.ts | 14 | | src/sys/node/node-sys.ts | 14 | | src/compiler/prerender/prerender-queue.ts | 13 | | src/compiler/sys/in-memory-fs.ts | 13 | | src/runtime/set-value.ts | 13 | | src/compiler/output-targets/output-www.ts | 12 | | src/compiler/transformers/test/parse-vdom.spec.ts | 12 | | src/compiler/transformers/transform-utils.ts | 12 | | src/mock-doc/test/attribute.spec.ts | 12 | | src/compiler/build/compiler-ctx.ts | 11 |

Our most common errors

| [Typescript Error Code](https://github.com/microsoft/TypeScript/blob/main/src/compiler/diagnosticMessages.json) | Count | | --- | --- | | TS2322 | 351 | | TS2345 | 330 | | TS18048 | 193 | | TS18047 | 76 | | TS2722 | 27 | | TS2532 | 24 | | TS2531 | 19 | | TS2454 | 14 | | TS2790 | 11 | | TS2352 | 9 | | TS2769 | 8 | | TS2416 | 7 | | TS2538 | 4 | | TS2493 | 3 | | TS18046 | 2 | | TS2684 | 1 | | TS2430 | 1 |

Unused exports report

There are 15 unused exports on this PR. That's the same number of errors on main, so at least we're not creating new ones!

Unused exports

| File | Line | Identifier | | --- | --- | --- | | src/runtime/bootstrap-lazy.ts | 21 | setNonce | | src/screenshot/screenshot-fs.ts | 18 | readScreenshotData | | src/testing/testing-utils.ts | 198 | withSilentWarn | | src/utils/index.ts | 145 | CUSTOM | | src/utils/index.ts | 245 | NODE_TYPES | | src/utils/index.ts | 269 | normalize | | src/utils/index.ts | 7 | escapeRegExpSpecialCharacters | | src/compiler/app-core/app-data.ts | 25 | BUILD | | src/compiler/app-core/app-data.ts | 116 | Env | | src/compiler/app-core/app-data.ts | 118 | NAMESPACE | | src/compiler/fs-watch/fs-watch-rebuild.ts | 123 | updateCacheFromRebuild | | src/compiler/types/validate-primary-package-output-target.ts | 82 | satisfies | | src/compiler/types/validate-primary-package-output-target.ts | 82 | Record | | src/testing/puppeteer/puppeteer-declarations.ts | 485 | WaitForEventOptions | | src/compiler/sys/fetch/write-fetch-success.ts | 7 | writeFetchSuccessSync |