Custom error pages

PODCAST

• 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

<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:

@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