1

I have a single-page-app built with backbone.js that has multiple views in it, and the app often crashes when transitioning between views. When the app crashes, the browser itself does not crash, just the app, so the browser displays a message like Chrome's "Oops" screen. This crash forces the user to his 'Reload' to refresh the page, so whatever they were working on was lost if they hadn't saved. The crash is intermittent and hard to reproduce.

Code:

To accomplish these transitions without a navigation tab, I create an event-aggregator (or a simple 'state-machine') in the router like so:

eventAggregator: _.extend({}, Backbone.Events),

I also set-up the router to listen for multiple events, for example:

this.eventAggregator.on("moveToPage1", function () {
                this.Navigate("page1", {trigger: true});
            });
this.eventAggregator.on("moveToPage1", function () {
                this.Navigate("page2", {trigger: true});
            });

So the routes look something like this:

routes: {
            "page1": "viewPage1",
            "page2": "viewPage2",
},

When those routes are navigated-to I do some basic stuff to hide modals and showing/hiding of the views, and refresh some kendoUI grids that are on some of the views:

viewPage1: function(){
    $(window).trigger('closeModal');
    $(window).trigger('minimize');
    /* hide all the views */
    _.each(this.views, function (view) {
        view.$el.hide();
    });
    page1.$el.show();
    //for Kendo UI grids            
    $(window).trigger("realWindowResize"); 
    $(window).trigger("refreshGrid");
}

Then I pass the 'eventAggregator' object into each view. Then the view can have an event-hookup for a button that will trigger the event like so:

eventAggregator.trigger("moveToPage2");

Other thoughts:

(Not sure if any of this is useful information, but I thought it might help explain things I've considered, or looked into to help me solve this issue)

  • Two of the pages are normal backbone views, and 2 of them are views with Kendo UI grids in them (not sure if that is relevant or not). We do refresh the grids when the page transitions.
  • I have done some memory profiling and monitored the memory footprint of the app, and there's no evidence of a memory leak.
  • When the app crashes there is usually at least 1 ajax call that is left 'pending' because it was sent just before the app crashed.
  • One tester believes he saw it crash when pressing a 'Cancel' button. This would be one unique test result, and it is interesting because the Cancel button does not use the event-pattern shown above, it simply has the attribute href="#homePage" in the html.
  • Sometimes the bug seems easy to reproduce after leaving the browser idle for a period of time, but not always. It is also reproducible at times while under heavy use. (In both cases, the memory profiling shows nothing remarkable).
  • If I litter my javascript code with console.log() statements, there is usually one statement that is always printed out just before the crash. It is some basic code for handling the realWindowResize event we created. However, if I remove the code to raise that event, the app will still crash (seems to have the same frequency as before), even though that code is no longer being touched. This leads me to believe this is some weird timing issue...

What could be causing a crash of this type? Any ideas how I can further debug the issue? Thanks for the help...

4

0 回答 0