Browser freezes unexpectedly every 10-15 minutes

Question

Browser freezes unexpectedly every 10-15 minutes

I have an application that displays 10 charts using dygraphs to monitor data. The charts are updated by sending ajax requests to 4 different servlets every 5 seconds. However, after approximately 10-15 minutes, my browser crashes with the "aw! snap" message. What could be causing this issue? Could it be a problem with the JavaScript code or the frequency of the requests?

Browsers tested: Firefox and Chrome.

Note: Upon refreshing the browser after the crash, everything works fine again for another 10-15 minutes.

JavaScript 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(){
    // XMLHttpRequest logic here
}

javascript ajax servlets dygraphs

Answer 1

Answer №1

If your Firefox browser is crashing, you can use the about:crashes feature to see why it's happening. One possible reason could be memory leakage from not properly clearing data variables after an AJAX call.

An Update:

It seems like the amount of memory being used (1,923,481 K) is way too high, indicating a definite data leak issue. What operating system are you using? If on a *nix system, running Firefox from the console might provide more information on what's causing the crash. For Windows, there might be other ways to troubleshoot.

You might want to try reducing poll intervals and debug through tools like Firebug or Chrome's debugger to pinpoint where the problem lies. In case of severe crashes, start commenting out portions of code until you isolate the exact cause and then work on fixing it. Good luck!

Answer 2

If your Firefox browser is crashing, you can use the about:crashes feature to see why it's happening. One possible reason could be memory leakage from not properly clearing data variables after an AJAX call.

An Update:

It seems like the amount of memory being used (1,923,481 K) is way too high, indicating a definite data leak issue. What operating system are you using? If on a *nix system, running Firefox from the console might provide more information on what's causing the crash. For Windows, there might be other ways to troubleshoot.

You might want to try reducing poll intervals and debug through tools like Firebug or Chrome's debugger to pinpoint where the problem lies. In case of severe crashes, start commenting out portions of code until you isolate the exact cause and then work on fixing it. Good luck!

Answer 3

Answer №2

It appears that the issue you are experiencing may be related to how you are using dygraphs, as mentioned in your comments. Instead of continually binding new graphs, it seems like you only need to update the data and implement a moving window for better performance. Consider adjusting your updater with this pseudo-JavaScript code snippet:

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

var DATA_WINDOW_SIZE = 1000; // Adjust accordingly.

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() {
    // Make AJAX calls and assign callbacks to handle updates.
    // Once all AJAX calls are complete, restart the timer.

    setTimeout(jubking, 5000); // Repeat every 5 seconds.
}

The key is to limit the amount of data stored by using a window approach to prevent memory consumption issues. By setting a maximum width for your data cache, you ensure that old data points are removed as new ones are added, maintaining a manageable size.

To address multiple asynchronous AJAX calls completion, refer to this resource: How to confirm when more than one AJAX call has completed?

Answer 4

It appears that the issue you are experiencing may be related to how you are using dygraphs, as mentioned in your comments. Instead of continually binding new graphs, it seems like you only need to update the data and implement a moving window for better performance. Consider adjusting your updater with this pseudo-JavaScript code snippet:

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

var DATA_WINDOW_SIZE = 1000; // Adjust accordingly.

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() {
    // Make AJAX calls and assign callbacks to handle updates.
    // Once all AJAX calls are complete, restart the timer.

    setTimeout(jubking, 5000); // Repeat every 5 seconds.
}

The key is to limit the amount of data stored by using a window approach to prevent memory consumption issues. By setting a maximum width for your data cache, you ensure that old data points are removed as new ones are added, maintaining a manageable size.

To address multiple asynchronous AJAX calls completion, refer to this resource: How to confirm when more than one AJAX call has completed?

Answer 5

Answer №3

The suggestion provided above emphasizes the importance of reusing your Dygraph object and utilizing g.updateOptions({file:...}) to minimize memory usage, which is a highly effective approach.

Alternatively, you can opt to use g.destroy() prior to redefining the Dygraph object. This action prompts dygraphs to clear out its internal arrays and DOM references completely. Here's an example:


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

To learn more about preventing Dygraphs memory leaks, please visit:

Answer 6

The suggestion provided above emphasizes the importance of reusing your Dygraph object and utilizing g.updateOptions({file:...}) to minimize memory usage, which is a highly effective approach.

Alternatively, you can opt to use g.destroy() prior to redefining the Dygraph object. This action prompts dygraphs to clear out its internal arrays and DOM references completely. Here's an example:


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

To learn more about preventing Dygraphs memory leaks, please visit:

Browser freezes unexpectedly every 10-15 minutes

Answer №1

Answer №2

Answer №3

Similar questions

Using this functionality on a ReactJS Functional Component

Understanding the inner workings of a Mongoose model without the need for

Send a JSON string directly to Google Cloud Storage without the need for a file upload

Having trouble parsing a JSON object using the fetch method in React while trying to retrieve data from my database

Stop the time-dependent function from executing within a specific condition

Guide to invoking a jQuery function by clicking on each link tab

Polymer: Basic data binding is not functional in the second element

Keeping Ajax active while the PHP script is running is essential

Entering a value into an HTML textbox using Awesomium in VB.NET

Transforming this Rails form into an Ajax/JavaScript/jQuery format will eliminate the need for submission

What is the best way to sequence the functions in an AJAX workflow?

Do not procrastinate when updating the navbar elements while navigating through pages

What is the best way to save Vue state in a cookie while transitioning between form steps in a Laravel application

Prevent the parent component's ripple effect from being activated by the child component

Use ajax to add rows to the second-to-last table

Issue: Upon attempting to connect to a vsftpd server deployed on AWS using the npm module ssh2-sftp-client, all designated authentication methods have failed

Determining the cursor location within a character in a div that is content editable using AngularJS

Guide to automatically loading a default child route in Angular 1.5 using ui-router

Expandable Grid Sections in React MUI

Manipulate the value of the <input> element when focused through JavaScript