Node.js を使っていて 404 エラーや 500 エラーなどが発生した場合に表示されるエラーページをカスタマイズできないか、と思って挑戦してみました。
今回挑戦した環境では Node.js にフレームワークの Express と、テンプレートエンジンに EJS を使いました。エラーページを EJS で作ることを想定しています。
まず、JavaScript のコードはこんな感じです:
app.js
上記を補足すると、Express でルーティングを2つ定義しています。1つめがドキュメントルート(/)へのアクセスで、この場合は正常な処理として(後述の)index.ejs を表示します。
2つめは /err へのアクセスで、こちらの場合はわざと 500 エラーを発生させています(index.ejs でページを表示させるような記述にしていますが、実際にはこの中で使われている novalue という変数が未定義なので、そこで 500 エラーが発生するようにしています)。
ルーティングとしてはこの2つ(/ と /err)だけを定義しているので、これら以外のパス(例えば /home)にアクセスがあった場合は 404 エラーが発生します。404 エラーが発生した場合の処理としては err404.ejs というテンプレートを使って、アクセスしたパス(/home)が存在していない、という旨のエラーページを表示します。
最後に 500 エラーが発生した場合の処理を定義しています。ここでは err500.ejs というテンプレートを使って、エラーの内容をあわせて表示します。上記で /err ページにアクセスすると 500 エラーが発生するので、この err500.ejs のページが表示されることになります。
次に上記で使うことにした3種類のテンプレート(index.ejs, err404.ejs, err500.ejs)を用意します。それぞれ以下のような内容にしました:
index.ejs
err404.ejs
err500.ejs
app.js ではこれらのテンプレートファイルが templates/ フォルダに存在していることを前提に参照するようにしています。したがって templates/ フォルダを作って、その中にこれら3つの .ejs ファイルを格納しておきます。これで準備OK。
実際に動かして試してみました。まずは正常系、/ へのアクセスは普通に問題なくできます:

次に /home にアクセスして、わざと 404 エラーを発生させてみた時の画面です。err404.ejs で定義されたテンプレートを使って期待通りにエラーページが表示されています:

最後に /err にアクセスして、わざと 500 エラーを発生させてみた時の画面です。こちらも err500.ejs で定義されたテンプレートを使って期待通りにエラー内容が表示されています:

上記コードのサンプルをこちらに用意しました:
https://github.com/dotnsf/nodejserror
これで Node.js でもカスタムエラーページを作れることがわかりました。
今回挑戦した環境では 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 でルーティングを2つ定義しています。1つめがドキュメントルート(/)へのアクセスで、この場合は正常な処理として(後述の)index.ejs を表示します。
2つめは /err へのアクセスで、こちらの場合はわざと 500 エラーを発生させています(index.ejs でページを表示させるような記述にしていますが、実際にはこの中で使われている novalue という変数が未定義なので、そこで 500 エラーが発生するようにしています)。
ルーティングとしてはこの2つ(/ と /err)だけを定義しているので、これら以外のパス(例えば /home)にアクセスがあった場合は 404 エラーが発生します。404 エラーが発生した場合の処理としては err404.ejs というテンプレートを使って、アクセスしたパス(/home)が存在していない、という旨のエラーページを表示します。
最後に 500 エラーが発生した場合の処理を定義しています。ここでは err500.ejs というテンプレートを使って、エラーの内容をあわせて表示します。上記で /err ページにアクセスすると 500 エラーが発生するので、この err500.ejs のページが表示されることになります。
次に上記で使うことにした3種類のテンプレート(index.ejs, err404.ejs, err500.ejs)を用意します。それぞれ以下のような内容にしました:
index.ejs
↑単に index と表示されるだけのシンプルなページ<html> <head> <title>index</title> </head> <body> <h1>index</h1> </body> </html>
err404.ejs
↑ "(エラーがあったパス)is not defined nor found." というエラーメッセージが表示されるページ<html> <head> <title>err404</title> </head> <body> <h1>err404</h1> <%= path %> is not defined nor found. </body> </html>
err500.ejs
↑ "Error: (エラー内容)" というエラーメッセージが表示されるページ<html> <head> <title>err500</title> </head> <body> <h1>err500</h1> Error: <%= error %> </body> </html>
app.js ではこれらのテンプレートファイルが templates/ フォルダに存在していることを前提に参照するようにしています。したがって templates/ フォルダを作って、その中にこれら3つの .ejs ファイルを格納しておきます。これで準備OK。
実際に動かして試してみました。まずは正常系、/ へのアクセスは普通に問題なくできます:

次に /home にアクセスして、わざと 404 エラーを発生させてみた時の画面です。err404.ejs で定義されたテンプレートを使って期待通りにエラーページが表示されています:

最後に /err にアクセスして、わざと 500 エラーを発生させてみた時の画面です。こちらも err500.ejs で定義されたテンプレートを使って期待通りにエラー内容が表示されています:

上記コードのサンプルをこちらに用意しました:
https://github.com/dotnsf/nodejserror
これで Node.js でもカスタムエラーページを作れることがわかりました。
コメント