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 (opens new window)
  • A 403 error if the user has no admin rights (e.g. jane.doe@example.com): http://vinyl_shop.test/admin/records (opens new window)
  • 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 (opens new window) with no navigation
• It's time to update some of them with our own template ...

Publish the default 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 (opens new window)

• 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 @yield('nameOfTheGap') to inject content into the layout

• 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-jet-button class="bg-gray-400 hover:bg-gray-500">
              <a href="{{ route('home') }}">Home</a>
          </x-jet-button>
          <x-jet-button class="bg-gray-400 hover:bg-gray-500">
              <a href="#" onclick="window.history.back();">Back</a>
          </x-jet-button>
      </div>
  </div>
</x-vinylshop-layout>

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

• The URL http://vinyl_shop.test/azerty (opens new window) does not exist

• Temporary remove the @csrf token in the resources/views/components/layout/nav.blade.php file and try to logout

• Open the .env file en set the APP_DEBUG environment variable temporary to false
• Create an error (in code) on e.g. the contact page

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

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