railsにおけるエラー画面をもっと具体的にわかりやすくしてほしいあなたに(better_errors編)

初めに

railsでコマンドミス又はスペルミスなどでエラーが起きた際、下記のようにエラーをviewで教えてくれます

しかし、エラーの箇所とエラーメッセージだけだと、

あ、この箇所にエラーがあるんだね
あれ？スペルあってるじゃん

とみている箇所を間違えてしまい、なかなかエラーから抜け出せないこともあります

今回はMatterMostのLT会で一部の人から話題になってた「better_errors」を導入することで一般的なエラーと何が違うのかについて説明いたします

初学者のため、内容に誤りなどございましたらご指摘いただけますと助かります

better_errorsとは

結論から説明すると、エラー画面が丁寧な説明に変わる便利なgemです
公式のGitHubによると

インストールすることでRailsの標準エラーページを、より優れた有用なエラーページに置き換えることができます

対応方法

1:Gemfileにbetter_errorsを記述し、インストールする

binding_of_callerも一緒にセットでインストールします
Gemfile

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

Dockerの仮想環境を使っている場合は、下記のコマンドでインストールします

docker compose run web bundle install

bash環境の場合は、下記のコマンドとなります

bundle install

下記のようなメッセージが出ればインストールは完了です

[+] Creating 1/1
 ✔ Container xxxxxxx-db-1  Running                                                                                                              0.0s 
Fetching gem metadata from https://rubygems.org/.........
Resolving dependencies...
Fetching rouge 4.5.1
Fetching debug_inspector 1.2.0
Installing rouge 4.5.1
Installing debug_inspector 1.2.0 with native extensions
Fetching better_errors 2.10.1
Installing better_errors 2.10.1
Fetching binding_of_caller 1.0.1
Installing binding_of_caller 1.0.1
Bundle complete! 20 Gemfile dependencies, 111 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
1 installed gem you directly depend on is looking for funding.
  Run `bundle fund` for details

ただしインストールだけだとエラーメッセージは変わりません

2:(リモートアクセスの場合）どのIPからのアクセスを許可するか書く

development.rbファイルに下記を追記します

config/environments/development.rb

  BetterErrors::Middleware.allow_ip! "0.0.0.0/0"

他の開発環境でも実行できるようにするには、許可するIPの設定しなければなりません
これは、better_errorsが表示する詳細なデバッグ情報にアクセスできるIPアドレスを許可するための設定です。通常、better_errorsはセキュリティの観点から、ローカルホスト(127.0.0.1)のみにアクセスを制限しています。しかし、ローカル環境以外（例えば、仮想マシンやDockerコンテナ内で実行されているアプリケーションにリモートでアクセスする場合）でもデバッグ情報にアクセスする必要があります。この設定によって、どのIPアドレスからでもデバッグ情報にアクセスできます。

allow_ip! "0.0.0.0/0"は全てのIPアドレスを許可する設定であり、セキュリティリスクが高まります。本番環境では絶対に使用しないでください。この設定は開発環境でのみ使用するべきです。

安全性を高めるためには、特定のIPアドレスのみに制限することが推奨されます。例えば、自分のIPアドレスだけを許可する場合は以下のように設定します：

BetterErrors::Middleware.allow_ip! "192.168.x.x"

再起動して、エラー画面を確認する

Docker環境の場合、下記のコマンドで再起動をかけて、エラー画面が変わっているのを確認します

docker compose restart

または

docker compose down
docker compose up

better_errorsインストール前



better_errorsインストール後

インストールすると。単にapplication.jsがおかしいよではなく、リクエストパラメーターを提示してくれるので、ruby側のjs側のアクションに不手際があるよと説明してくれます
今回はjs側のindex側におけるimportにスペルミスがあったので、そこを修正するとエラー解消されました

better_errorsに関する資料は、Qiitaなどで多くの方が資料として提供されていますので、
上記の内容で不明点や詳細内容がほしいなどございましたら、下記の資料も参考してみてください