feat: add custom 404 error page and handle exceptions for not found errors

This commit is contained in:
Frank John Begornia
2026-04-20 03:21:31 +08:00
parent e479cf41e4
commit 46217133e6
2 changed files with 98 additions and 0 deletions

View File

@@ -2,6 +2,8 @@
use Exception; use Exception;
use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler; use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
use Illuminate\Database\Eloquent\ModelNotFoundException;
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
class Handler extends ExceptionHandler { class Handler extends ExceptionHandler {
@@ -42,6 +44,11 @@ class Handler extends ExceptionHandler {
if (!$e instanceof Exception) { if (!$e instanceof Exception) {
$e = new \ErrorException($e->getMessage(), $e->getCode(), E_ERROR, $e->getFile(), $e->getLine()); $e = new \ErrorException($e->getMessage(), $e->getCode(), E_ERROR, $e->getFile(), $e->getLine());
} }
if ($e instanceof NotFoundHttpException || $e instanceof ModelNotFoundException) {
return response()->view('errors.404', [], 404);
}
return parent::render($request, $e); return parent::render($request, $e);
} }

View File

@@ -0,0 +1,91 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>404 | Page Not Found</title>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #f4f6f8;
color: #334155;
display: table;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
padding: 24px;
}
.content {
text-align: center;
display: inline-block;
background: #ffffff;
padding: 32px 28px;
border-radius: 10px;
border: 1px solid #e5e7eb;
max-width: 560px;
}
.code {
font-size: 52px;
font-weight: 700;
line-height: 1;
color: #111827;
margin-bottom: 14px;
}
.title {
font-size: 24px;
font-weight: 700;
color: #111827;
margin-bottom: 10px;
}
.message {
font-size: 15px;
line-height: 1.6;
margin-bottom: 22px;
}
.actions a {
display: inline-block;
padding: 10px 16px;
margin: 0 6px 8px;
text-decoration: none;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
}
.btn-primary {
background: #111827;
color: #ffffff;
}
.btn-secondary {
background: #ffffff;
color: #111827;
border: 1px solid #d1d5db;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="code">404</div>
<div class="title">Page Not Found</div>
<div class="message">The page you are looking for does not exist or may have been moved.</div>
<div class="actions">
<a href="{{ url('/') }}" class="btn-primary">Go to Home</a>
<a href="{{ url('teamstore') }}" class="btn-secondary">Browse Team Stores</a>
</div>
</div>
</div>
</body>
</html>