Make console logs in browser configuration details easier to read #2659
Comments
|
Almost there. #2670 is here to fix a couple of things. And then we can prettify. |
|
This is an example of a log as kept right now. I'm trying to understand a couple of things. Where the @wisniewskit As you worked on it, could you tell me? [u'[console.log(==== uploader chunkcheck: true ===) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:214:759]',
u'[console.log(\tdefault mode: browser) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(Instantiating FileInput...) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(Trying runtime: html5) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log([object Object]) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(\tdefault mode: browser) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(\tselected mode: browser) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u"[console.log(Runtime 'html5' initialized) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]",
u'[console.log(Instantiating FileDrop...) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(Trying runtime: html5) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log([object Object]) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(\tdefault mode: browser) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(\tselected mode: browser) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u"[console.log(Runtime 'html5' initialized) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]",
u'[console.log(Instantiating FileDrop...) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(Trying runtime: html5) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log([object Object]) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(\tdefault mode: browser) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(\tselected mode: browser) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u"[console.log(Runtime 'html5' initialized) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]",
u'[console.log(Instantiating FileDrop...) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(Trying runtime: html5) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log([object Object]) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(\tdefault mode: browser) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(\tselected mode: browser) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u"[console.log(Runtime 'html5' initialized) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]",
u'[console.log(Instantiating FileDrop...) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(Trying runtime: html5) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log([object Object]) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(\tdefault mode: browser) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u'[console.log(\tselected mode: browser) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]',
u"[console.log(Runtime 'html5' initialized) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:211:12887]",
u'[console.info(SoundManager V2.97a.20150601 (HTML5-only mode)) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:184:11563]',
u'[console.info(SoundManager 2 HTML5 support: mp3 = true, mp4 = true, ogg = true, opus = true, wav = true) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:184:11563]',
u'[console.info(SoundManager 2: Ready. ) https://www.filemail.com/bundles/js/default?v=R1iSYgzt8XCQHg-EMwry4hVKE5504Mw8JlbomBZDl7o1:184:11563]',
u'[JavaScript Error: "downloadable font: OS/2: Bad sTypoLineGap, setting it to 0: -32 (font-family: "filemail" style:normal weight:400 stretch:100 src index:1) source: https://www.filemail.com/fonts/filemail.woff?-x1gbnc" {file: "unknown" line: 2 column: 11 source: "@font-face {\n font-family: "filemail";\n src: url("/fonts/filemail.eot?#iefix-x1gbnc") format("embedded-opentype"), url("/fonts/filemail.woff?-x1gbnc") format("woff"), url("/fonts/filemail.ttf?-x1gbnc") format("truetype"), url("/fonts/filemail.svg?-x1gbnc#filemail") format("svg");\n font-style: normal;\n font-weight: normal;\n}"}]',
u'[JavaScript Warning: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:56666/?_=1542831690530. (Reason: CORS request did not succeed)."]']Adding a bit of info here. if I check the log in my browser I get. as a screenshot
as text |
|
Also another big problem 😨 The truncation happens at 7947 chars |
|
@wisniewskit ah got an answer to my question:
function getConsoleMessages(windowIds) {
const ConsoleAPIStorage = Cc["@mozilla.org/consoleAPI-storage;1"]
.getService(Ci.nsIConsoleAPIStorage);
let messages = [];
for (const id of windowIds) {
messages = messages.concat(ConsoleAPIStorage.getEvents(id) || []);
}
return messages.map(evt => {
const {columnNumber, filename, level, lineNumber, timeStamp} = evt;
const args = evt.arguments.map(arg => {
return "" + arg;
}).join(", ");
const message = `[console.${level}(${args}) ${filename}:${lineNumber}:${columnNumber}]`;
return {timeStamp, message};
});
}We should probably make it more structured. [
{
"console": [
{
"level": "${level}",
"log": "${args}",
"uri": "${filename}",
"pos": "${lineNumber}:${columNumber}"
},
{
"level": "${level}",
"log": "${args}",
"uri": "${filename}",
"pos": "${lineNumber}:${columNumber}"
}
]
}
] |
|
Ah, you beat me to it, sorry. Yes, I don't mind structuring these things rather than using strings. This was my first attempt. I think your suggestion is fine. When we've decided, let's open a Bugzilla bug to fix the desktop and Fennec reporters. I don't know where the truncation happens, though. I tried to avoid intentionally truncating anything (that was of course the whole reason to use POST requests in the first place). I will try to investigate this ASAP. |
|
@wisniewskit thanks. I just reformatted a bit. Trying to make sense myself. :) |
|
Also @wisniewskit did you see all the logs which are object returns |
|
No, I haven't? Please link me to one or two issues where that happens, and I'll gladly investigate that as well. |
|
@wisniewskit webcompat/web-bugs#21650 This one see the details. This is comment #2659 (comment) see the log and the screenshot. |
|
|
Regarding the object format from this bug , I've looked at the previewers that Nicolas mentioned and looks like it may be something that could work for us. They limit a number of properties down to 10 and fold the rest:
We, perhaps, could do something similar - for all objects and arrays in console.log send maximum 10 properties/elements from the extension, so we have a "preview"? That could help with really big or nested objects. So webcompat.com will just receive a part of it, and to see the whole object we'd need to go to the actual website and look in the console. @karlcow @wisniewskit @denschub do you think that would be sufficient enough for diagnosis? |
|
Good lurking. Thanks @ksy36 Agreed with you. |
Why not only show it that way in the UI, but still send the data to webcompat.com? That way we could still (for example) access the full result as a comment in the HTML or something like that, without having to reproduce the problem ourselves. |
|
So this proposal is only for the objects in console log, e.g. when a site has The main reason for that is that objects can be really huge or have circular references in them. And probably they're not as useful for diagnosis as errors, for example. Though it's hard to tell now :) We can always make it better, if preview is not enough. |
|
Right, I suppose that's fine now that I've thought it through again. |
|
There's a few possible approaches to this, I think there's some very low hanging fruit here. :) One idea (I think from @karlcow) is to just upload the console messages as a text blob and store them on disk (eventually in the cloud, once that's sorted for images), and just hyperlink to them in the issue. This could work. And if we served them as Maybe something like: Or we could save the text blob as another format and beautify the text, etc. Just an idea. |
|
@miketaylr, I'd rather we keep them as JSON (which they are already)... too many nightmares about having to parsing text blobs that were incorrectly formatted. Unless we have zero control over the server containing the blobs, it shouldn't be too tricky to create a programmatic to check if the user wants a plain text or JSON formatted message (or we could just do a simple fetch-as-JSON and then make a table/list/text blob on the client side). |
|
I've tried looking at the logs in the built-in Firefox JSON viewer. It's better than what we have right now, but seems hard to navigate and catch obvious errors..
Also tried building a simple colored list based on JSON (used devtools colors).
This looks better, though messages about cookies blocking could be grouped together. Tried this on another site and got 74 of them :) So perhaps we could do:
thoughts? @karlcow @miketaylr @wisniewskit |
|
This seems like a cool idea to me. And if we save the raw JSON to the server, we can change the way we display it in the future.
That could be good -- or it might be interesting to have it reflect the way that devtools current displays it, which I guess is in the order its displayed here. Seems like a good "v2" improvement if you want to do it. :) |
Now that we have console logs coming in, we can think of ways to make them prettier.
cf. #2658
The text was updated successfully, but these errors were encountered: