ベターエクスプレスエラー

Better-express-error

express 開発中にエラーが発生した場合、通常はエラーページに直接表示されるか、プロダクション環境では404や500ページにリダイレクトされます。

これは特に珍しいことではありませんが、正直なところ、こんなページを見たら嬉しいですか？

Ruby on Rails 開発に慣れているエンジニアであれば、多少なりとも better_errors や Rails に内蔵されているエラートレースページを使ったことがあるでしょう。

しかし、express には better error に類似したパッケージを見たことがなく、しばしばこのような醜いエラーメッセージを見上げることになります。

そこで、簡単なミドルウェアを作成してこの問題を解決しました。実質的には、better errors の express 実装です。

エラーメッセージの分析

TypeError: range out of bound. Please check http://kjj6198.github.io for more information.
at app.get (/Users/kalan/code/express-error/server/app.js:17:9)
at Layer.handle [as handle_request] (/Users/kalan/code/express-error/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/kalan/code/express-error/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/Users/kalan/code/express-error/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/Users/kalan/code/express-error/node_modules/express/lib/router/layer.js:95:5)
at /Users/kalan/code/express-error/node_modules/express/lib/router/index.js:281:22
at Function.process_params (/Users/kalan/code/express-error/node_modules/express/lib/router/index.js:335:12)
at next (/Users/kalan/code/express-error/node_modules/express/lib/router/index.js:275:10)
at jsonParser (/Users/kalan/code/express-error/node_modules/body-parser/lib/types/json.js:109:7)
at Layer.handle [as handle_request] (/Users/kalan/code/express-error/node_modules/express/lib/router/layer.js:95:5)

よく観察すると、エラーメッセージのフォーマットは非常に規則的です。まず、最初の行はエラーの名前とメッセージで、通常は最も重要な情報です。2 行目以降はスタックトレースです。at … は特定の関数の呼び出しを示し、カッコ内にはファイル名と行数、行の情報が含まれています。

エラーメッセージを簡単に分析した後、純粋なテキストをより有用な情報に変換できます。split('\n') を使用し、文字列に基づいて簡単な正規表現マッチングを行うことで、ファイル名と行数を分けることができます。

エラーの表示

最初の行のエラーメッセージは通常、最も重要な情報です。なぜなら、プログラムがそこでエラーを吐き出しているからです。したがって、最初の行のエラーメッセージは目立つ場所に配置し、ハイライトします。

2 行目以降のエラーメッセージは、色とサイズを使ってファイル名、行数、および呼び出される関数名を示します。

前のような一塊の黒い文字と比べて、こうしたシンプルな整理によって、開発者は何が起こったのかを一目で理解できるようになります。

ファイルの内容を表示

しかし、エラーメッセージを表示するだけではなく、対応するファイルの内容や文脈も同時に表示したいと思います。そのため、右側にはエラーメッセージ中のファイル名と行数を利用して、対応するファイルの内容を表示します。

Node.js に関しては、fs.readFileSync を使えば十分です。

function(filename, line, row) {
  const content = fs.readFileSync(filename);
  content.toString()
  	.split('\n')
  	.slice(line - 5, line + 5)
  	.map(content => `<span>${content}</span>`)
  	.join('\n');
}

ここでは非常にシンプルな方法で、前後5行を直接表示しています。より賢い方法としては、AST などの技術を用いて、該当する関数の内容のみを表示することもできますが、今回は前後5行のコードをそのまま表示します。

いくつかの調整と修正を加えた結果は、こんな感じです：

シンプルなハイライトを通じて、開発者がエラーの場所を即座に把握できるようになります。

REPL

エラーを表示するだけでなく、このページに簡単なプログラムを入力できる機能も追加したいと考えています。問題点を確認した後、実際にコードを修正するためです。

Node.js には、VM モジュールがあり、これを使うことで V8 のバーチャルマシンコンテキストで指定されたコードを実行できます。このモジュールを使えば、REPL のような機能を実現できます！

const debugContext = vm.createContext({
  request: req,
  response: res,
  util: require("util"),
  Buffer: require("buffer").Buffer,
  stream: require("stream"),
  console: {
    log: util.format,
  },
  clear: "",
})

公開したい変数をコンテキストに渡し、POST メソッドでフロントエンドのコードを読み取ることで、デバッグが非常に便利になります。

（ここではさらに調整が必要です）

全部統合！

すべてを統合した結果、ページはこのようになります。

元の純粋なテキストに比べて、ページのスタイルを調整し、REPL 機能を実装するためにいくらかの手間がかかりましたが、デバッグのプロセスをよりスムーズにしました。

結論

express-error

詳細な実装はこのリポジトリにあります。最近少し時間があれば、実装をミドルウェアの形式に抽象化して、皆さんが使いやすくする予定です。また、全体のレイアウトやコードハイライトの部分を徐々に最適化し、プロセスと画面をよりスムーズにしていきます。どれくらいの時間がかかるかはわかりませんが、XD

さまざまな提案があれば、issue を提出してください。