Hello Laravel Friends,
The concept of error pages is not exclusive to web development as it serves as one of the critical aspects of enhancing the user experience on your website or web application. When users get any errors or messages, they have to get some instructions or messages from a professional-looking error page.
When setting up a fresh Laravel application, it already comes with the default error views for several HTTP status codes, including 404 for page not found and the 500 internal server error, among others. However, by creating your own error pages, you can address these messages to your users and offer them other ways of interacting with your application, which enhances their results greatly.
In this blog post of the day, we will teach you the process of building your own error page in Laravel 11 and how they can be modified to attract more users to your brand.
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 11.
Steps to Create Custom Error Page in Laravel 11:
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 11, 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