Node.js + Express + EJS でエラーページハンドリング : まだプログラマーですが何か？

Node.js を使っていて 404 エラーや 500 エラーなどが発生した場合に表示されるエラーページをカスタマイズできないか、と思って挑戦してみました。

今回挑戦した環境では Node.js にフレームワークの Express と、テンプレートエンジンに EJS を使いました。エラーページを EJS で作ることを想定しています。

まず、JavaScript のコードはこんな感じです：

app.js

// app.js
var express = require( 'express' );
var app = express();

//. EJS テンプレートエンジン
app.set( 'views', __dirname + '/templates' );
app.set( 'view engine', 'ejs' );

//. / へのアクセスは正常にできる
app.get( '/', function( req, res ){
  res.render( 'index', {} );
});

//. /err へのアクセスは 500 エラーとする
app.get( '/err', function( req, res ){
  res.render( 'index', { value: novalue } ); //. novalue 変数が未定義なので 500 エラーが発生する
});

//. 有効なルーティングを上記に記述
//. /, /err 以外のパスは 404 エラー

//. 404 エラーが発生した場合、
app.use( function( req, res, next ){
  res.status( 404 ); //. 404 エラー
  res.render( 'err404', { path: req.path } ); //. 404 エラーが発生したパスをパラメータとして渡す
});

//. 500 エラーが発生した場合、
app.use( function( err, req, res, next ){
  res.status( 500 ); //. 500 エラー
  res.render( 'err500', { error: err } ); //. 500 エラーの内容をパラメータとして渡す
});

var port = 3000;
app.listen( port );
console.log( 'server started on ' + port );

上記を補足すると、Express でルーティングを２つ定義しています。１つめがドキュメントルート（/）へのアクセスで、この場合は正常な処理として（後述の）index.ejs を表示します。

２つめは /err へのアクセスで、こちらの場合はわざと 500 エラーを発生させています（index.ejs でページを表示させるような記述にしていますが、実際にはこの中で使われている novalue という変数が未定義なので、そこで 500 エラーが発生するようにしています）。

ルーティングとしてはこの２つ（/ と /err）だけを定義しているので、これら以外のパス（例えば /home）にアクセスがあった場合は 404 エラーが発生します。404 エラーが発生した場合の処理としては err404.ejs というテンプレートを使って、アクセスしたパス（/home）が存在していない、という旨のエラーページを表示します。

最後に 500 エラーが発生した場合の処理を定義しています。ここでは err500.ejs というテンプレートを使って、エラーの内容をあわせて表示します。上記で /err ページにアクセスすると 500 エラーが発生するので、この err500.ejs のページが表示されることになります。

次に上記で使うことにした３種類のテンプレート（index.ejs, err404.ejs, err500.ejs）を用意します。それぞれ以下のような内容にしました：

index.ejs

<html>
<head>
<title>index</title>
</head>
<body>
<h1>index</h1>
</body>
</html>

↑単に index と表示されるだけのシンプルなページ

err404.ejs

<html>
<head>
<title>err404</title>
</head>
<body>
<h1>err404</h1>
<%= path %> is not defined nor found.
</body>
</html>

↑ "（エラーがあったパス）is not defined nor found." というエラーメッセージが表示されるページ

err500.ejs

<html>
<head>
<title>err500</title>
</head>
<body>
<h1>err500</h1>
Error: <%= error %>
</body>
</html>

↑ "Error: （エラー内容）" というエラーメッセージが表示されるページ

app.js ではこれらのテンプレートファイルが templates/ フォルダに存在していることを前提に参照するようにしています。したがって templates/ フォルダを作って、その中にこれら３つの .ejs ファイルを格納しておきます。これで準備ＯＫ。

実際に動かして試してみました。まずは正常系、/ へのアクセスは普通に問題なくできます：