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

# 初めに
railsでコマンドミス又はスペルミスなどでエラーが起きた際、下記のようにエラーをviewで教えてくれます
[![Image from Gyazo](https://i.gyazo.com/df4bb18d1723cdd6e671bba82fceb21b.png)](https://gyazo.com/df4bb18d1723cdd6e671bba82fceb21b)
しかし、エラーの箇所とエラーメッセージだけだと、
```
あ、この箇所にエラーがあるんだね
あれ？スペルあってるじゃん
```
とみている箇所を間違えてしまい、なかなかエラーから抜け出せないこともあります

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

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

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

https://github.com/BetterErrors/better_errors

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

# 対応方法
### 1:Gemfileにbetter_errorsを記述し、インストールする
binding_of_callerも一緒にセットでインストールします
Gemfile
```rb
group :development do
  gem "better_errors"
  gem "binding_of_caller"
end
```
Dockerの仮想環境を使っている場合は、下記のコマンドでインストールします
```bash
docker compose run web bundle install
```
bash環境の場合は、下記のコマンドとなります
```bash
bundle install
```
下記のようなメッセージが出ればインストールは完了です
```bash
[+] 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アドレスからでもデバッグ情報にアクセスできます。

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

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

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

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

```shell
docker compose restart
```
または
```shell
docker compose down
docker compose up
```
better_errorsインストール前
[![Image from Gyazo](https://i.gyazo.com/df4bb18d1723cdd6e671bba82fceb21b.png)](https://gyazo.com/df4bb18d1723cdd6e671bba82fceb21b)
<br>
better_errorsインストール後
[![Image from Gyazo](https://i.gyazo.com/f4fdad2b9b122757a982d9f1d4221255.png)](https://gyazo.com/f4fdad2b9b122757a982d9f1d4221255)
インストールすると。単にapplication.jsがおかしいよではなく、リクエストパラメーターを提示してくれるので、ruby側のjs側のアクションに不手際があるよと説明してくれます
今回はjs側のindex側におけるimportにスペルミスがあったので、そこを修正するとエラー解消されました

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

https://qiita.com/terufumi1122/items/a6f9a939dce25b2d9a3e