Inertiajs Laravel PHP

Laravel × Inertiajsのアプリケーションで404ページをカスタマイズする方法

本サイトの記事内にアフィリエイト広告が含まれる場合があります。

Laravel × Inertiajsのアプリケーションで404ページをカスタマイズする方法のサムネイル画像

awayuki

音大出身。学生時代はフリーランスでWEB制作・開発しながら、2社で長期エンジニアインターンを経験しました(2年半)。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年1月起業しました! このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。 お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

※ Laravel11でのカスタムエラーページの作成は、以下の記事で解説しています!

開発環境

Laravel Framework 9.13.0
php 8.2
docker
Mac OS

実現したいこと

デフォルトで表示される404ページをvue側でカスタマイズしたい

↑この画面をbladeではなくVueファイルで管理できるように設定していく。

解決方法

公式ドキュメントを元に進めていく

まずはエラー時に表示するページの作成から行う。

今回はresources/js/Pages/内にError.vueファイルを作成する。

<script setup>
import TopContainer from "@/Layouts/TopContainer.vue";
import CommonMv from "@/Components/Common/CommonMv.vue";
import { computed } from 'vue'
const props = defineProps({ status: Number })
const title = computed(() => {
  return {
    503: '503: Service Unavailable',
    500: '500: Server Error',
    404: '404: Not Found',
    403: '403: Forbidden',
  }[props.status]
})
const description = computed(() => {
  return {
    503: '申し訳ございませんが、現在メンテナンス中です。しばらくお待ちください。',
    500: 'サーバーに異常が発生しました。',
    404: 'お探しのページは見つかりませんでした。',
    403: 'このページへのアクセスは禁止されています。',
  }[props.status]
})
</script>

<template>
  <TopContainer>
    <CommonMv
      :title-en="title"
      :title-ja="description"
      class="commonMv"
    />
  </TopContainer>
</template>

5行目のdefinePropsでステータス番号を受け取るようにして、ステータスによって文字情報を表示する内容を変えれるというコードになっている。

次に、本番環境でエラーが出た時に、上記で作ったError.vueファイルを表示するように、app/Exceptions/Handler.php に下記を追記する。

/**
     * Prepare exception for rendering.
     *
     * @param  \Throwable  $e
     * @return \Throwable
     */
    public function render($request, Throwable $e)
    {
        $response = parent::render($request, $e);

        if (!app()->environment(['local', 'testing']) && in_array($response->status(), [500, 503, 404, 403])) {
            return Inertia::render('Error', ['status' => $response->status()])
                ->toResponse($request)
                ->setStatusCode($response->status());
        } elseif ($response->status() === 419) {
            return back()->with([
                'message' => 'The page expired, please try again.',
            ]);
        }

        return $response;
    }

これで開発環境ではログを見ることができて、本番環境では404ページなどを表示することができるようになる。

最終的に下記のような表示にすることができた。

  • この記事を書いた人

awayuki

音大出身。学生時代はフリーランスでWEB制作・開発しながら、2社で長期エンジニアインターンを経験しました(2年半)。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年1月起業しました! このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。 お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

-Inertiajs, Laravel, PHP