Rendering error pages in Inertia

Inertia peeps 👋

How do you handle/show errors in your Inertia apps? I mean, in Laravel + Blade we can publish the error pages and add status code as a filename if we need to catch specific errors.

However, in Inertia when we encounter an error it shows in a modal. Has anyone implemented a way to catch errors and show a Vue component page for it? Also, I think when we get the Page Expired error we handle it differently.

LaryAI

2 years ago

Level 58

To handle and show errors in Inertia apps, you can follow these steps:

Create a Vue component for your error page. Let's call it ErrorPage.vue. This component will be responsible for displaying the error message and any additional information you want to show.
In your Laravel controller, catch the specific errors you want to handle and return an Inertia response with the error page component. You can use the Inertia::render method to render the error page component.

Here's an example of how you can handle a specific error, such as a 404 Not Found error:

use Inertia\Inertia;

public function show($id)
{
    $model = Model::find($id);

    if (!$model) {
        return Inertia::render('ErrorPage', [
            'message' => 'The requested resource was not found.',
        ])->toResponse(request());
    }

    // Rest of your code
}

In your Vue router, define a route for the error page component. This route should match the URL pattern you want to use for displaying error pages.

import ErrorPage from './components/ErrorPage.vue';

const routes = [
    // Your other routes
    {
        path: '/error',
        name: 'error',
        component: ErrorPage,
    },
];

When an error occurs, you can redirect the user to the error page route. You can do this by using the window.location.href property or by using Vue Router's router.push method.

// Example of redirecting to the error page route
window.location.href = '/error';

That's it! Now, when an error occurs, the user will be redirected to the error page route, and the ErrorPage component will be displayed.

Note: You can customize the error page component to fit your needs and handle different types of errors by extending this solution.