Laravel Custom 404 Error Page | Custom 500 Page

Laravel Custom 404 Error Page Example is today’s guidance.

There are some events when your web site throws 404 and other errors. It is good to have creative 404 page to tell user where he did wrong.

You will learn how to create custom 404 and 500 error page in the laravel framework for exception handling.

Actually you can use this tutorial for any king of error like 408, 403, 400 etc.

There is one switch loop in the Handler.php file where you can decide various types of errors.

Following is the output of this tutorial.

Now follow all the below MOVES to accomplish your goal.

Move 1. Make a new project.

First of all, create a new project using the below command in terminal.

laravel new lara404Error

Move 2. Modifying Handler.php file

• Navigate to app->Exceptions->Handler.php file.
• This file contains several pre written source code.
• Find out the function named render() inside Handler.php file.

Make this render() function as per the below code snippet.

public function render($request, Exception $exception)

    {
        //dd('1');
        if($this->isHttpException($exception))
        {
          //  dd('2');
            switch ($exception->getStatusCode()) {
                // not found
                case '404':
                     return $this->renderHttpException($exception); 
                break;
                // internal server error
                case '500':
                return $this->renderHttpException($exception);   
                break;
                default:
                    return $this->renderHttpException($exception);
                break;
            }
        } else
        {
            return parent::render($request, $exception);
        }

    }

• First of all, compiler will check if there is any exception is raised or not. Exception generally raised when any error like 404, 500, 400, 408 etc. takes place.
• So when error takes place, if condition is true and compiler go inside render() function.
• Inside render() function, compiler will read one switch statement.
• Here, in this switch we can write various code for various errors.
• I have written code for 404 and 500 errors. Similarly, you can add other error code as per your requirement.

So final source lines for Handler.php file is as per below

<?php

namespace App\Exceptions;

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

class Handler extends ExceptionHandler
{
    /**
     * A list of the exception types that are not reported.
     *
     * @var array
     */
    protected $dontReport = [
        //
    ];

    /**
     * A list of the inputs that are never flashed for validation exceptions.
     *
     * @var array
     */
    protected $dontFlash = [
        'password',
        'password_confirmation',
    ];

    /**
     * Report or log an exception.
     *
     * @param  \Exception  $exception
     * @return void
     */
    public function report(Exception $exception)
    {
        parent::report($exception);
    }

    /**
     * Render an exception into an HTTP response.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Exception  $exception
     * @return \Illuminate\Http\Response
     */
    public function render($request, Exception $exception)

    {
        //dd('1');
        if($this->isHttpException($exception))
        {
          //  dd('2');
            switch ($exception->getStatusCode()) {
                // not found
                case '404':
                     return $this->renderHttpException($exception); 
                break;
                // internal server error
                case '500':
                return $this->renderHttpException($exception);   
                break;
                default:
                    return $this->renderHttpException($exception);
                break;
            }
        } else
        {
            return parent::render($request, $exception);
        }

    }
}

Move 3. Making Blade Files

After changing the Handler.php file, we need to make some blade layout files for each type of error.

First make a new folder named “errors” inside resources->views directory.

Now inside this “errors” folder, create a new file and give it a name like 404.blade.php

Write down the below source snippet inside this 404.blade.php file.

<html>

<body>
   
        <div >
          <h1 >Custom 404 Error in Laravel</h1>
        
        <p><strong>Page you want is not on this web site</strong></p>
         
    
</div>

<img height="420" width="420" src="{{url('/images/error404.png')}}" >

</body>

</html>

• This file is the look and feel of 404 error page. You can edit or customize it with html and css as per your requirement.
• I have added one image in this file. This image is stored inside public->images directory.
• By default, public folder is there but no images folder.
• So create a new folder named “images” inside “public” folder.
• Inside “images” folder, you can store your images and can give reference them in any blade layout file.

Below is the example how to give reference to image.

<img height="420" width="420" src="{{url('/images/error404.png')}}" >

I have added an image named “error404.png” inside public->images directory.

Move 4. Handling other errors

So you have successfully created your custom file for 404 error page.

Similarly, you can handle other errors.

• First, make a new case in switch statement in Handler.php file. (I have written a case for 500 error.)
• Then make a new blade file. (For example, 500.blade.php for handling 500 error with custom page)

That is all. Now you have complete control over the look and feel over error pages for your laravel web site.

Download Source code For laravel custom 404

Want to download full source code???

Click the below link to download the source code of this laravel custom 404 error page tutorial.

Github link for downloading source code