Custom Error Pages in Laravel

Custom Error Pages in Laravel

How to customise your error pages to show relevant information and match your site design

How to customise your error pages to show relevant information and match your site design
Custom error views in Laravel

Introduction

Friendly error pages that help and inform users are essential for all websites and web apps, for example in the event the visitor enters an incorrect URL.

Laravel comes with a selection of error views by default, which whilst friendly and attractively designed, might not fit in with the theme of your particular site.

Laravel's default 404 view

Laravel's default 404 view

The custom error views that ship with the default Laravel install are as follows:

Error 401 — Unauthorised

Error 403 — Forbidden

Error 404 — Not Found

Error 419 — Laravel POST Error

Error 429 — Too Many Requests

Error 500 — Internal Server Error

Error 503 — Service Unavailable

Luckily creating custom error views in newer versions of Laravel to match your design is really simple, so we’ll take a look at how we create these views in this tutorial.

Get our help adding custom error pages to your site

How To Create Custom Error Views

Probably the most common error page users may see is the 404 error, which simply means the page cannot be found. This could happen when for example a visitor goes to /abuot rather than /about. We’ll take a look at creating a custom 404 error page first.

In your Laravel project folder, create a folder called “errors” in your /resources/views/ folder.

Create a file called 404.blade.php in this /resources/views/errors/ folder.

You can write whatever html you choose in this file to display to your users, utilising your template files if you need to. Alternatively you can stay close to the original Laravel error view template files. You’ll see in that link all the default error view files.

This example below makes a few minor tweaks to the original template, retaining the layout but changing the title and image on the right of the screen:

@extends('errors::illustrated-layout')

@section('code', '404 😭')

@section('title', __('Page Not Found'))

@section('image')

<div style="background-image: url('/images/404-bg.jpg');" class="absolute pin bg-no-repeat md:bg-left lg:bg-center">
</div>

@endsection

@section('message', __('Sorry, the page you are looking for could not be found.'))

The page will now look like this:

undefined

You can repeat this process for any of the other error views, e.g. by creating /resources/views/errors/500.blade.php

Conclusion and bonus code!

That’s pretty much it for custom error pages. You can make the error pages as complex or as simple as you choose, with more verbose messages or specific user-related information if required.

Get our help adding custom error pages to your site

Something that might be useful for web apps is redirecting the user to a single defined location in the event of a 404 Not Found error instead of displaying a 404 error page. You can do this by adding a simple function in your exception handler file.

Navigate to app/Exceptions/Handler.php

Import the NotFoundHttpException class

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

Then find this function:

public function render($request, Exception $exception)
{
return parent::render($request, $exception);
}

Add the following before the function returns:

if ($exception instanceof NotFoundHttpException) {
return redirect()->route('home');
}

Update the name of the route from ‘home’ to whatever you need, (this corresponds to this line in /routes/web.php:

Route::get('/', 'PageController@home')->name('home');

And now 404 errors will redirect to your defined home route instead of displaying an error page.

Get our help adding custom error pages to your site

At Welcm we design, develop and support web applications and mobile apps. We specialise in the Laravel framework.

If you have a project you would like to discuss please send an enquiry from our contact page, email us at enquiries@welcm.uk or call us on 01252 950 650.

We also make Visitor Management Easy at https://welcm.ly