Support the ongoing development of Laravel.io →

Create custom error pages in Laravel 8

22 May, 2021 1 min read

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 year ago.

luisalonsobr, jesperst67, franckdev21 liked this article

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

Other articles you might like

November 7th 2023

Build a Quick & Easy Instant Search User Interface using Alpine AJAX & Laravel

I’m going to walk you through how to easily add an instant search filter in your Laravel apps. When...

Read article
April 18th 2024

Draw a dynamic SVG pattern with Vue

How to create an animated SVG pattern in a Laravel Vue project. You will find a link to a CodeSandb...

Read article
April 17th 2024

Using the "Conditionable" Trait In Laravel

Introduction Conditions are an integral part of any codebase. Without being able to conditionally ex...

Read article

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

Your logo here?

Laravel.io

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

© 2024 Laravel.io - All rights reserved.