Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Capturing JS errors in Chrome

I'm capturing js errors in the application with window.onerror, but the thing is - in Chrome if dev tools isn't opened - then the url parameter passed to onerror handler always equals to the opened url.

While if dev tools is opened - then the url points to the exact .js file the caused the js error.

How do you deal with it? Are there any workarounds?

And to be more clear - here are 2 results:

  1. Uncaught ReferenceError: a is not defined index:122 - this was received after fetching a page
  2. Uncaught ReferenceError: a is not defined List.js:122 - this was received after fetching the same page with dev tools opened. This is an expected result - I've put a(); call to the List.js file for testing.

UPD: this is done for functional testing (using selenium webdriver) - I want to capture js errors for further investigations.

like image 538
zerkms Avatar asked Nov 04 '22 00:11

zerkms


2 Answers

Let's pose the following architecture:

window.addEventListener("error", handleException, false);

function handleException(I_sMsg) {

    if (I_sMsg.stack) {
            sMsg = I_sMsg.stack.replaceAll(getBaseURL(), "");
        alert(sMsg);
    } else if (I_sMsg.message) {
        alert(I_sMsg.message);
    }   

    return cancelEvent(I_sMsg);
} 

Now any throw new Error("description"); will go through the first part of the if statement and have a nice stack for you to parse with the urls.

It also works for unexpected exceptions, having as a result the following message (in this case after calling the unexisting bibi() function)

screenshot of an unexpected exception

After further investigation, my framework is using some kind of home made job management (as shown in the stack actually) where every single action belongs to a job.

The job execution method is the following (simplified)

    try {
        oTask.func.apply(oTask.obj, oTask.prms);
    } catch(ex) {
        handleException(ex);
        return false;
    }

So it means every single execution is encapsulated within this single try catch block. As you see, the exception is caught, and passed to the handler. Not the error.

I though it was working in the other file but it was because the call was encapsulated, while within the api.js file directly it was a free call not managed by the framework.

like image 151
Sebas Avatar answered Nov 12 '22 10:11

Sebas


More of a something to try answer really but it might help.

Chrome recently added chrome://inspect/ to the list of handy URLs (see chrome://chrome-urls/ for the complete list). I cannot find the tweet or blog post I read about this unfortunately but I think it was within the last month. The URL works on Chrome 28 for sure.

chrome://inspect/ lists all open tabs with an inspect link which redirects back to the existing open page but also opens DevTools.

I'm thinking that the selenium test could open the site under test in one tab and in a second tab open the inspect page, follow the inspect link back to the test page but this time with DevTools open, allowing window.onerror to capture better errors.

Something like:

document.getElementsByClassName('row')[n].getElementsByTagName('a')[0].click()
like image 32
andyb Avatar answered Nov 12 '22 11:11

andyb