`Uncaught DOMException: Failed to execute 'postMessage' on 'Window': #<HTMLAllCollection> could not be cloned.`
SimenB opened this issue ยท 8 comments
Not sure what triggers it...
All I'm doing is hitting the inspect button, then hovering a bunch of elements. FWIW clicking doesn't do anything except trigger the same error
This is using 9eb6d34 (6/12/2019)
on Chrome 74.0.3729.169
macOS 10.14.5
Really looking forward to using this, it looks incredibly slick! Great job ๐
Where is this test app?
Actually, I can reproduce on Emotion's site. Might be coincidental, but just opening up https://emotion.sh and try to inspect some elements using the react dev tools triggers the same error for me
Yeah, looks like inspecting something on the emotion website tries to send HTMLAllCollection
through postMessage
which fails. Not sure how best to handle this yet, but we have enough info to repro at least. Thanks ๐
Yeah, that fixed it. Thanks for the amazingly quick turnaround! ๐
Thanks for the confirmation! ๐
Possible, slightly more expensive, alternative approach (if we find more cases of things that are unsafe to clone):
const ValueToCloneableStatusMap = new WeakMap();
// Use a hidden window to try our postMessage() with,
// so we don't trigger any of the DevTools "message" subscribers.
let contentWindow = null;
function tryToCloneValue(value) {
if (contentWindow === null) {
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
contentWindow = iframe.contentWindow;
document.body.removeChild(iframe);
}
try {
contentWindow.postMessage(value, '*');
return true;
} catch (error) {
return false;
}
}
function canValueBeCloned(value) {
if (value == null) {
return true;
}
const type = typeof value;
if (type === 'string' || type === 'number' || type === 'boolean') {
return true;
}
if (!ValueToCloneableStatusMap.has(value)) {
ValueToCloneableStatusMap.set(value, tryToCloneValue(value));
}
return ValueToCloneableStatusMap.get(value);
}