Capo extension crashes for my site
stefanjudis opened this issue · comments
Hey Rick, I hope you're well. I just wanted to play with the new extension and it's crashing for my site. 🫣
Might be because there's too much inline styles? 😅
Oh no 😱
Can you confirm which version of the extension you're using? v1.2 was just published today. Go to chrome://extensions/ to check:
Also, if there's an "Errors" button there, can you click it and share any error messages?
FWIW when I load up your site with 1.2 it seems to work normally.
The only other thing I can think of is maybe some bad combination of extensions. If all else fails, maybe you could try disabling them in batches to see if that helps narrow it down.
Any console/network errors?
Thanks for the swift reply!
I'm on 1.2 and Chrome Version 114.0.5735.133 (Official Build) (x86_64). 🫣
Also, if there's an "Errors" button there, can you click it and share any error messages?
I don't see an errors button. :/
I also disabled all other extensions.
Pasting the snippet into the console leads to the same crashing result.
Edit: I also see you have CSP set up (it's blocking https://ingesteer.services-prod.nsvcs.net/rum_collection by the way!) but it doesn't seem to be blocking capo's fetch.
Haha yeah, I try to be a good web citizen and it stands in the way soooooo much. :D
There are also no exceptions or something. Extension and script just crash Chrome.
Oh boy, I see that this is report isn't debuggable if it works for you. 😅
Does it work on any other pages?
Jep. 😅
Hmm I'll DM you, maybe we can debug over VC
To summarize:
- the site crashes for both the extension and the snippet
- when the extension crashes we get the error
"extension manifest must request permission to access the respective host."(try/catch logs the error but still crashes) - no error message when the snippet crashes
- when the extension crashes we get the error
- crashes only on stefanjudis.com, not other sites
- crashes even on local build of the site, no CSP
- crashes only on Stefan's computer, not mine despite same version of Chrome and extension/snippet
- crashes even when no other extensions are enabled
- crashes for both the official build of the extension and a locally installed development version
- crashes only on Chrome stable, not on canary (!)
@stefanjudis as a follow up, could you try running version 1.1 of the snippet? This one doesn't have the validation logic or static head parsing, so if it works there must be a bug in the new code.
Very interesting! The logic for getting the static head is this:
let head;
let isStaticHead = false;
async function getStaticHTML() {
const url = document.location.href;
const response = await fetch(url);
return await response.text();
}
async function getStaticOrDynamicHead() {
if (head) {
return head;
}
try {
let html = await getStaticHTML();
html = html.replace(/(<\/?)(head)/ig, '$1static-head');
const staticDoc = document.implementation.createHTMLDocument('New Document');
staticDoc.documentElement.innerHTML = html;
head = staticDoc.querySelector('static-head');
if (head) {
isStaticHead = true;
} else {
head = document.head;
}
} catch {
head = document.head;
}
return head;
}
await getStaticOrDynamicHead();Does that trigger the crash? Does it return a <head> or <static-head> element?
I think we're getting close!
It looks indeed like this is crashing it.
crash.mp4
But only initially. With devtools open, after a refresh it seems to work.
It looks like you're running scripts 3 times: the first time is the getStaticOrDynamicHead script, which crashes the tab, the second and third times you're running the v1.1 script, which works. Or are you saying the getStaticOrDynamicHead script works on the second/third try?
Now that we know that's the script that causes the crash, I wonder if we can narrow it down further.
Just getStaticHTML:
async function getStaticHTML() {
const url = document.location.href;
const response = await fetch(url);
return await response.text();
}
await getStaticHTML();or just getStaticOrDynamicHead (with example.com HTML):
let head;
let isStaticHead = false;
async function getStaticOrDynamicHead() {
if (head) {
return head;
}
try {
let html = `<!doctype html>\n<html>\n<head>\n <title>Example Domain</title>\n\n <meta charset="utf-8" />\n <meta http-equiv="Content-type" content="text/html; charset=utf-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1" />\n <style type="text/css">\n body {\n background-color: #f0f0f2;\n margin: 0;\n padding: 0;\n font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;\n \n }\n div {\n width: 600px;\n margin: 5em auto;\n padding: 2em;\n background-color: #fdfdff;\n border-radius: 0.5em;\n box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);\n }\n a:link, a:visited {\n color: #38488f;\n text-decoration: none;\n }\n @media (max-width: 700px) {\n div {\n margin: 0 auto;\n width: auto;\n }\n }\n </style> \n</head>\n\n<body>\n<div>\n <h1>Example Domain</h1>\n <p>This domain is for use in illustrative examples in documents. You may use this\n domain in literature without prior coordination or asking for permission.</p>\n <p><a href="https://www.iana.org/domains/example">More information...</a></p>\n</div>\n</body>\n</html>\n`;
html = html.replace(/(<\/?)(head)/ig, '$1static-head');
const staticDoc = document.implementation.createHTMLDocument('New Document');
staticDoc.documentElement.innerHTML = html;
head = staticDoc.querySelector('static-head');
if (head) {
isStaticHead = true;
} else {
head = document.head;
}
} catch (e) {
console.error('Capo error', e);
head = document.head;
}
return head;
}
await getStaticOrDynamicHead();Would you be able to try both and report back what happens?
This is so strange—the two snippets from the preview comment work alone.
But the snippet here: #31 (comment) breaks Chrome.
strange.mp4
staticDoc.documentElement.innerHTML = html; seems to be the issue.
Could you share what this returns? I wonder if we're getting different HTML back.
async function getStaticHTML() {
const url = document.location.href;
const response = await fetch(url);
return await response.text();
}
await getStaticHTML();
Or better yet, the value of html before assigning it to innerHTML (in case there's something wonky with the regex substitution)
Just getting the static HTML works fine.
Logging the HTML before works two and looks correctly. It still crashed when assigning though.
It looks like it's cooking on the large HTML being assigned to the static doc.
It looks like a weird Chrome bug which is fixed in canary already. Should we just wait if it resolves itself with the next Chrome major release?
I'm sad we couldn't find the exact bug, but waiting for 115 sounds good to me. Should be out in a couple of weeks.
@stefanjudis if you go to the extension options and deselect "Prefer to evaluate the static, server-rendered <head>" my hope is that it will circumvent the bug you hit 🤞
Works!!! Still crashing in default settings with Chrome 114 but when deselecting it works 💯
