Support the ongoing development of Laravel.io →

Create custom error pages in Laravel 8

22 May, 2021 1 min read 3,538 views

The standard error pages in Laravel are looking a bit awful. In this tutorial I will show you how you can customize the error pages. Luckily for us this is very easy in Laravel 8. Today we are going to create a custom error page for the 404, 500 & 503 errors!

The first step is to create a blade file for every error response that the server can give. Place the following files in the resources/views/errors folder:

404.blade.php:

@extends('front.layouts.error', [
    'title' => 'Hello, is it me youre looking for?',
    'errorCode' => '404',
    'homeLink' => true,
])

500.blade.php:

@extends('front.layouts.error', [
    'title' => 'Server error',
    'errorCode' => '500',
    'homeLink' => false,
])

503.blade.php

@extends('front.layouts.error', [
    'title' => 'Be right back',
    'errorCode' => '503',
    'homeLink' => false,
])

Laravel will automatically detect these files, and will replace the default error page with this error message. As you can see in the code above these files extend the front.layouts.error page. Add this file in the resources/views/errors folder and add the following code:

...
<div class="flex justify-center max-w-5xl min-h-screen pb-16 mx-auto">
  <div class="leading-none text-center text-black md:text-left">
		  <h1 class="mb-2 text-5xl font-extrabold">{{ $errorCode }}</h1>
				<p class="text-xl text-gray-900">
						@isset($title)
								{{ $title }}
						@else
								Hello, is it me you're looking for?
						@endisset

						@if($homeLink ?? false)
								<a href="{{ url('/') }}" class="font-bold underline transition duration-300 hover:text-blue-600">Go home</a>
						@endif
				</p>
		</div>
</div>
...

This code is an example on the implementation, feel free to customize this to your liking!

That is it, you have now custom 400, 500 & 503 error messages in Laravel! I hope you enjoyed this small tutorial. If you have any questions reach out to me on Twitter!

Last updated 1 month ago.
3
Like this article? Let the author know and give them a clap!
larapeak (Larapeak) https://www.larapeak.com/

Other articles you might like

June 30th 2022

Validating File Upload Arrays in Laravel

Let's say you have an HTML form with 3 file inputs named certificate[], and you want to make them al...

Read article
June 22nd 2022

Adding Social Logins to Your Laravel Apps: Twitter and GitHub

Introduction In your Laravel applications, you would typically provide the functionality for your us...

Read article
September 10th 2022

Why Laravel uses caches and how to clear them for debugging

Some performance issues at scale can come from repeatedly computing values for Laravel's bootstrappi...

Read article

We'd like to thank these amazing companies for supporting us

Your logo here?

The Laravel portal for problem solving, knowledge sharing and community building.

© 2022 Laravel.io - All rights reserved.