#402 Better Errors & RailsPanel

今回のエピソードでは、開発時に役に立つ2つのツールを紹介します。プロジェクト管理のためのRailsアプリケーションをサンプルにして説明します。プロジェクト一覧のページは正しく表示されますが、個別のプロジェクトを見るためのリンクをクリックするとエラーメッセージが表示されます。

nilに対して未定義のempty?メソッドが呼び出されていて、このエラーはチェックボックを作成しようとするときに発生するようです。ソースコードを見てもempty?を呼び出しているような部分は特に見当たりません。この例外ページを改善して、エラーが投げられた場所をわかりやすくできればいいのですが。

Better Errorsを使用する

そこで、今回のエピソードで扱う1つ目のツールBetter Errorsを紹介します。このツールによって、エラーページが今までよりもずっと便利になり、さらに見た目もきれいになります。それでは既存のアプリケーションを使って試してみましょう。

アプリケーションにこのgemを追加するときには、developmentグループのみに入れるようにして、production環境ではアプリケーションのエラーの詳細を表示させないようにすることが重要です。いつものようにbundleコマンドを実行してgemをインストールします。

group :development do
  gem 'better_errors'
end

サーバを再起動してページをリロードすると、Better Errorsがエラーを解析して、エラーが発生した場所を正確に知ることができます。

関係するソースコードが見やすくシンタックスハイライトされて、問題を起こしているempty?メソッドを見ることができます。このソースコードの上にはstack traceがあり、行をクリックするとstackのその部分のソースコードが表示されます。あるいはRailsアプリケーションの全体について、stack traceの一部であるRailsの本体あるいはgemのどの部分についてもエラーを表示させることができます。

便利な副次的効果として、Railsがどのようにして動いているかをよりよく理解するための手助けにもなります。今回のエラーについては、コードの中でcheck_boxメソッドが起動されていて、stack traceをたどっていくとこのメソッドがフォームビルダから呼び出されていることがわかり、引き続き処理の各ステップを一つずつ追っていくことで何が起こっているのかをよく理解することができます。エラーページの一番下に、使用されたパラメータやクッキーを含んだリクエストについての情報が表示されます。このgemの機能はこれだけではありません。エラーページを見ると、機能を増やすためにbinding_of_callerというgemを追加するというtipが表示されているので、これを試してみましょう。このgemも先ほどと同じようにdevelopmentグループに入れて、bundleコマンドを実行してインストールを行ないます。

group :development do
  gem 'better_errors'
  gem 'binding_of_caller'
end

このgemを利用する場合は、悪意を持ったユーザがこの経路からあなたのRailsアプリケーションにアクセスすることがないよう、安全なネットワーク上にいることを確認するようにしてください。アプリケーションを再起動して再度ページをリロードすると、ローカル変数やインスタンス変数を含んだ多くの情報を得ることができます。

empty?の代わりにpresent?を呼び出すべきで、この変更を加えるためにファイル名をクリックすると、そのファイルがテキストエディタで開きます。ここでは単に修正を行なうだけですが、実際のアプリケーションではまず失敗するテストを書いてこのバグが修正されて再度発生しないことを確認します。

Better ErrorsでAJAXリクエストを扱う

我々のアプリケーションにはもう一つのバグがあります。タスクのチェックボックスをクリックして完了にしたら、これらがすべてAJAXリクエストで処理されて、自動的に「完了したタスク」のセクションに移動して、データベースのレコードが更新されるはずです。しかしこれを行なってもタスクは移動せず、developmentログを見るとAJAXリクエストの間に例外が発生しています。Better Errorsを介してこの例外を確認して操作することができれば便利ですが、これは/__better_errorsというパスにアクセスすることで可能です。

これは最後に発生した例外を表示していて、development logにあるエラーと一致します。コンソールを使って変数の値を見ると、それが“1”という値を含んだ文字列であることがわかります。これによって、この値に対してzero?を呼び出したときに例外を得る理由がわかりました。呼び出す前にintegerに変換する必要があります。再度リンクをクリックしてテキストエディタで関連のファイルを開き、このエラーを修正します。タスクを完了としてチェックすると、正しく別のリストに移動します。

Better Errorsの説明の最後に、テキストエディタを開くリンクについていくつか留意点をあげておきます。これは内部のgemのページに対しても機能するので、例えばassign_attributesがActiveRecordでどう機能しているのかを知りたいというような場合にも、自分が書いたソースコードと同じようにリンクをクリックして表示させることができます。Better Errorsが使用するエディタを変更する場合には、アプリケーションに新規の初期化ファイルを作成してBetterErrors.editor属性を設定します。

BetterErrors.editor = :sublime if defined? BetterErrors

ここで設定できる値は、Sublime Text用の:sublimeなどいくつかあります。この値の前にBetterErrorsが定義されていることを確認してください。RDocにこれについての詳細情報があり、それによるとここでは文字列やさらにカスタマイズしたい場合にはprocオブジェクトを使用することもできます。

Rails Panel

今回紹介するもう一つのツールはRails Panelです。これはChrome用の機能拡張でブラウザに開発用ログを追加します。これはChrome Web Storeからインストールできますが、合わせてアプリケーション側にもMeta Requestというgemを追加します。使用した他のgemと同じようにdevelopmentグループの中に追加して、bundleコマンドを実行してインストールします。

group :development do
  gem 'better_errors'
  gem 'binding_of_caller'
  gem 'meta_request'
end

アプリケーションを再起動してChromeの開発用パネルを開くと新たにRailsPanelタブが表示されています。アプリケーション内のいろいろなページにアクセスすると、パネル内に各ページに対応したエントリが表示されます。これはAJAXリクエストでも同様に機能します。

このパネルには各リクエストについてのあらゆる種類の詳細情報が含まれていて、形式、処理時間、パラメータ、DBクエリ、出力したビューなどを見ることができます。Better Errorsでは、ビューをクリックすることでテキストエディタを開きます。使用するエディタをカスタマイズするには、Chromeのプレファレンスを開いてTextMate、MacVim、Sublime Textの中から選択します。

シンプルなツールですが、この種の情報をすべて、ログファイルを別途開くことなくブラウザでインラインで確認できるのはとても便利です。