Customizing Default Error Pages in Laravel 8

Introduction

The Laravel default error page has very simple and straightforward text that just prints out the error code and message to the user. Although it does its job at showing the error, it's far from my liking and in this short post, you'll be learning how to customize Laravel 403, 404, 500, 503 error pages.

Implementation

There are 4 commonly error pages that user often comes across with and below are the description for each of the possible causes:

• 403 - forbidden error
• 404 - page not found
• 500 - internal server error
• 503 - service not available

To customize each of the error pages above we have to create a custom "blade view" which will be rendered by the exception handling. To achieve this, create a new directory inside "resources/views/errors" folder and then pass in the new blade view. It should look like the screenshot below.

resources/views/errors/404.blade.php

# 404.blade.php
@extends('layouts.base')

@section('content')
    <div class="max-w-2xl mx-auto px-4 mt-4">
        <!-- your custom code here -->
    </div>
@endsection

It looks like there is nothing much inside this page and that's very much true as there is really not much to add. If you want, you can visit postsrc.com 404 page here directly and see the content of the 404 pages.

Do note that this applies to the other error pages as well, to style the 403, 500, and 503, just create a new blade file inside the errors page and add the styling whichever is necessary.
If you are wondering whether the "404.blade.php" can use a different name or location, then the answer is yes you absolutely can but you will have to update the Laravel error handle to show the right place and location of the error page.

use App\Exceptions\SomeErrorException;

/**
 * Register the exception handling callbacks for the application.
 *
 * @return void
 */
public function register()
{
    $this->renderable(function (SomeErrorException $e, $request) {
        return response()->view('errors.your-custom-error-page', [], /*403, 404, 500, 503 - up to your use case*/);
    });
}

• Undraw
• Storyset
• Lottiefiles

If you prefer to reuse Laravel version 5.7 default error pages now you can get it from the Laravel Collective Error package. The implementation is the same and the end result should be more favorable compared to the default Laravel 8 error pages.

By now you should be able to customize your Laravel application 403, 404, 500, and 503 error pages. Thanks for reading and have a good try. If there's an issue regarding the implementation just comment it down below and do share it with your friends, it helps a lot.