Posts Learn Components Snippets Categories Tags Tools 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.

2 years ago

8 mins read



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


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
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 it will look something like this:
# 404.blade.php

    <div class="max-w-2xl mx-auto px-4 mt-4">
        <!-- your custom code here -->
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 404 page here directly and see the content of the 404 pages. 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.

Alternative Tags

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for Customizing Default Error Pages in Laravel 8


PostSrc Code Snippets

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

Learn New Snippets

Sponsors 👑

+ Add Yours

PostSrc Code Components

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

View Components