TALL Tales

Adding a Custom Error Page in Laravel

04 Oct, 2022

VERSIONS: PHP 8.03 Laravel 8.18.1

Publish and Edit Existing Error Pages

So first of all you can publish the default error pages that comes with Laravel and you can then easily customise them. Publish them by running this code in your CLI:

php artisan vendor:publish --tag=laravel-errors

This will then create (if there isn't one already) an 'errors' folder in your '/resources/views/' directory. In there you will see the following Blade files:

  • 401.blade.php
  • 403.blade.php
  • 404.blade.php
  • 419.blade.php
  • 429.blade.php
  • 500.blade.php
  • 503.blade.php
  • illustrated-layout.blade.php
  • layout.blade.php
  • minimal.blade.php

The first few numeric files are one per error message. These reference one of the final three files which are the page layouts. They all default to using the 'minimal.blade.php' layout initially but you can experiment by changing them to use one of the others by altering the first line in the error page Blade file e.g.

@extends('errors::illustrated-layout')

You can then edit these files as you would any other Blade files.

Create Your Own Files

Alternatively, if you didn't want to publish all the existing templates you can just create what you need.

So, for example, if you just wanted to create a 404 page, add in an 'errors' folder to your '/resources/views/' directory. Then create a '404.blade.php' file. After that all you need to do is customise it your exact requirements.

Using Design Templates

If you wanted a new 404 page but aren't confident in your design skills then you'll be pleased to know that there are a range of templates available for you to use. If you have a Tailwind UI license then you can use one of their new 404 page designs and use it as is or customise it (as I have on this site: https://talltales.xyz/404.

Tailwind Components also have a good range of designs to choose from.

The LaravelCollective GitHub Errors repo has some beautiful error page designs for you to install as a package.

Photo by Romson Preechawit on Unsplash