Level 2
@devhoussam123 Have you found a solution to your error?
Sep 23, 2023
8
Level 2
How to customize Laravel 10 with Inertia.js v1.0 Error Pages?
I follow the https://inertiajs.com/error-handling but i still can't get my js/Pages/Errors/404.vue Page when I type a not found url example: https://laravel-inertia.test/foo
composer.json
"inertiajs/inertia-laravel": "^0.6.8",
"laravel/framework": "^10.10",
package.json
"vue": "^3.2.31"
Handler.php
<?php
namespace App\Exceptions;
use Throwable;
use Inertia\Inertia;
use Illuminate\Http\Request;
use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
class Handler extends ExceptionHandler
{
/**
* The list of the inputs that are never flashed to the session on validation exceptions.
*
* @var array<int, string>
*/
protected $dontFlash = [
'current_password',
'password',
'password_confirmation',
];
/**
* Register the exception handling callbacks for the application.
*/
public function register(): void
{
$this->renderable(function (Throwable $e, Request $request) {
$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),
default => $response
};
}
return $response;
});
}
}
js/Pages/Errors/404.vue
<script setup>
import GuestLayout from "@/Layouts/GuestLayout.vue";
</script>
<template>
<GuestLayout title="404">
<div class="py-5">
<div class="container py-5">
<h1 class="display-4 fw-bold">
Error 404 Not Found
</h1>
</div>
</div>
</GuestLayout>
</template>
.env
APP_ENV=production
Level 1
Not really an direst answer to your question. But maybe you can cope returning a regular non-inertia response in that case. Inertia's demo seems to do just that.
Level 2
Hi there! I made an app in which I had 404 custom and also when there is authorization/authentication error:
404 -> routes/web.php
Route::fallback(function () {
return inertia('404');
});
Authorization exception in app/Exceptions/Handler.php
public function render($request, Throwable $exception)
{
if ($exception instanceof AuthorizationException) {
return Inertia::render('Access');
}
return parent::render($request, $exception);
}
Now you got me thinking, I can have both in the handler. Try making a method in the handler that is like my render method, it surely works, you would just have to make an if of NotFoundException.
EDIT
@gych method works perfectly, I have updated mine:
public function render($request, Throwable $e)
{
$response = parent::render($request, $e);
$status = $response->getStatusCode();
return match ($status) {
403 => Inertia::render('Access')->toResponse($request)->setStatusCode($status),
404 => Inertia::render('404')->toResponse($request)->setStatusCode($status),
500, 503 => Inertia::render('Error')->toResponse($request)->setStatusCode($status),
default => $response
};
return $response;
}
Level 2
The register method only worked for me when I make global exceptions for apis.
Level 29
@adriancolom @ivangretsky @cd4success
This is how I do it, it gives me the option to add custom pages for each status
In app/Exceptions/Handler.php, I have this code at the bottom of the file under /** * Register the exception handling callbacks for the application. */
Don't forget to check if the right environment is added, this statement will allow you to view the default error pages on local
public function render($request, Throwable $e)
{
$response = parent::render($request, $e);
$status = $response->getStatusCode();
if (!app()->environment(['local'])) { // Make sure you add the right environment here
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;
}
1 like
Level 2
@gych with your method do you need to do try catch and throw the error?
Level 29
@AdrianColom No it just renders the page when the response contains a statusCode that is defined in this method. If the status code is not added it will show the default laravel error page.
1 like
Level 1
APP_ENV=local
/**
* A list of error messages
*
* @var array<int, string>
*/
protected array $messages = [
500 => 'Something went wrong',
503 => 'Service unavailable',
404 => 'Not found',
403 => 'Not authorized',
];
Replace this with the render function
/** * Render an exception into an HTTP response. * * @param \Illuminate\Http\Request $request * @return \Symfony\Component\HttpFoundation\Response * * @throws \Throwable */
public function render($request, Throwable $e) { $response = parent::render($request, $e);
$status = $response->getStatusCode();
if (! array_key_exists($status, $this->messages)) {
return $response;
}
return inertia('Error', [
'status' => $status,
'message' => $this->messages[$status],
])
->toResponse($request)
->setStatusCode($status);
}
Please or to participate in this conversation.