Skip to content

fix(zone.js): swallow the error when the element callback is not patchable#45400

Closed
arturovt wants to merge 1 commit intoangular:masterfrom
arturovt:fix/42546
Closed

fix(zone.js): swallow the error when the element callback is not patchable#45400
arturovt wants to merge 1 commit intoangular:masterfrom
arturovt:fix/42546

Conversation

@arturovt
Copy link
Contributor

@arturovt arturovt commented Mar 20, 2022

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

  • Bugfix

What is the current behavior?

Issue Number: #42546

Does this PR introduce a breaking change?

  • Yes
  • No

…hable

The `patchCallbacks` is used for patching the `document.registerElement` and
`customElements.define`. We explicitly wrap the patching code into try-catch since
callbacks may be already patched by other web components frameworks (e.g. LWC), and they
make those properties non-writable. This means that patching callback will throw an error
`cannot assign to read-only property`. See this code as an example:
https://github.com/salesforce/lwc/blob/master/packages/@lwc/engine-core/src/framework/base-bridge-element.ts#L180-L186
We don't want to stop the application rendering if we couldn't patch some
callback, e.g. `attributeChangedCallback`.

PR Close angular#42546
@pullapprove pullapprove bot requested a review from JiaLiPassion March 20, 2022 18:42
Copy link
Contributor

@JiaLiPassion JiaLiPassion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@arturovt , thank you for the PR, is that possible to check the propertyDescriptor is non-configurable instead of try/catch?

@arturovt
Copy link
Contributor Author

arturovt commented Mar 20, 2022

@arturovt , thank you for the PR, is that possible to check the propertyDescriptor is non-configurable instead of try/catch?

Hey, unfortunately, the code that throws is this one:

else if (prototype[callback]) {
  prototype[callback] = api.wrapWithCurrentZone(prototype[callback], source);
}

The descriptor is undefined there (because callback is on the prototype chain and not the own property of the prototype).

@JiaLiPassion
Copy link
Contributor

Got it, and is that possible to load zone.js before lwc to avoid this error?

@arturovt
Copy link
Contributor Author

Got it, and is that possible to load zone.js before lwc to avoid this error?

Sure. The thing is the zone.js is always loaded before the lwc (since polyfills are loaded before the main bundle). The error is thrown when the customElements.define is called for the first time, which is usually called within the AppModule constructors since developers follow the official guide (e.g. we use Lit (not directly, but some packages that expose web components) except of LWC in conjunction with @angular/elements in of the apps).

Copy link
Contributor

@JiaLiPassion JiaLiPassion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@JiaLiPassion JiaLiPassion added area: zones Issues related to zone.js target: patch This PR is targeted for the next patch release labels Mar 21, 2022
@ngbot ngbot bot modified the milestone: Backlog Mar 21, 2022
@dylhunn
Copy link
Contributor

dylhunn commented Mar 25, 2022

It looks like this might be ready for merge @arturovt @JiaLiPassion?

@JiaLiPassion JiaLiPassion added the action: merge The PR is ready for merge by the caretaker label Mar 25, 2022
@JiaLiPassion
Copy link
Contributor

@dylhunn , yes, this one is ready for merge, thank you.

@dylhunn
Copy link
Contributor

dylhunn commented Mar 25, 2022

This PR was merged into the repository by commit 4ea70e3.

@dylhunn dylhunn closed this in 4ea70e3 Mar 25, 2022
dylhunn pushed a commit that referenced this pull request Mar 25, 2022
…hable (#45400)

The `patchCallbacks` is used for patching the `document.registerElement` and
`customElements.define`. We explicitly wrap the patching code into try-catch since
callbacks may be already patched by other web components frameworks (e.g. LWC), and they
make those properties non-writable. This means that patching callback will throw an error
`cannot assign to read-only property`. See this code as an example:
https://github.com/salesforce/lwc/blob/master/packages/@lwc/engine-core/src/framework/base-bridge-element.ts#L180-L186
We don't want to stop the application rendering if we couldn't patch some
callback, e.g. `attributeChangedCallback`.

PR Close #42546

PR Close #45400
@arturovt arturovt deleted the fix/42546 branch March 25, 2022 23:32
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 25, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: zones Issues related to zone.js target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants