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

[Rockergmail]

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

[Lms24]

Thanks for your contribution @Rockergmail!

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

[Rockergmail]

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

[Lms24]

Thanks for your contribution @Rockergmail!

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

[Rockergmail]

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

[Lms24]

Thanks for your contribution @Rockergmail!

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

[Rockergmail]

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

[Lms24]

Thanks for your contribution @Rockergmail!

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

[Rockergmail]

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

[Lms24]

Thanks for your contribution @Rockergmail!

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

[Rockergmail]

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

[Lms24]

Thanks for your contribution @Rockergmail!

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

[Rockergmail]

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

[Lms24]

Thanks for your contribution @Rockergmail!

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

[Rockergmail]

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

[Lms24]

Thanks for your contribution @Rockergmail!

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