Skip to main content

Error Pages

In Peak, error pages are stored in the resources/views/errors directory. Each type of error, such as 404 (page not found), 500 (server error), etc., has its own corresponding .blade.php file, located in resources/views/errors/{errorcode}.blade.php.

This guide will show you how to easily customize these error pages for your application by editing the existing blade.php files.

Steps to Edit Error Pages​

1. Locate the Error Pages​

Error pages are located in the resources/views/errors directory. You will see files named according to the HTTP error code. For example:

  • 404.blade.php - This is the page shown when a user tries to access a non-existent route (404 error).
  • 500.blade.php - This is the page shown when there is an internal server error (500 error).
  • 403.blade.php - This is the page shown when a user does not have permission to access a resource (403 error).
  • 419.blade.php - This is the page shown for CSRF token errors (419 error).

2. Edit the Blade Files​

To edit a specific error page, open the corresponding .blade.php file. For instance, to edit the 404 error page:

  1. Navigate to resources/views/errors/404.blade.php.
  2. Edit the file content to suit the desired design and message.

For example, you can display a custom message like this:

{{-- resources/views/errors/404.blade.php --}}
@extends('layouts.app')

@section('title', 'Page Not Found')

@section('content')
    <div class="error-container">
        <h1>Oops! Page Not Found.</h1>
        <p>The page you are looking for might have been moved or deleted.</p>
        <a href="{{ url('/') }}" class="btn btn-primary">Go to Homepage</a>
    </div>
@endsection

This is a simple 404 error page with a custom message and a button redirecting users back to the homepage.

3. Customizing Other Error Pages​

You can repeat the same process for other error pages by locating the corresponding .blade.php file and editing its content.

For example:

  • To customize the 500 error page, open resources/views/errors/500.blade.php and modify the message.
  • For a 403 error, open resources/views/errors/403.blade.php.

4. Testing the Custom Error Pages​

Once you’ve made your changes, it’s important to test that the error pages display as expected.

  • 404 Error: To test a 404 error, navigate to a non-existent route in your app (e.g., http://yourapp.com/nonexistent-page).
  • 500 Error: To simulate a server error, you can throw an exception in a controller (e.g., abort(500);).
  • 403 Error: Test a 403 error by trying to access a page that requires authorization without being logged in or without proper permissions.

5. Handling Default Error Pages​

If a specific error page (e.g., 404 or 500) is missing from the errors directory, Laravel will fall back to a default error page located at resources/views/errors/illuminate{errorcode}.blade.php.

You can also create a global layout that all error pages extend. This is done by creating a master template (e.g., resources/views/layouts/error.blade.php) and ensuring that each error page extends that layout.

For example:

{{-- resources/views/layouts/error.blade.php --}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Error')</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div class="error-wrapper">
        @yield('content')
    </div>
</body>
</html>

6. Customizing the Error Pages with Dynamic Data​

You can also pass dynamic data to error pages. For example, you can pass error codes, messages, or other context information to be displayed on the error page.

In a controller, you could pass variables like this:

abort(404, 'Custom error message');

Then, in the 404.blade.php:

{{-- resources/views/errors/404.blade.php --}}
@extends('layouts.error')

@section('title', 'Not Found')

@section('content')
    <div class="error-container">
        <h1>Oops! {{ $exception->getMessage() }}</h1>
        <p>The page you are looking for was not found.</p>
        <a href="{{ url('/') }}" class="btn btn-primary">Go to Homepage</a>
    </div>
@endsection

7. Other Customization Options​

  • Error Images: You can add custom images to enhance the design. Just use the standard HTML img tag and store the images in the public folder or an appropriate location.
  • JavaScript and CSS: Feel free to add custom JavaScript or CSS for additional error page interactivity or styles.

Conclusion​

This guide outlines how to edit error pages in Laravel by modifying the .blade.php files located in the resources/views/errors directory. Admin developers can easily customize these pages by adjusting the content, styling, and dynamic data to fit the needs of the application.