Home / Tutorials / Customizing Default Error Pages in Laravel 8
Customizing Default Error Pages in Laravel 8 cover

Customizing Default Error Pages in Laravel 8

8 mins


3 years ago




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


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 postsrc.com 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 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.
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.

Support Us

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

Related Tutorials

Code Snippets

Collection of Laravel, AlpineJS, VueJS, Tailwind CSS, Flutter snippets and more. New snippets added every day.
View Snippets

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this