vuejs/devtools-v6 · warning

[Vue Devtools] Failed to send message to parent window

Error message

[Vue Devtools] Failed to send message to parent window

What it means

When accessing `window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__` itself throws (most commonly a cross-origin parent, where the property access violates the same-origin policy), sendToParent catches the exception and logs this warning with the error. The message to the parent is lost. Like [2], it is a logged warning, not a thrown error.

Source

Thrown at packages/app-backend-core/src/hook.ts:82

    }
    return
  }

  let hook

  if (isIframe) {
    const sendToParent = (cb) => {
      try {
        const hook = (window.parent as any).__VUE_DEVTOOLS_GLOBAL_HOOK__
        if (hook) {
          return cb(hook)
        }
        else {
          console.warn('[Vue Devtools] No hook in parent window')
        }
      }
      catch (e) {
        console.warn('[Vue Devtools] Failed to send message to parent window', e)
      }
    }

    hook = {
      devtoolsVersion,
      // eslint-disable-next-line accessor-pairs
      set Vue(value) {
        sendToParent((hook) => {
          hook.Vue = value
        })
      },

      // eslint-disable-next-line accessor-pairs
      set enabled(value) {
        sendToParent((hook) => {
          hook.enabled = value
        })
      },

View on GitHub (pinned to dd2ab5d427)

Solutions

  1. Serve the app from the same origin as the parent page, or inject the devtools hook script into the parent document so no cross-origin access is needed.
  2. Use a postMessage-based bridge instead of direct parent-window hook access for cross-origin embedding.
  3. Confirm the iframe isn't sandboxed in a way that blocks parent access; adjust sandbox attributes if you control the host.
  4. Ignore the warning if devtools integration inside embedded cross-origin frames is not required.
Defensive patterns

Strategy: try-catch

Validate before calling

function canAccessParent() {
  try { void window.parent.location.href; return true } catch { return false }
}

Try / catch

try {
  sendToParent(fn)
} catch (e) {
  console.warn('[Vue Devtools] Failed to send message to parent window', e)
  // fall back to local hook or postMessage channel
}

Prevention

When it happens

Trigger: Any sendToParent call while the app runs in a cross-origin iframe: evaluating `window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__` throws a SecurityError, which lands in this catch block. Also any other unexpected exception raised during parent-window access.

Common situations: Vue app embedded in a third-party cross-origin iframe (ad frames, hosted previews, CodeSandbox/StackBlitz style embeds); browser privacy extensions blocking cross-origin access; parent page on a different domain than the app.

Related errors


AI-assisted analysis of vuejs/devtools-v6@dd2ab5d427 (2026-08-31). Data as JSON: /api/errors/c5502e42caaa6b15. Report an issue: GitHub.