Posts Learn Components Snippets Categories Tags About
/

Customizing Default Error Pages in Laravel 8

Learn how to customize the default error pages that are shipped by Laravel and make it visually more intuitive.

3 months ago

8 mins read

95 views

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.
Laravel.com 404 Page

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.
Custom error pages
resources/views/errors/404.blade.php
The content of the error pages above vary depending on the styling of your web application but generally, it will extend any of the base layouts that you have defined for the other pages. As for postsrc.com it will look something like this:
# 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.
PostSrc.com 404 page preview


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*/);
    });
}

Resources: Extra


There are many resources out there for the design / SVG / assets that might suit your need but below are some of the suggestions that can help you to give life to your error pages.
  • 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.
Laravel 5.7 Default 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.

Load comments for Customizing Default Error Pages in Laravel 8

new

PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets

Authored by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components