-
Notifications
You must be signed in to change notification settings - Fork 790
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(runtime): Add element to component error handler. Enables error …
…boundaries (#2979) * feat(emit error events): emit custom event on component error within lifecycle or render * test(add test for component error handling) * revert un-required changes * Added host element to loadModule error handling * chore(format): add prettier - upgrade prettier to v2.3.2 - lock version to prevent breaking changes in minor versions - add prettier.dry-run package.json script - add pipeline action to evaluate format status - add prettierignore file for faster runs STENCIL-8: Add Prettier to Stencil * format codebase * revert cherry pick * feat(emit error events): emit custom event on component error within lifecycle or render * test(add test for component error handling) * revert un-required changes * Added host element to loadModule error handling * revert cherry pick * run prettier * rm rv karma/test-components * rv extra prettier call * Flaky test? * fix lint * fixup `strictNullChecks` issues * chore: tidy * chore: formatting * chore: revert type --------- Co-authored-by: Ryan Waskiewicz <[email protected]> Co-authored-by: John Jenkins <[email protected]>
- Loading branch information
3 people
authored
Jan 23, 2025
1 parent
a7d3873
commit 5605d48
Showing
9 changed files
with
128 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { Component, ComponentInterface, h, Prop, setErrorHandler } from '@stencil/core'; | ||
| import { newSpecPage } from '@stencil/core/testing'; | ||
|
|
||
| describe('component error handling', () => { | ||
| it('calls a handler with an error and element during every lifecycle hook and render', async () => { | ||
| @Component({ tag: 'cmp-a' }) | ||
| class CmpA implements ComponentInterface { | ||
| @Prop() reRender = false; | ||
|
|
||
| componentWillLoad() { | ||
| throw new Error('componentWillLoad'); | ||
| } | ||
|
|
||
| componentDidLoad() { | ||
| throw new Error('componentDidLoad'); | ||
| } | ||
|
|
||
| componentWillRender() { | ||
| throw new Error('componentWillRender'); | ||
| } | ||
|
|
||
| componentDidRender() { | ||
| throw new Error('componentDidRender'); | ||
| } | ||
|
|
||
| componentWillUpdate() { | ||
| throw new Error('componentWillUpdate'); | ||
| } | ||
|
|
||
| componentDidUpdate() { | ||
| throw new Error('componentDidUpdate'); | ||
| } | ||
|
|
||
| render() { | ||
| if (!this.reRender) return <div></div>; | ||
| else throw new Error('render'); | ||
| } | ||
| } | ||
|
|
||
| const customErrorHandler = (e: Error, el: HTMLElement) => { | ||
| if (!el) return; | ||
| el.dispatchEvent( | ||
| new CustomEvent('componentError', { | ||
| bubbles: true, | ||
| cancelable: true, | ||
| composed: true, | ||
| detail: e, | ||
| }), | ||
| ); | ||
| }; | ||
| setErrorHandler(customErrorHandler); | ||
|
|
||
| const { doc, waitForChanges } = await newSpecPage({ | ||
| components: [CmpA], | ||
| html: ``, | ||
| }); | ||
|
|
||
| const handler = jest.fn(); | ||
| doc.addEventListener('componentError', handler); | ||
| const cmpA = document.createElement('cmp-a') as any; | ||
| doc.body.appendChild(cmpA); | ||
| try { | ||
| await waitForChanges(); | ||
| } catch (e) {} | ||
|
|
||
| cmpA.reRender = true; | ||
| try { | ||
| await waitForChanges(); | ||
| } catch (e) {} | ||
|
|
||
| return Promise.resolve().then(() => { | ||
| expect(handler).toHaveBeenCalledTimes(9); | ||
| expect(handler.mock.calls[0][0].bubbles).toBe(true); | ||
| expect(handler.mock.calls[0][0].cancelable).toBe(true); | ||
| expect(handler.mock.calls[0][0].detail).toStrictEqual(Error('componentWillLoad')); | ||
| expect(handler.mock.calls[1][0].detail).toStrictEqual(Error('componentWillRender')); | ||
| expect(handler.mock.calls[2][0].detail).toStrictEqual(Error('componentDidRender')); | ||
| expect(handler.mock.calls[3][0].detail).toStrictEqual(Error('componentDidLoad')); | ||
| expect(handler.mock.calls[4][0].detail).toStrictEqual(Error('componentWillUpdate')); | ||
| expect(handler.mock.calls[5][0].detail).toStrictEqual(Error('componentWillRender')); | ||
| expect(handler.mock.calls[6][0].detail).toStrictEqual(Error('render')); | ||
| expect(handler.mock.calls[7][0].detail).toStrictEqual(Error('componentDidRender')); | ||
| expect(handler.mock.calls[8][0].detail).toStrictEqual(Error('componentDidUpdate')); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters