There is a Google Chrome extension with content script
that handles JS errors occured on all tabs pages. But the problem is that no one of usual methods of getting errors stack trace does not work.
For example, there is a code in content script
of Chrome extension:
window.addEventListener('error', function(event) {
console.log(event.error.stack); // event.error will be null
}, false);
If I call this code inside web page, so event.error
will contains Error
object with stack
property.
Same problem with trying to get stack trace using:
console.log((new Error()).stack));
Does anybody knows some working issue to get error stack trace inside content script
of Chrome extension?
Error stack trace must be received as string
or Array
, means not just like some output in JS console by calling console.trace()
.
How to reproduce:
jzen.zip
to some /jsen
folderchrome://extensions
in your Google Chrome, enable Developer mode
http://i.imgur.com/5x5D6NP.png
Load unpacked extension
button and select path to /jsen
folder/jsen/content.js
file and add console.log('JSEN', e.error.stack);
inside window.addEventListener('error', function(e) {
/jsen/content.js
to get correct error traceClick the Errors button to view the error log. The extensions system has found an issue in the background script. Additionally, the Chrome DevTools panel can be opened for the background script by selecting the blue link next to Inspect views. Return to the code.
A stack overflow is a type of buffer overflow error that occurs when a computer program tries to use more memory space in the call stack than has been allocated to that stack.
A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the website itself, such as those loaded using the <script> element).
As you mention, the error
property of the event object is null
when capturing the event in Content Script context, but it has the required info when captured in webpage context. So the solution is to capture the event in webpage context and use messaging to deliver it to the Content Script.
// This code will be injected to run in webpage context
function codeToInject() {
window.addEventListener('error', function(e) {
var error = {
stack: e.error.stack
// Add here any other properties you need, like e.filename, etc...
};
document.dispatchEvent(new CustomEvent('ReportError', {detail:error}));
});
}
document.addEventListener('ReportError', function(e) {
console.log('CONTENT SCRIPT', e.detail.stack);
});
//Inject code
var script = document.createElement('script');
script.textContent = '(' + codeToInject + '())';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);
The techniques used are described in:
The main problem is JS context isolation, i.e. the fact that "Content scripts execute in a special environment called an isolated world". This is a good thing, of course, because it avoids conflicts and enhances security, but yet a problem if you want to catch errors.
Each isolated world sees its own version of the (window) object. Assigning to the object affects your independent copy of the object...
...neither one can read the other's event handler. The event handlers are called in the order in which they were assigned.
On posiible solution (a.k.a. hack) consists of the following steps:
Below is the source code of a sample extension that does exactly that.
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"content_scripts": [{
"matches": ["*://*/*"],
"js": ["content.js"],
"run_at": "document_start",
"all_frames": true
}],
}
content.js:
/* This <script> element will function as an "error-proxy"
* for the content-script */
var errorProxy = document.createElement('script');
errorProxy.id = 'myErrorProxyScriptID';
errorProxy.dataset.lastError = '';
/* Make the content as non-obtrusive as possible */
errorProxy.textContent = [
'',
'(function() {',
' var script = document.querySelector("script#' + errorProxy.id + '");',
' window.addEventListener("error", function(evt) {',
' script.dataset.lastError = evt.error.stack;',
' }, true);',
'})();',
''].join('\n');
/* Add the <script> element to the DOM */
document.documentElement.appendChild(errorProxy);
/* Create an observer for `errorProxy`'s attributes
* (the `data-last-error` attribute is of interest) */
var errorObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if ((mutation.type === 'attributes')
&& (mutation.attributeName === 'data-last-error')) {
console.log('Content script detected new error:\n',
errorProxy.dataset.lastError);
}
});
});
errorObserver.observe(errorProxy, { attributes: true });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With