0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Laravel(ver.11)+Inertia+React(TS)でエラーページをカスタム

Posted at

公式通りに真似してやったつもりが、やや苦戦したのでメモします。

Inertia.jsの公式のドキュメントを参考に実施します。
https://inertiajs.com/error-handling

.envの設定

公式には書いてないですが、開発間環境ではなく本番環境に設定を変更します。
.envファイルをこのように書き換えて切り替えます。
APP_ENVをloca→productionにします。

.env
#APP_ENV=local
APP_ENV=production

バックエンド側の設定

bootstrapディレクトリにある、"app.phpを公式ドキュメントと同じように編集します"
"->withExceptions(function (Exceptions $exceptions) {})->create();"
の部分がデフォルトでは何も書かれてないのでここにカスタムエラーページへ飛ばす処理を書きます。
公式通りに書けばOKです。

app.php

//省略//


use Illuminate\Http\Request;//カスタムエラーページで使用
use Symfony\Component\HttpFoundation\Response;//カスタムエラーページで使用
use Inertia\Inertia;//カスタムエラーページで使用


//省略//


->withExceptions(function (Exceptions $exceptions) {
        //カスタムエラーページの処理
        $exceptions->respond(function (Response $response, Throwable $exception, Request $request) {
            if (! app()->environment(['local', 'testing']) && in_array($response->getStatusCode(), [500, 503, 404, 403])) {
                return Inertia::render('Error', ['status' => $response->getStatusCode()])
                    ->toResponse($request)
                    ->setStatusCode($response->getStatusCode());
            } elseif ($response->getStatusCode() === 419) {
                return back()->with([
                    'message' => 'The page expired, please try again.',
                ]);
            }
    
            return $response;
        });
    })->create();


フロントエンドエラーページ作成

Pageディレクトリに"Error.tsx"を新規作成します。
そして、中身をこのように編集します。
基本は公式通りですが、typescriptだとエラーが出たので"status"に
型(number)を宣言するように少し書き換えています。

Error.tsx
export default function ErrorPage({ status }:{status:number}) {
    const title = {
      503: '503: Service Unavailable',
      500: '500: Server Error',
      404: '404: Page Not Found',
      403: '403: Forbidden',
    }[status] 
  
    const description = {
      503: 'Sorry, we are doing some maintenance. Please check back soon.',
      500: 'Whoops, something went wrong on our servers.',
      404: 'Sorry, the page you are looking for could not be found.',
      403: 'Sorry, you are forbidden from accessing this page.',
    }[status] 
  
    return (
      <div>
        <h1>{title}</h1>
        <div>{description}</div>
      </div>
    )
  }

キャッシュのクリア

これでカスタムエラーページは完成ですが、うまく表示されない時は
以下の3つのコマンド実施し、キャッシュをクリアしてください。

php artisan view:clear
php artisan config:clear
php artisan cache:clear

以上です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?