Tricks

Custom Laravel error pages

May 29, 2023
Jeff Greco
Admin panel

If you are using the Admin Panel to create a SaaS or portal of any kind, you might be taking the extra effort to use a custom theme and branding. This will show you how simple it is to extend branding to your Laravel error pages:

First, publish your Laravel error pages using: php artisan vendor:publish --tag=laravel-errors

Locate your published Blade files in resources/views/errors. Within each view file, replace the contents with an example like this one for 404.blade.php:

<x-filament::layouts.card title="Error 404" class="text-center">
<p>Oops! This resource does not exist. Contact support if this problem persists.</p>
<x-filament::button tag="a" href="{{ route('filament.pages.dashboard') }}">Back to Dashboard</x-filament::button>
{{-- {{ $exception->getMessage() }} --}}
</x-filament::layouts.card>

Take note of $exception->getMessage() which is commented. Some error pages provide a short message describing the error, but USE THIS WITH CAUTION in production. You may delete layout.blade.php and minimal.blade.php if you wish, as these are no longer needed.

Not only are your error pages Filament-beautiful, you may now access Admin Panel goodies like notifications using Javascript. Happy coding!

avatar

In order to use this to match my custom theme I had to publish the filament views php artisan vendor:publish --tag=filament-views and then change line 60 in resources/views/vendor/filament/components/layouts/base.blade.php from {{ \Filament\Facades\Filament::getThemeLink() }} to @vite('resources/css/app.css'). Feels like shouldn't have to do that.

I am registering a custom theme in my FilamentServiceProvider

// Using Vite
Filament::registerViteTheme('resources/css/app.css');
avatar

What's strange is, custom branding is observed when using Mix. Going to have to investigate for Vite and will post an adjustment.

avatar

Here is a fun one for php artisan down.

resources/views/errors/503.blade.php

<x-filament::layouts.card title="Maintenance Mode" class="text-center">
<svg class="animate-pulse m-auto h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<x-heroicon-s-heart class="opacity-80" style="color: #14b8a6;" stroke="#14b8a6"></x-heroicon-s-heart>
</svg>
<p class="mt-4 mb-2">The site is currently down for scheduled maintenance. Check back with us shortly.</p>
</x-filament::layouts.card>