How to Create Custom Error Page in Laravel 10?

Hello Laravel Friends,

In today’s blog, we are going to learn about How to Create a Custom Error Page in Laravel 10.

Error pages play a crucial role in enhancing user experience on a website or web application.

By default, Laravel provides default error pages like 404, 500 and all others.

Default 500 Error Page

Default 404 Error Page

Laravel allows developers to create custom error pages that align with the application’s design and branding. Custom error pages provide a consistent and user-friendly experience for your Laravel application’s users.

Let’s learn how to customize error pages in Laravel.

Contents

1 Steps to Create Custom Error Page in Laravel 10:
2 Output:
3 Conclusion:

Steps to Create Custom Error Page in Laravel 10:

We need some prerequisites before starting.

For that, you need a well-set Laravel project of any version.

Step 1: Go to the app/Exceptions/Handler.php file and add the below code in that file.

<?php

namespace App\Exceptions;

use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
use Throwable;

class Handler extends ExceptionHandler 
{
     // .....
 function render($request, Throwable $exception)
{
        if ($this->isHttpException($exception)) {
            if ($exception->getStatusCode() == 404) {
                return response()->view('errors.404', [], 404);
            }
            if ($exception->getStatusCode() == 500) {
                return response()->view('errors.500', [], 500);
            }
        }
        return parent::render($request, $exception);
     }
}

Step 2: Then, create a new 404.blade.php file at the below location.

resources/views/errors/404.blade.php

And add the code as follows

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>404</title>

  <style id="" media="all">
    /* cyrillic-ext */    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 900;
      font-display: swap;
      src: url(/fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvC73w0aXpsog.woff2) format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }

    * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box
    }

    body {
      padding: 0;
      margin: 0
    }

    #notfound {
      position: relative;
      height: 100vh
    }

    #notfound .notfound {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%)
    }

    .notfound {
      max-width: 520px;
      width: 100%;
      line-height: 1.4;
      text-align: center
    }

    .notfound .notfound-404 {
      position: relative;
      height: 240px
    }

    .notfound .notfound-404 h1 {
      font-family: montserrat, sans-serif;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      font-size: 252px;
      font-weight: 900;
      margin: 0;
      color: #262626;
      text-transform: uppercase;
      letter-spacing: -40px;
      margin-left: -20px
    }

    .notfound .notfound-404 h1>span {
      text-shadow: -8px 0 0 #fff
    }

    .notfound .notfound-404 h3 {
      font-family: cabin, sans-serif;
      position: relative;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      color: #262626;
      margin: 0;
      letter-spacing: 3px;
      padding-left: 6px
    }

    .notfound h2 {
      font-family: cabin, sans-serif;
      font-size: 20px;
      font-weight: 400;
      text-transform: uppercase;
      color: #000;
      margin-top: 0;
      margin-bottom: 25px
    }

    @media only screen and (max-width: 767px) {
      .notfound .notfound-404 {
        height: 200px
      }

      .notfound .notfound-404 h1 {
        font-size: 200px
      }
    }

    @media only screen and (max-width: 480px) {
      .notfound .notfound-404 {
        height: 162px
      }

      .notfound .notfound-404 h1 {
        font-size: 162px;
        height: 150px;
        line-height: 162px
      }

      .notfound h2 {
        font-size: 16px
      }
    }
  </style>
  <meta name="robots" content="noindex, follow">
</head>

<body>
  <div id="notfound">
    <div class="notfound">
      <div class="notfound-404">
        <h3>Oops! Page not found</h3>
        <h1><span>4</span><span>0</span><span>4</span></h1>
      </div>
      <h2>we are sorry, but the page you requested was not found</h2>
    </div>
  </div>
</body>

</html>

Step 3: In the same way, you need to create the 500.blade.php file at the below path

resources/views/errors/500.blade.php

Now add the code as mentioned for 404 error page

Output:

Now serve your Laravel app with production mode to see the output

Custom 500 Error Page

http://127.0.0.1:8000/ (in that case, I generate an internal server error)

Custom 404 Error Page

http://127.0.0.1:8000/any-route

Conclusion:

By following this step-by-step guide, you’ve learned how to create and integrate custom error views in Laravel 8, enhancing your application’s overall user interface and experience. If you have difficulty creating custom error pages for Laravel, get in touch with the Laravel developer or just leave a comment here.

Share the tutorial for the custom error page in Larvael 10 with your friends, and stay updated with us.

Happy Coding!

Click to rate this post!

[Total: 13 Average: 4.3]

Bharat Desai

Bharat Desai is a Co-Founder at MageComp. He is an Adobe Magento Certified Frontend Developer ? with having 8+ Years of experience and has developed 150+ Magento 2 Products with MageComp. He has an unquenchable thirst to learn new things. On off days you can find him playing the game of Chess ♟️ or Cricket ?.