How to customize the timeout 504 error page in laravel livewire?

Question

I'm using laravel 9 and livewire v2. When a time-out error occurs, it currently shows a dark gray modal with black text which can be barely read as seen in the image.

I have customized other errors such as 404, 500, etc successfully with the laravel documentation. However this does not seem to work for a 504.

How can I customize this view?

Answer 1

The page itself is not coming from Laravel, it's an Nginx error page. You can customise this in your Nginx configuration, but the simplest approach is to intercept the response from the Livewire request's callback on error.

When you use the Livewire.onError JavaScript hook, you have to return false in order to prevent the default behaviour by Livewire.

Put the following JavaScript on your page somewhere after you have registered Livewire, and modify the action inside to do whatever is appropriate for you.

Livewire.onError((message, statusCode) => {
    if (statusCode == 504) {
        // Handle the timeout here, then return false
        return false;
    }
});