node.jsでEJSにフラッシュメッセージが表示できない

Question

app.use(expressSession({
  secret: "secret-passcode-tetsu",
  resave: false,
  saveUninitialized: false,
  cookie: {
    maxAge:  60*1000  //一分
  }
}));

app.use(connectFlash());

app.use((req, res, next) => {
  res.locals.flashMessages = req.flash();
**  console.log(res.locals.flashMessages);**　　ここのログを添付
  next(); 
});

l～略～
.then(arraySearchResults => { 
          let arraySearchFilter = arraySearchResults.filter(searchResultsParam => {
            return (searchResultsParam.statuses.length);
          });
**          if(!arraySearchFilter.length){

             return Promise.reject(new Error("検索結果がありません"));
          }**

          const sortArraySearchResults = arraySearchFilter.sort((a, b) => {
              if (new Date(Date.parse(a.statuses[0].created_at)) < new Date(Date.parse(b.statuses[0].created_at))) return 1;
              if (new Date(Date.parse(a.statuses[0].created_at)) > new Date(Date.parse(b.statuses[0].created_at))) return -1;
              return 0
          });
          res.locals.arraySearchResults = sortArraySearchResults;
          next();

.catch(error => {
          req.flash("errorMessage",error.toString());
          req.flash("test", "テスト");
          next();
～略～

  searchIndex: (req, res) => {
    res.render("twitter/search");
  }

<%= flashMessages.errorMessage %>

挙動がおかしくて
res.locals.flashMessagesにメッセージは格納できているようなのですが
node.jsのmain.jsでres.locals.flashMessagesをconsole.logで表示すると
プロンプトの最後に空のオブジェクトが表示されます。
このためにEJSでフラッシュメッセージが取得できていない感じなのですが・・・
数十回に一回のタイミングでEJSにフラッシュメッセージが表示されうまくいきます。
なぜ確率的にうまくいくのかわかりません。フラッシュメッセージに非同期通信が関連してるのでしょうか。
→userController.jsのPromise処理の中で検索結果が0だった場合にエラーのインスタンスをrejectしています。これをcatchするようにしてるのですがここの処理の構文が適切ではない気がします。調べてみます。

main.jsでのconsole.log(res.locals.flashMessages)ログ
{ errorMessage: [ 'Error: 検索結果がありません' ], test: [ 'テスト' ] }
{ errorMessage: [ 'Error: 検索結果がありません' ], test: [ 'テスト' ] }
{ errorMessage: [ 'Error: 検索結果がありません' ], test: [ 'テスト' ] }
{ errorMessage: [ 'Error: 検索結果がありません' ], test: [ 'テスト' ] }
{ errorMessage: [ 'Error: 検索結果がありません' ], test: [ 'テスト' ] }
{ errorMessage: [ 'Error: 検索結果がありません' ], test: [ 'テスト' ] }
{}
{}

解決方法がありましたらご教示の程お願いいたします。

Comments

[miyabi-sun]

この質問文だと読む気がしないので、
半角バッククォート(Shift+@キー)3個の行でくくってください。
編集画面で「コードの挿入」ボタンを駆使すればすぐ用意出来ます。

Markdownの記法を使いこなせればQiitaやZenn、GitHub等のサービスで
サラッとかっこいいドキュメントを書けるようになるので頑張ってみてください。

[kazu2021]

質問文がきれいにまとまりました。
ありがとうございます。
よろしくお願いいたします。

[miyabi-sun]

ナイス、ぐっと読みやすくなりましたね。

Answer 1

なるほど、状況を把握しました。
100％確実という保証は出来ませんが、多分これじゃないか？というものは見つかったので解説していきます。

app.use((req, res, next) => {
  res.locals.flashMessages = req.flash();
  console.log(res.locals.flashMessages);
  next(); 
});

この使い方がよくありません。

ざっくりExpress.jsの実行の流れを解説すると
HTTPリクエストを受け取った時、上からヒットしたものを順次実行します。
例えばapp.getやapp.postでパス指定でヒットしたらそこで終了
resの内容を使ってHTTPレスポンスを生成します。

この時重要なのは上からヒットしたものを順次実行の部分です。
app.useで指定したミドルウェアも全てヒット扱いです。
next関数を実行したらスルーして次にヒットしたものを使いますし、next関数を実行しなければ処理打ち切りでresを使ってHTTPレスポンスを作ります。

これの何がまずいかというと、
req.flash()が一度きりのメッセージを保管する目的で用意されているので、
関係ないリクエストで消費されてしまう懸念があることです。

もしリダイレクトや静的ファイル(CSS、JS、画像ファイル)のHTTPリクエストでも、
ヒットしたら全てこの処理を通過します。
そしてせっかくfrashに蓄えていた情報をそこで消費しちゃって、
HTMLファイルを作って返したい所で消費済なので何もデータがない。

これが原因でしょう。

解決策

• app.useを使う時に第一引数に発火させたいパスを指定する
• app.useではなく、ejs作っているapp.getの中でres.locals.flashMessages = req.flash();を実行する

推奨は後者ですね。
楽なのはわかりますが、わざわざミドルウェアでやるようなことじゃない。

まずパス指定まで含めるとapp.useで羅列するのは面倒だし漏れが出る。
トップページや一覧画面等の限定的なページのみがflashメッセージを必要とする為。
汎用的じゃないからapp.useは不適切じゃね？ってことですね。

Comments

[kazu2021]

ご教示いただきましたapp,getの方でres.locals.flashMessages = req.flash();を実行したらエラーメッセがただしく表示されました。

またまさしくご指摘いただいた通りで静的ファイル(CSS、JS、画像ファイル)を
main.jsのapp.use(express.static("public"));で処理しておりまして
これをフラッシュメッセージのミドルウェアよりも上に置いたところ
この方法でも正しくできました。

細かなところもなのですが全体の流れについても知識が抜け落ちておりまして
たいへん勉強になりました。
誠にありがとうございます。

[miyabi-sun]

> これをフラッシュメッセージのミドルウェアよりも上に置いたところ
> この方法でも正しくできました。
おっ、これちゃんと確認してくれたんですね。流石！

もし私がシステムを構築するのであれば想定であえて白黒つけると、
回答文のようにapp.getの中でやることを選択するでしょうね。

上に`app.use(express.static("public"));`を書いた場合
全てのPathをスルーした404エラーが紛れた時にやはりフラッシュの消費が懸念されます。

しかしWebサイトに辿り着いた後は上のURL欄を手打ちするなんて滅多にないことなので、
普通の使い方してる限り404エラーなんて出るわけないので僅差レベルだと思います。
自分のHTML作成時のミスでフラッシュ剥げたらヤだなぁって思うくらい。