Hello Laravel Friends,
In today’s blog, we are going to learn about How to Create a Custom Error Page in Laravel 10.
Error pages play a crucial role in enhancing user experience on a website or web application.
By default, Laravel provides default error pages like 404, 500 and all others.
Default 500 Error Page
Default 404 Error Page
Laravel allows developers to create custom error pages that align with the application’s design and branding. Custom error pages provide a consistent and user-friendly experience for your Laravel application’s users.
Let’s learn how to customize error pages in Laravel.
Steps to Create Custom Error Page in Laravel 10:
We need some prerequisites before starting.
For that, you need a well-set Laravel project of any version.
Step 1: Go to the app/Exceptions/Handler.php file and add the below code in that file.
<?php
namespace App\Exceptions;
use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
use Throwable;
class Handler extends ExceptionHandler
{
// .....
function render($request, Throwable $exception)
{
if ($this->isHttpException($exception)) {
if ($exception->getStatusCode() == 404) {
return response()->view('errors.404', [], 404);
}
if ($exception->getStatusCode() == 500) {
return response()->view('errors.500', [], 500);
}
}
return parent::render($request, $exception);
}
}
Step 2: Then, create a new 404.blade.php file at the below location.
resources/views/errors/404.blade.php
And add the code as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>404</title>
<style id="" media="all">
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(/fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvC73w0aXpsog.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
body {
padding: 0;
margin: 0
}
#notfound {
position: relative;
height: 100vh
}
#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.notfound {
max-width: 520px;
width: 100%;
line-height: 1.4;
text-align: center
}
.notfound .notfound-404 {
position: relative;
height: 240px
}
.notfound .notfound-404 h1 {
font-family: montserrat, sans-serif;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 252px;
font-weight: 900;
margin: 0;
color: #262626;
text-transform: uppercase;
letter-spacing: -40px;
margin-left: -20px
}
.notfound .notfound-404 h1>span {
text-shadow: -8px 0 0 #fff
}
.notfound .notfound-404 h3 {
font-family: cabin, sans-serif;
position: relative;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
color: #262626;
margin: 0;
letter-spacing: 3px;
padding-left: 6px
}
.notfound h2 {
font-family: cabin, sans-serif;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
color: #000;
margin-top: 0;
margin-bottom: 25px
}
@media only screen and (max-width: 767px) {
.notfound .notfound-404 {
height: 200px
}
.notfound .notfound-404 h1 {
font-size: 200px
}
}
@media only screen and (max-width: 480px) {
.notfound .notfound-404 {
height: 162px
}
.notfound .notfound-404 h1 {
font-size: 162px;
height: 150px;
line-height: 162px
}
.notfound h2 {
font-size: 16px
}
}
</style>
<meta name="robots" content="noindex, follow">
</head>
<body>
<div id="notfound">
<div class="notfound">
<div class="notfound-404">
<h3>Oops! Page not found</h3>
<h1><span>4</span><span>0</span><span>4</span></h1>
</div>
<h2>we are sorry, but the page you requested was not found</h2>
</div>
</div>
</body>
</html>
Step 3: In the same way, you need to create the 500.blade.php file at the below path
resources/views/errors/500.blade.php
Now add the code as mentioned for 404 error page
Output:
Now serve your Laravel app with production mode to see the output
Custom 500 Error Page
http://127.0.0.1:8000/ (in that case, I generate an internal server error)
Custom 404 Error Page
http://127.0.0.1:8000/any-route
Conclusion:
By following this step-by-step guide, you’ve learned how to create and integrate custom error views in Laravel 8, enhancing your application’s overall user interface and experience. If you have difficulty creating custom error pages for Laravel, get in touch with the Laravel developer or just leave a comment here.
Share the tutorial for the custom error page in Larvael 10 with your friends, and stay updated with us.
Happy Coding!
Thank you