vue3 render warning loop #5916

Description

@Rockergmail

Is there an existing issue for this?

How do you use Sentry?

Self-hosted/on-premise

Which package are you using?

@sentry/vue

SDK Version

7.12.1

Framework Version

Vue 3.2.23

Link to Sentry event

No response

Steps to Reproduce

  1. add a route to a new page
  2. the new page's template add one undeclared var
  3. visit the new page. and the warning message from instruments.js will go on and on until the page dead.

The reason I found is that, when rendering gets a warning, will call console.warn to console the error stack. But the stack includes a Proxy variable. When sentry do safeJoin with String(value), will visit the proxy variable, and visit the get handler, got undefined, so vue will call console.warn again. So the warning loop happends.

image

`checkStored` is my undeclared var

image

image

image

image


I tried to fix but I can not deal with how to test a var is Proxied. The way I test will trigger the get handler, so I just disable the console option of Breadcrumbs to solve the problem temporary.
Even though I should clean my code without undeclared var, I think it is still a bug.

Expected Result

do not loop warning

Actual Result

do loop waning.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
       blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
      }
      } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
      })();
      (function(){
      try {
      var __m = "github.com";
      var __re = new RegExp('^' + "github\\.com" + '
      
      Skip to content

      vue3 render warning loop #5916

      Description

      @Rockergmail

      Is there an existing issue for this?

      How do you use Sentry?

      Self-hosted/on-premise

      Which package are you using?

      @sentry/vue

      SDK Version

      7.12.1

      Framework Version

      Vue 3.2.23

      Link to Sentry event

      No response

      Steps to Reproduce

      1. add a route to a new page
      2. the new page's template add one undeclared var
      3. visit the new page. and the warning message from instruments.js will go on and on until the page dead.

      The reason I found is that, when rendering gets a warning, will call console.warn to console the error stack. But the stack includes a Proxy variable. When sentry do safeJoin with String(value), will visit the proxy variable, and visit the get handler, got undefined, so vue will call console.warn again. So the warning loop happends.

      image

      `checkStored` is my undeclared var

      image

      image

      image

      image


      I tried to fix but I can not deal with how to test a var is Proxied. The way I test will trigger the get handler, so I just disable the console option of Breadcrumbs to solve the problem temporary.
      Even though I should clean my code without undeclared var, I think it is still a bug.

      Expected Result

      do not loop warning

      Actual Result

      do loop waning.

      Activity

      Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

      Metadata

      Metadata

      Assignees

      No one assigned

        Projects

        No projects

          Milestone

          No milestone

          Relationships

          None yet

          Development

          No branches or pull requests

          Issue actions

          , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
          Skip to content

          vue3 render warning loop #5916

          Description

          @Rockergmail

          Is there an existing issue for this?

          How do you use Sentry?

          Self-hosted/on-premise

          Which package are you using?

          @sentry/vue

          SDK Version

          7.12.1

          Framework Version

          Vue 3.2.23

          Link to Sentry event

          No response

          Steps to Reproduce

          1. add a route to a new page
          2. the new page's template add one undeclared var
          3. visit the new page. and the warning message from instruments.js will go on and on until the page dead.

          The reason I found is that, when rendering gets a warning, will call console.warn to console the error stack. But the stack includes a Proxy variable. When sentry do safeJoin with String(value), will visit the proxy variable, and visit the get handler, got undefined, so vue will call console.warn again. So the warning loop happends.

          image

          `checkStored` is my undeclared var

          image

          image

          image

          image


          I tried to fix but I can not deal with how to test a var is Proxied. The way I test will trigger the get handler, so I just disable the console option of Breadcrumbs to solve the problem temporary.
          Even though I should clean my code without undeclared var, I think it is still a bug.

          Expected Result

          do not loop warning

          Actual Result

          do loop waning.

          Activity

          Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

          Metadata

          Metadata

          Assignees

          No one assigned

            Projects

            No projects

              Milestone

              No milestone

              Relationships

              None yet

              Development

              No branches or pull requests

              Issue actions

              , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
              Skip to content

              vue3 render warning loop #5916

              Description

              @Rockergmail

              Is there an existing issue for this?

              How do you use Sentry?

              Self-hosted/on-premise

              Which package are you using?

              @sentry/vue

              SDK Version

              7.12.1

              Framework Version

              Vue 3.2.23

              Link to Sentry event

              No response

              Steps to Reproduce

              1. add a route to a new page
              2. the new page's template add one undeclared var
              3. visit the new page. and the warning message from instruments.js will go on and on until the page dead.

              The reason I found is that, when rendering gets a warning, will call console.warn to console the error stack. But the stack includes a Proxy variable. When sentry do safeJoin with String(value), will visit the proxy variable, and visit the get handler, got undefined, so vue will call console.warn again. So the warning loop happends.

              image

              `checkStored` is my undeclared var

              image

              image

              image

              image


              I tried to fix but I can not deal with how to test a var is Proxied. The way I test will trigger the get handler, so I just disable the console option of Breadcrumbs to solve the problem temporary.
              Even though I should clean my code without undeclared var, I think it is still a bug.

              Expected Result

              do not loop warning

              Actual Result

              do loop waning.

              Activity

              Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

              Metadata

              Metadata

              Assignees

              No one assigned

                Projects

                No projects

                  Milestone

                  No milestone

                  Relationships

                  None yet

                  Development

                  No branches or pull requests

                  Issue actions

                  , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
                  Skip to content

                  vue3 render warning loop #5916

                  Description

                  @Rockergmail

                  Is there an existing issue for this?

                  How do you use Sentry?

                  Self-hosted/on-premise

                  Which package are you using?

                  @sentry/vue

                  SDK Version

                  7.12.1

                  Framework Version

                  Vue 3.2.23

                  Link to Sentry event

                  No response

                  Steps to Reproduce

                  1. add a route to a new page
                  2. the new page's template add one undeclared var
                  3. visit the new page. and the warning message from instruments.js will go on and on until the page dead.

                  The reason I found is that, when rendering gets a warning, will call console.warn to console the error stack. But the stack includes a Proxy variable. When sentry do safeJoin with String(value), will visit the proxy variable, and visit the get handler, got undefined, so vue will call console.warn again. So the warning loop happends.

                  image

                  `checkStored` is my undeclared var

                  image

                  image

                  image

                  image


                  I tried to fix but I can not deal with how to test a var is Proxied. The way I test will trigger the get handler, so I just disable the console option of Breadcrumbs to solve the problem temporary.
                  Even though I should clean my code without undeclared var, I think it is still a bug.

                  Expected Result

                  do not loop warning

                  Actual Result

                  do loop waning.

                  Activity

                  Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

                  Metadata

                  Metadata

                  Assignees

                  No one assigned

                    Projects

                    No projects

                      Milestone

                      No milestone

                      Relationships

                      None yet

                      Development

                      No branches or pull requests

                      Issue actions

                      , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
                      Skip to content

                      vue3 render warning loop #5916

                      Description

                      @Rockergmail

                      Is there an existing issue for this?

                      How do you use Sentry?

                      Self-hosted/on-premise

                      Which package are you using?

                      @sentry/vue

                      SDK Version

                      7.12.1

                      Framework Version

                      Vue 3.2.23

                      Link to Sentry event

                      No response

                      Steps to Reproduce

                      1. add a route to a new page
                      2. the new page's template add one undeclared var
                      3. visit the new page. and the warning message from instruments.js will go on and on until the page dead.

                      The reason I found is that, when rendering gets a warning, will call console.warn to console the error stack. But the stack includes a Proxy variable. When sentry do safeJoin with String(value), will visit the proxy variable, and visit the get handler, got undefined, so vue will call console.warn again. So the warning loop happends.

                      image

                      `checkStored` is my undeclared var

                      image

                      image

                      image

                      image


                      I tried to fix but I can not deal with how to test a var is Proxied. The way I test will trigger the get handler, so I just disable the console option of Breadcrumbs to solve the problem temporary.
                      Even though I should clean my code without undeclared var, I think it is still a bug.

                      Expected Result

                      do not loop warning

                      Actual Result

                      do loop waning.

                      Activity

                      Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

                      Metadata

                      Metadata

                      Assignees

                      No one assigned

                        Projects

                        No projects

                          Milestone

                          No milestone

                          Relationships

                          None yet

                          Development

                          No branches or pull requests

                          Issue actions

                          , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
                          Skip to content

                          vue3 render warning loop #5916

                          Description

                          @Rockergmail

                          Is there an existing issue for this?

                          How do you use Sentry?

                          Self-hosted/on-premise

                          Which package are you using?

                          @sentry/vue

                          SDK Version

                          7.12.1

                          Framework Version

                          Vue 3.2.23

                          Link to Sentry event

                          No response

                          Steps to Reproduce

                          1. add a route to a new page
                          2. the new page's template add one undeclared var
                          3. visit the new page. and the warning message from instruments.js will go on and on until the page dead.

                          The reason I found is that, when rendering gets a warning, will call console.warn to console the error stack. But the stack includes a Proxy variable. When sentry do safeJoin with String(value), will visit the proxy variable, and visit the get handler, got undefined, so vue will call console.warn again. So the warning loop happends.

                          image

                          `checkStored` is my undeclared var

                          image

                          image

                          image

                          image


                          I tried to fix but I can not deal with how to test a var is Proxied. The way I test will trigger the get handler, so I just disable the console option of Breadcrumbs to solve the problem temporary.
                          Even though I should clean my code without undeclared var, I think it is still a bug.

                          Expected Result

                          do not loop warning

                          Actual Result

                          do loop waning.

                          Activity

                          Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

                          Metadata

                          Metadata

                          Assignees

                          No one assigned

                            Projects

                            No projects

                              Milestone

                              No milestone

                              Relationships

                              None yet

                              Development

                              No branches or pull requests

                              Issue actions

                              , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
                              Skip to content

                              vue3 render warning loop #5916

                              Description

                              @Rockergmail

                              Is there an existing issue for this?

                              How do you use Sentry?

                              Self-hosted/on-premise

                              Which package are you using?

                              @sentry/vue

                              SDK Version

                              7.12.1

                              Framework Version

                              Vue 3.2.23

                              Link to Sentry event

                              No response

                              Steps to Reproduce

                              1. add a route to a new page
                              2. the new page's template add one undeclared var
                              3. visit the new page. and the warning message from instruments.js will go on and on until the page dead.

                              The reason I found is that, when rendering gets a warning, will call console.warn to console the error stack. But the stack includes a Proxy variable. When sentry do safeJoin with String(value), will visit the proxy variable, and visit the get handler, got undefined, so vue will call console.warn again. So the warning loop happends.

                              image

                              `checkStored` is my undeclared var

                              image

                              image

                              image

                              image


                              I tried to fix but I can not deal with how to test a var is Proxied. The way I test will trigger the get handler, so I just disable the console option of Breadcrumbs to solve the problem temporary.
                              Even though I should clean my code without undeclared var, I think it is still a bug.

                              Expected Result

                              do not loop warning

                              Actual Result

                              do loop waning.

                              Activity

                              Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

                              Metadata

                              Metadata

                              Assignees

                              No one assigned

                                Projects

                                No projects

                                  Milestone

                                  No milestone

                                  Relationships

                                  None yet

                                  Development

                                  No branches or pull requests

                                  Issue actions