1

複数のビューを持つ backbone.js で構築された単一ページ アプリがあり、ビュー間を移行するときにアプリがクラッシュすることがよくあります。アプリがクラッシュしてもブラウザ自体はクラッシュせず、アプリだけがクラッシュするため、Chromeの「おっと」画面のようなメッセージがブラウザに表示されます。このクラッシュにより、ユーザーはページを更新するために「リロード」を余儀なくされるため、保存していなかった場合、ユーザーが作業していたものはすべて失われます。クラッシュは断続的で、再現が困難です。

コード：

ナビゲーション タブを使用せずにこれらの遷移を実行するには、次のようにルーターにイベント アグリゲーター (または単純な「ステート マシン」) を作成します。

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

また、複数のイベントをリッスンするようにルーターをセットアップしました。次に例を示します。

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

したがって、ルートは次のようになります。

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

これらのルートがナビゲートされると、いくつかの基本的なことを実行して、モーダルを非表示にし、ビューを表示/非表示にし、いくつかのビューにあるいくつかの kendoUI グリッドを更新します。

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");
}

次に、'eventAggregator' オブジェクトを各ビューに渡します。次に、ビューは、次のようにイベントをトリガーするボタンのイベント フックアップを持つことができます。

eventAggregator.trigger("moveToPage2");

他の考え：

（これが有用な情報かどうかはわかりませんが、この問題を解決するために私が検討したこと、または調査したことを説明するのに役立つと思いました）

  • ページのうち 2 つは通常のバックボーン ビューで、そのうちの 2 つは Kendo UI グリッドを含むビューです (関連があるかどうかは不明です)。ページが遷移するときにグリッドを更新します。
  • いくつかのメモリ プロファイリングを行い、アプリのメモリ フットプリントを監視しましたが、メモリ リークの証拠はありません。
  • アプリがクラッシュすると、通常、少なくとも 1 つの ajax 呼び出しが「保留中」のままになります。これは、アプリがクラッシュする直前に送信されたためです。
  • あるテスターは、「キャンセル」ボタンを押すとクラッシュするのを見たと信じています。これは 1 つのユニークなテスト結果であり、興味深いのは、[キャンセル] ボタンが上記のイベント パターンを使用せず、単に href="#homePage"html に属性を持っていることです。
  • ブラウザを一定時間アイドル状態にしておくと、バグが簡単に再現できるように見えることがありますが、常にそうであるとは限りません。また、頻繁に使用している場合でも再現可能です。(どちらの場合も、メモリー・プロファイリングには目立ったものはありません)。
  • JavaScript コードにconsole.log()ステートメントを散らかしている場合、通常、クラッシュの直前に常に出力されるステートメントが 1 つあります。realWindowResizeこれは、作成したイベントを処理するための基本的なコードです。ただし、そのイベントを発生させるコードを削除すると、そのコードに触れていなくても、アプリは引き続きクラッシュします (以前と同じ頻度のようです)。これは、これが奇妙なタイミングの問題であると私に信じさせます...

このタイプのクラッシュの原因は何ですか? 問題をさらにデバッグする方法はありますか? 助けてくれてありがとう...

4

0 に答える 0