Laravel has already done a great job by providing simplistic and generating error pages that show the status code of the error with a message on the page. Still, in some cases, this is not enough and users who have an idea of the Laravel error page can quickly tell the framework used to develop a particular product by merely seeing the 404 or 500 pages. This is even worse when using Inertiajs which shows the error page on the modal and not the full page.

Without much talk let's look at how we can override the error pages with our own customized error pages with the following steps

Step 1: Create a folder named Errors inside your Pages directory, you could also name the folder anything you want, but am using Errors for clarity.

Step 2: Create the pages inside the folder you created e.g. 404.vue, 500.vue and place the content you want users to see if the 404 or 500 error is triggered.

Step 3: Go to your app/Exceptions/Handlers.php

Step 4: Then do this on the render method

 public function render($request, Throwable $e)
    {
        $response = parent::render($request, $e);
        $status = $response->status();

        if (!app()->environment(['local', 'testing'])) {

            return match ($status) {
                404 => Inertia::render('Errors/404')->toResponse($request)->setStatusCode($status),
                500, 503 => Inertia::render('Errors/500')->toResponse($request)->setStatusCode($status),
                403 => Inertia::render('Errors/403')->toResponse($request)->setStatusCode($status),
                401 => Inertia::render('Errors/401')->toResponse($request)->setStatusCode($status),
                419 => redirect()->back()->withErrors(['status' => __('The page expired, please try again.')]),
                default => $response
            };

        }

        return $response;

    }

This code defines a custom exception handler in a Laravel application. It overrides the render() method from Laravel's ExceptionHandler class to handle exceptions and return the appropriate response.

The method first calls the parent render() method to get the response object for the exception. Then, it checks if the application environment is not 'local' or 'testing'. If it's not, it uses a match statement to determine the appropriate response based on the HTTP status code of the exception.

For example, if the status code is 404, it returns an Inertia response that renders a custom 404 error page. If the status code is 500 or 503, it returns an Inertia response that renders a custom 500 error page. If the status code is 419, it redirects back to the previous page and displays an error message that the page has expired. If none of these conditions match, it simply returns the original response.

With this, you can give a user more friendly pages when errors occurs on your application.