Custom error pages

In the previous sections we saw different error pages:
- A 404 error if the page does not exist: http://vinyl_shop.test/azerty
- A 403 error if the user has no admin rights (e.g. jane.doe@example.com): http://vinyl_shop.test/admin/records
- A 419 error when the @CSRF token is missing in the form
- A 500 error is a generic error page when something goes wrong AND the APP_DEBUG environment variable is set to false
These are the default Laravel error pages with no navigation
It's time to update some of them with our own template ...

Publish Laravel error pages

Use the php artisan vendor:publish --tag=laravel-errors command to publish the default Laravel error pages
All error pages are now available in the resources/views/errors folder
Open, for example, the resources/views/errors/404.blade.php file
This and all other error pages @extends the errors::minimal template, located in the same folder

REMARKS

Laravel actually has two ways of creating layout templates

Component based layouts:
- This is the "modern" way of creating layouts (like we did in the previous sections)
- It uses (named) slots like <x-slot name='nameOfTheGap'> to inject content into the layout
Layouts using template inheritance:
- This is the "old" way of creating layouts (like the template used for the error pages)
- It uses @section('nameOfTheGap', 'content') to inject content into the @yield('nameOfTheGap') slot in the layout template

Rerun vite

After publishing the default Laravel error pages it is necessary to restart the compilation (Vite), otherwise the Tailwind classes aren't interpreted and you won't get the expected lay-out

Update error pages template

If we modify the resources/views/errors/minimal.blade.php file, all error pages will be updated because they are using this template
Open the resources/views/errors/minimal.blade.php file and replace the content with the following code:
- The layout is now based on the <x-vinylshop-layout> template
- But we keep the @yield('code') and the @yield('message')from the original template to inject the error code and message

php

<x-vinylshop-layout>
    <x-slot name="title"></x-slot>
    <div class="grid grid-rows-2 grid-flow-col gap-4">
        <p class="row-span-2 text-5xl text-right border-r-2 border-gray-700 pr-4">
            @yield('code')        
        </p>
        <p class="text-2xl font-light text-gray-400">
            @yield('message')     
        </p>
        <div>
            <x-button class="!bg-gray-400 hover:!bg-gray-800">
                <a href="{{ route('home') }}">Home</a>
            </x-button>
            <x-button class="!bg-gray-400 hover:!bg-gray-800">
                <a href="#" onclick="window.history.back();">Back</a>
            </x-button>
        </div>
    </div>
</x-vinylshop-layout>

<x-vinylshop-layout>
    <x-slot name="title"></x-slot>
    <div class="grid grid-rows-2 grid-flow-col gap-4">
        <p class="row-span-2 text-5xl text-right border-r-2 border-gray-700 pr-4">
            @yield('code')        
        </p>
        <p class="text-2xl font-light text-gray-400">
            @yield('message')     
        </p>
        <div>
            <x-button class="!bg-gray-400 hover:!bg-gray-800">
                <a href="{{ route('home') }}">Home</a>
            </x-button>
            <x-button class="!bg-gray-400 hover:!bg-gray-800">
                <a href="#" onclick="window.history.back();">Back</a>
            </x-button>
        </div>
    </div>
</x-vinylshop-layout>

Jane Doe is not an admin, so she should not be able to access the admin/records pages

Session on 404 error page

Even if you are logged in, the user navigation on the right is missing on the 404 page (while on the 403 and 500 error pages there's no problem)
This is because Laravel doesn't load the session on a regular 404 error and therefore doesn't know anything of the auth state (more details about sessions later in this course)
In order to not confuse the user, it is better to remove the right navigation completely
Open the resources/views/errors/404.blade.php file
Push a script to script stack:

php

@extends('errors::minimal')

@section('title', __('Not Found'))
@section('code', '404')
@section('message', __('Not Found'))

@push('script')     
    <script>
        // remove the last div inside the nav tag
        document.querySelector('header nav  div:last-child').remove();
    </script>
@endpush

@extends('errors::minimal')

@section('title', __('Not Found'))
@section('code', '404')
@section('message', __('Not Found'))

@push('script')     
    <script>
        // remove the last div inside the nav tag
        document.querySelector('header nav  div:last-child').remove();
    </script>
@endpush

Custom error pages ​

Publish Laravel error pages ​

Update error pages template ​

Session on 404 error page ​

Custom error pages

Publish Laravel error pages

Update error pages template

Session on 404 error page