Filament•15mo ago

Custom error pages

So in the past i used https://v2.filamentphp.com/tricks/custom-laravel-error-pages for my custom error pages and this worked great. But this doesn't work anymore with V3. I have been trying to get started with several filament components (panel:s:page, panels::layout, etc) but they either need an $this or they are missing Livewire. Which all make sense but what would be the best approach to create a proper 404 page inside Filament.

Filament

Custom Laravel error pages by Jeff Greco - Tricks - Filament

Filament is a collection of tools for rapidly building beautiful TALL stack apps, designed for humans.

13 Replies

AugusOP•14mo ago

Anyone? 😢

Proculair B.V.•14mo ago

I am doing something different then you are but this is how I do it.

awcodes•14mo ago

what have you actually tried in your 404.blade.php

Proculair B.V.•14mo ago

resources/views/components/layouts/error.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
    >

    <meta
        http-equiv="refresh"
        content="30"
    >

    <link
        href="/favicon.png"
        rel="icon"
    >

    <title>{{ $code }} - {{ config('app.name', 'Laravel') }}</title>

    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="min-h-screen overflow-y-auto bg-gray-100 text-gray-900">

    <div class="flex min-h-screen items-center justify-center bg-gray-100 py-12 text-gray-900">
        <div class="-mt-16 w-screen max-w-md space-y-8 px-6 md:mt-0 md:px-2">
            <div
                class="relative space-y-4 rounded-2xl border border-gray-200 bg-white/50 p-8 shadow-2xl backdrop-blur-xl">
                <div class="flex w-full justify-center">
                    <img
                        class="h-20 w-full"
                        src="https://assets.proculair.com/ikoreg/logo.svg"
                    />
                </div>

                <h2 class="text-center text-2xl font-bold tracking-tight">
                    {{ $title }}
                </h2>

                <p class="text-l text-center font-medium">
                    {{ $slot }}
                </p>

                @if (Flare::sentReports()->latestUuid())
                    <p class="text-center text-sm font-light tracking-tight">
                        {{ Flare::sentReports()->latestUuid() }}
                    </p>
                @endif
            </div>
        </div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
    >

    <meta
        http-equiv="refresh"
        content="30"
    >

    <link
        href="/favicon.png"
        rel="icon"
    >

    <title>{{ $code }} - {{ config('app.name', 'Laravel') }}</title>

    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="min-h-screen overflow-y-auto bg-gray-100 text-gray-900">

    <div class="flex min-h-screen items-center justify-center bg-gray-100 py-12 text-gray-900">
        <div class="-mt-16 w-screen max-w-md space-y-8 px-6 md:mt-0 md:px-2">
            <div
                class="relative space-y-4 rounded-2xl border border-gray-200 bg-white/50 p-8 shadow-2xl backdrop-blur-xl">
                <div class="flex w-full justify-center">
                    <img
                        class="h-20 w-full"
                        src="https://assets.proculair.com/ikoreg/logo.svg"
                    />
                </div>

                <h2 class="text-center text-2xl font-bold tracking-tight">
                    {{ $title }}
                </h2>

                <p class="text-l text-center font-medium">
                    {{ $slot }}
                </p>

                @if (Flare::sentReports()->latestUuid())
                    <p class="text-center text-sm font-light tracking-tight">
                        {{ Flare::sentReports()->latestUuid() }}
                    </p>
                @endif
            </div>
        </div>
    </div>
</body>

</html>

resources/views/errors/404.blade.php

<x-layouts.error>
    <x-slot name="code">
        404
    </x-slot>

    <x-slot name="title">
        {{ __('error.404.title') }}
    </x-slot>

    {{ __('error.404.description') }}
</x-layouts.error>

<x-layouts.error>
    <x-slot name="code">
        404
    </x-slot>

    <x-slot name="title">
        {{ __('error.404.title') }}
    </x-slot>

    {{ __('error.404.description') }}
</x-layouts.error>

Keep in mind in the error template that I use Flare error tracking

AugusOP•14mo ago

Sorry for the late response, had something comming up inbetween. @awcodes i tried extending the panel but without any success. Main thing i wanna create is a nice user flow. A client doesn't have to be met with an 404 page that looks fastly different than the application. And where it's hard to go back to where they are. @Proculair thanks a lot for your input, and i think this is kinda my fear that i need to create a seperate template structure for this without the ability to simply intergrate the error pages as Filament pages.

Proculair B.V.•14mo ago

You could also have a look at this: https://filamentphp.com/docs/3.x/support/blade-components/overview Maybe build your error template using Filament UI blocks.

Overview - Core Concepts - Filament

AugusOP•14mo ago

Yea probably going that route, thanks

Corne•14mo ago

@Augus van GIls did you managed to fix the "Using $this when not in object context" error ? Or did you created a separate layout for the error page ? Just upgraded to v3 and couldn't found a good solution yet.

AugusOP•14mo ago

@Corne for now im using separate layouts. I would love to have this integrated in Filament more but i have no clue on how to.

DrByte•14mo ago

@jgreco Apologies for the tag: I'm taking a wild guess that since it's got your name on it, you probably wrote the article referred to by the OP above, in relation to Filament v2. Have you had a chance to implement Custom Error Pages with a v3 project? If not, that's cool, but if you have and would be willing to share some tips on implementing it for v3, it'd be appreciated!

jgreco•14mo ago

@DrByte I haven't implemented in v3 yet, but you can most likely accomplish the same using <x-filament-panels::page.simple> here's the Blade component for the simple page:

@props([
    'heading' => null,
    'subheading' => null,
])

<div {{ $attributes->class(['fi-simple-page']) }}>
    <section class="grid auto-cols-fr gap-y-6">
        <x-filament-panels::header.simple
            :heading="$heading ??= $this->getHeading()"
            :logo="$this->hasLogo()"
            :subheading="$subheading ??= $this->getSubHeading()"
        />

        {{ $slot }}
    </section>

    @if (! $this instanceof \Filament\Tables\Contracts\HasTable)
        <x-filament-actions::modals />
    @endif
</div>

@props([
    'heading' => null,
    'subheading' => null,
])

<div {{ $attributes->class(['fi-simple-page']) }}>
    <section class="grid auto-cols-fr gap-y-6">
        <x-filament-panels::header.simple
            :heading="$heading ??= $this->getHeading()"
            :logo="$this->hasLogo()"
            :subheading="$subheading ??= $this->getSubHeading()"
        />

        {{ $slot }}
    </section>

    @if (! $this instanceof \Filament\Tables\Contracts\HasTable)
        <x-filament-actions::modals />
    @endif
</div>

DrByte•14mo ago

using <x-filament-panels::page.simple> triggers Using $this when not in object context

jgreco•14mo ago

Hmm, the logo... one moment Unfortunately, I don't see a quick way (like in v2), just yet. You can copy vendor/filament/filament/resources/views/components/layout/base.blade.php into your own layout file, remove all references to $livewire, then you will be able to use Filament UI components to build out the page

Gaming

Programming

Custom error pages