Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(vue): Avoid Render Warning Loop in Vue3 Apps #6014

Merged
merged 1 commit into from
Oct 24, 2022

Conversation

Rockergmail
Copy link
Contributor

@Rockergmail Rockergmail commented Oct 21, 2022

Before submitting a pull request, please take a look at our
Contributing guidelines and verify:

  • If you've added code that should be tested, please add tests.
  • Ensure your code lints and the test suite passes (yarn lint) & (yarn test)

Summary of the change (@Lms24):

This PR fixes an infinite loop that would occur in Vue 3 apps with undeclared refs.

Why this happens:

  1. Vue3 supports the property ref in the second arg of h method (see https://cn.vuejs.org/guide/essentials/template-refs.html)
  2. When a with an undeclared variable is rendered, Vue3 will call console.warn to print the error stack.
  3. Sentry instruments console (for the BreadCrumbs integration), and adds the message to the Breadcrumb with safeJoin.
  4. safeJoin converts variables to string. The ref variable is a proxied object via Proxy by Vue. so, when String(value) is called upon the undefined ref, it will trigger the getter of the Proxy, and which causes Vue3 to call console.warn again.
  5. This repeats infinitely.

Solutions:
Because there's no reliable way of testing if an object is a Proxy, the solution in this case is tailored to this exact scenario. In the breadcrumbs integration code, we check if the passed arguments to the console.warn match the specific warning described above. In case of a match, we alter the following argument to not trigger a warning again, thus leaving us with the one warning we want and getting rid of the infinite loop.

For more details, see the previous (almost identical) PR #6010

New PR because of #6010 (comment)

fixes #5916
fixes #4743

@AbhiPrasad AbhiPrasad added the Package: vue Issues related to the Sentry Vue SDK label Oct 24, 2022
Copy link
Member

@Lms24 Lms24 left a comment

Choose a reason for hiding this comment

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

Thanks for your contribution @Rockergmail!

For future readers: The conversation that led up to this PR can be found in #6010

@Lms24 Lms24 changed the title feat: fix vue3 render warning loop fix(vue): Avoid Render Warning Loop in Vue3 Apps Oct 24, 2022
@Lms24 Lms24 merged commit d8751dc into getsentry:master Oct 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: vue Issues related to the Sentry Vue SDK
Projects
None yet
Development

Successfully merging this pull request may close these issues.

vue3 render warning loop Infinite loop when using the render function and the ref parameter.
3 participants