Browser crashes after 10-15 mins

Question

In my app I'm displaying 10 charts (charts are from dygraphs.) to monitor data. For displaying charts I'm getting data from my sever by sending ajax request to 4 servlets on every 5 seconds. After 10-15 mins (don't know exact time.) my browser crashes saying "aw!! snap." What could be the reason? Is it javascript that is causing it? or is it because I'm sending request every 5 seconds?

Browser tested: Firefox and Chorme.

Note:- When I refresh the browser after crash it again works fine for 10-15 mins.

---

JS code:

var i=0;
var loc = new String();
var conn = new String();
var heapUsage = new String();
var cpuUsage = new String();
var thrdCnt = new String();
var heapUsageConsole = new String();
var cpuUsageConsole = new String();
var thrdCntConsole = new String();
var user = new String();
var MemTotal = new String();
function jubking(){
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var url = "MonitorDBServlet";
    xmlhttp.open("POST", url, false);
    xmlhttp.send(null);
    var str = xmlhttp.responseText;
    var strArr = str.split(",");
    url = "MonitorTomcatServlet";
    xmlhttp.open("POST", url, false);
    xmlhttp.send(null);
    var appstr = xmlhttp.responseText;
    var appArr = appstr.split(",");
    url = "MonitorConsoleTomcatServlet";
    xmlhttp.open("POST", url, false);
    xmlhttp.send(null);
    var appstrConsole = xmlhttp.responseText;
    var appArrConsole = appstrConsole.split(",");
    url = "CpuMemoryServlet";
    xmlhttp.open("POST", url, false);
    xmlhttp.send(null);
    var statesStr = xmlhttp.responseText;
    var states = statesStr.split(",");
    if(i>30){
        loc = loc.substring(loc.indexOf("\n")+1);
        loc += i+","+strArr[0]+","+strArr[1]+"\n";
            //--- Do same thing all other var
} else {
        loc += i+","+strArr[0]+","+strArr[1]+"\n";
            //--- Do same thing all other var
    }
    document.getElementById("dbSize").innerHTML = strArr[3];
    document.getElementById("HeapMemoryUsageMax").innerHTML = appArr[1];
    document.getElementById("HeapMemoryUsageMaxConsole").innerHTML = appArrConsole[1];
    g = new Dygraph(document.getElementById("dbLocks"),
        ",locksheld,lockswait\n"+loc+"");
    g = new Dygraph(document.getElementById("activeConnection"),
                    ",Connections\n"+conn+"");
    g = new Dygraph(document.getElementById("example2"),
                       ",heapUsage\n"+heapUsage+"");
    g = new Dygraph(document.getElementById("example3"),
                       ",cpuUsage\n"+cpuUsage+"");
    g = new Dygraph(document.getElementById("example4"),
                       ",thread,peakThread\n"+thrdCnt+"");
    g = new Dygraph(document.getElementById("example6"),
                       ",heapUsage\n"+heapUsageConsole+"");
    g = new Dygraph(document.getElementById("example7"),
                       ",\n"+cpuUsageConsole+"");
    g = new Dygraph(document.getElementById("example8"),
                       ",thread,peakThread\n"+thrdCntConsole+"");
    g = new Dygraph(document.getElementById("cpuStates"),
                       ",user,system,nice,idle\n"+user+"");
    g = new Dygraph(document.getElementById("memStates"),
                     ",MT,MF,B,C,ST,SF\n"+MemTotal+"");
    i = i + 1;
    setTimeout("jubking()", 5000);
}

Answer 1

I suspect that your dygraphs usage is, as you note in your comments, the source of your trouble. It looks like you're binding new graphs over and over again when you only want to update the data, using a moving window for the data would also help. Try reworking your updater to work like this pseudo-JavaScript:

var graphs = {
    dbLocks: {
       graph: new DyGraph(/* ... */),
       data:  [ ]
    },
    activeConnection: {
        graph: new DyGraph(/* ... */),
        data:  [ ]
    },
    // etc.
};

var DATA_WINDOW_SIZE = 1000; // Or whatever works for you.

function update(which, new_data) {
    var g = graphs[which];
    g.data.push(new_data);
    if(g.data.length > DATA_WINDOW_SIZE)
        g.data.shift();
    g.graph.updateOptions({ file: g.data });
}

function jubking() {
    // Launch all your AJAX calls and bind a callback to each
    // one. The success callback would call the update() function
    // above to update the graph and manage the data window.

    // Wait for all the above asynchronous AJAX calls to finish and
    // then restart the timer for the next round.
    setTimeout(jubking, 5000);
}

The basic idea is to use window on your data with a reasonable maximum width so that the data doesn't grow to chew up all your memory. As you add a new data point at the end of your data cache, you drop old ones off the other end once you hit your maximum comfortable size.

You can find some techniques for waiting for several asynchronous AJAX calls to finish over here: How to confirm when more than one AJAX call has completed? (disclosure: yes, that's one of my other answers).

Answer 2

You can use about:crashes in FF to view the specific reason for your crash. As mentioned by others, you could be leaking memory if you're caching off data (assigning it to a variable) returned by your AJAX call and not clearing it when the next call is made.

Edit:

Just saw your comment - 1,923,481 K is definitely too much - you're leaking data somewhere. What OS are you running? If you run FF from console in *nix, you usually get some form of a dump into console when something's going wrong (not sure about Windows).

You could possibly try decreasing your poll intervals to once every few seconds and step through the script using Firebug or Chrome's debugger to see what's happening. Worst case, start commenting things out until you figure out exactly what is making your app crash. And then, figure out a way to fix it :)

Answer 3

The answer above advocates re-using your Dygraph object and calling g.updateOptions({file:...}) to reduce memory usage. This is a great way to do it.

The other way is to call g.destroy() before you redefine the Dygraph object. This will make dygraphs clear out all of its internal arrays and DOM references. Example:

g = new Dygraph(...);
g.destroy();
g = new Dygraph(...);

Read more here: http://blog.dygraphs.com/2012/01/preventing-dygraphs-memory-leaks.html