Use Notification for error 500 in production

Hello,
With error handling, how do you manage to display a notification instead of the classical big gray screen for error 500 in production ?
I just would like to say there is an error, contact the support.
Best regards,

Solution

Hello Dennis, in production I have APP_DEBUG=false, however I still have this big gray screen.
So if somebody is interested, I found a solution. In

resources/js/app.js

resources/js/app.js

Insert the following code :

document.addEventListener('livewire:init', () => {
    Livewire.hook('request', ({ fail }) => {
        fail(({ status, preventDefault }) => {
            if (status === 500 && !import.meta.env.VITE_APP_DEBUG) {
                new FilamentNotification()
                    .title('Error')
                    .danger()
                    .body('Support team received an error notification. We will contact you as soon as possible.')
                    .send()

                preventDefault()
            }
        })
    })
})

document.addEventListener('livewire:init', () => {
    Livewire.hook('request', ({ fail }) => {
        fail(({ status, preventDefault }) => {
            if (status === 500 && !import.meta.env.VITE_APP_DEBUG) {
                new FilamentNotification()
                    .title('Error')
                    .danger()
                    .body('Support team received an error notification. We will contact you as soon as possible.')
                    .send()

                preventDefault()
            }
        })
    })
})

And in .env :

VITE_APP_DEBUG=true

VITE_APP_DEBUG=true

With vite app debug, you can still display regular message in your dev env but use the notification in your prod env.
You can customize every error message. For my case it's nice, so I receive on Flare the error but user is not bother.

Jump to solution

Use Notification for error 500 in production

Solution

Hello Dennis, in production I have APP_DEBUG=false, however I still have this big gray screen.
So if somebody is interested, I found a solution. In

resources/js/app.js

resources/js/app.js

Insert the following code :

document.addEventListener('livewire:init', () => {
    Livewire.hook('request', ({ fail }) => {
        fail(({ status, preventDefault }) => {
            if (status === 500 && !import.meta.env.VITE_APP_DEBUG) {
                new FilamentNotification()
                    .title('Error')
                    .danger()
                    .body('Support team received an error notification. We will contact you as soon as possible.')
                    .send()

                preventDefault()
            }
        })
    })
})

document.addEventListener('livewire:init', () => {
    Livewire.hook('request', ({ fail }) => {
        fail(({ status, preventDefault }) => {
            if (status === 500 && !import.meta.env.VITE_APP_DEBUG) {
                new FilamentNotification()
                    .title('Error')
                    .danger()
                    .body('Support team received an error notification. We will contact you as soon as possible.')
                    .send()

                preventDefault()
            }
        })
    })
})

And in .env :

VITE_APP_DEBUG=true

VITE_APP_DEBUG=true

Jump to solution

Use Notification for error 500 in production

Use Notification for error 500 in production

Similar Threads

Similar Threads

Similar Threads