AJAX 要求でサーバー側で例外発生したら、その例外情報ページをブラウザに表示する : @jsakamoto

2012年 10月 09日

AJAX 要求でサーバー側で例外発生したら、その例外情報ページをブラウザに表示する

ASP.NET MVC における、AJAX による "部分更新"

ASP.NET MVC3 や MVC4 で AJAX によってページの一部分だけをページ遷移せずに更新するような場合、knockout.js などを使ってクライアント側テンプレートとバインドする実装もあるだろうし、jQuery を使うこともあるだろう。

ここでは jQuery の $.ajax() や、jquery.unobtrusive-ajax.js を利用しての部分更新を行う場合をテーマとして話を進める。

$.ajax() を使う場合

$.ajax() を使う場合、クライアント側スクリプトのコードは、下記のようになるだろう。

$("#fiz").click(function(){

  $.ajax("/Foo/Bar")

    .done(function(html){

      $("#buz").html(html);

    });

});

id=fiz の要素がクリックされると処理が始まる。

FooController の Bar メソッド宛に XHR 要求が送信され、Bar メソッドでは return Partial("ViewName") で HTML 片を応答として返すイメージだ。

そうして返された HTML 片を、id=buz 要素内のコンテンツとして表示するわけである。

例外が発生しても情報が表示されない

しかしこの実装だけだと、万が一、サーバー側で予期しない例外が発生した場合、ユーザーインターフェース側には何の応答も反応もない。

つまり、いくら #fiz 要素をクリックしても、何も起きない状態になる。

これは、XHR要求に対するサーバー側からのエラー返信をどう処理するか、何も指定していないためだ。

とくにアプリケーションを開発している最中は、ASP.NET による、スタックトレースや例外発生個所のソース行や例外オブジェクトの情報を記載したHTMLコンテンツが返されているはずだ。
このエラー情報ページが見えないのは、開発効率上よろしくない。

AJAX でも例外情報ページを表示する

ASP.NET の例外情報ページがサーバー応答として返された場合、そのときの HTTP ステータスは 500 が返ってきているはずだ。

そして AJAX 処理に使用した XHR オブジェクトは、返されてきた HTML コンテンツを保持している。

そこで、$.ajax() 処理において、HTTP 500 が返ってきたら、同時に返されたコンテンツを、その JavaScript コードにて、ページに反映させてみることにした。

$("#fiz").click(function() {

  $.ajax("/Foo/Bar")

    .done(function(html) {

      $("#buz").html(html);

    })

    .fail(function(jqXHR) {

      if (jqXHR.status == 500) {

        document.head.innerHTML = "";

        document.body.innerHTML = jqXHR.responseText;

      }

    });

});

こんな感じ。

"<html>" とか "<head>" などを含む文字列を、強引に body 要素の innerHTML に放り込んでいるのだが、どうやらブラウザがかなりがんばって解釈してくれているようで、ちゃんと ASP.NET 例外情報ページが表示された。

少なくとも、手元の IE10、Firefox15、Chrome22 ではうまく表示できたようだ。

デモ

以上の動作を確かめられるよう、AppHarbor にデモアプリを配置しておく。

URL は以下。
http://detectdebugerrorpage.apphb.com/

"use AJAX" のチェックを On にして、"HTTP 500" のリンクをクリックすると、ASP.NET 例外情報ページの HTML ソーステキストがとても読めたものじゃない状態で alert として表示されるが、 AJAX 要求でサーバー側で例外発生したら、その例外情報ページをブラウザに表示する_d0079457_9333027.png

AJAX 要求でサーバー側で例外発生したら、その例外情報ページをブラウザに表示する_d0079457_9333027.png

"error page support" のチェックを On にして "HTTP 500" のリンクをクリックすると、ASP.NET 例外情報ページがブラウザ内に表示されるようになる。 AJAX 要求でサーバー側で例外発生したら、その例外情報ページをブラウザに表示する_d0079457_9333898.png

AJAX 要求でサーバー側で例外発生したら、その例外情報ページをブラウザに表示する_d0079457_9333898.png

ソースコード公開の手配はしていないが、直接 JavaScript コード http://detectdebugerrorpage.apphb.com/scripts/demo.js を見ていただければ十分かな、と思う。

だがしかし。

しかしながら、今回の措置ではまだ問題がある。

今回は開発時における対応措置だが、いざ本番リリースとなると、通常は ASP.NET 例外情報ページは表示させないように作るはずだ。

つまり、web.config 中の、system.web - customErrors セクションで、mode 属性を On (ないしは RemoteOnly) に設定し、さらに defaultRedirect 属性に例外発生時の HTML コンテンツの URL を記述したりすることだろう。

はたまた、ASP.NET MVC のグローバルフィルタ設定で、HandleErrorAttribute 属性を適用し、例外発生時は ~/Views/Shared/Error.cshtml を表示させるかもしれない。

いずれにせよ、例外発生しても、何がしかの HTML を返すようにするはずだ。

ここで最大の問題は、この、本番環境において、
例外発生時に表示するページの HTTP ステータスが 200 である
ことだ。

つまり、$.ajax() の結果として、HTML 片がサーバー応答として返されることを期待しているコードの場合、
正常動作の結果として返ってきた HTML なのか、
例外発生してしまっての結果として返ってきた(エラーメッセージページの)HTML なのか、
区別がつかない
のだ。

先の例でいえば、本番における例外発生時、id=buz 要素内にエラーメッセージページのコンテンツが表示されてしまうわけだ。

これはどうしたものだろう?
他の皆さんは一体どう対処されているのか、大変気になるところである。
　　
　

by developer-adjust | 2012-10-09 09:30 | .NET | Comments(0)

<< 第18回 Ohotech 勉強...

input:file 要素を表... >>


	ファン申請 ※ メッセージを入力してください

@jsakamoto