Custom Error Pages in Laravel

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

Welcm
Welcm
Feb 11, 2019 · 3 min read
Image for post
Image for post

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.

Image for post
Image for post
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.

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:

Image for post
Image for post

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.

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.

Like this story? Please follow us on Twitter.

At Welcm we design, develop and support touch screen applications and systems.

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

Originally published at welcm.uk.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store