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

A guide on extracting split values and assigning them to individual variables

Utilizing onClick with material-ui button - functioning flawlessly for a single interaction

npm ERROR! 404 Content removed by unidentified source on August 8, 2022 at 09:20:35.527 UTC

Instead of automatically playing, Youtube videos either remain idle or display suggested videos

The functionality of ng-click and ng-submit seems to be malfunctioning

What is the best way to incorporate a class creation pattern in Typescript that allows one class to dynamically extend any other class based on certain conditions?

Saving a JSON object to a JSON file

How to efficiently use Yii2 and Ajax to insert data into a table twice in one

Is it possible for the Chrome mobile camera to take up the full screen size on

Using jQuery to create dynamic elements that fade out with timers

Removing a modal div element in React after navigating

Fetch solely the metadata from HTML5 video and audio files

Enabling the submit button only when text is entered in the text fields using jQuery

Add an item to an array that contains objects within an array of other objects

Extracting live TV channels from an m3u file by differentiating them from VOD content

Problem with reordering rows in a PHP DataTable

Ways to bring in external javascript files in reactjs

parsing an array using jQuery's getJSON

What could be causing the NoScript tag to malfunction across different web browsers?

Automatically add values after successful Facebook login