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

2026-04-20 03:21:31 +08:00
2 changed files with 98 additions and 0 deletions
--- a/app/Exceptions/Handler.php
+++ b/app/Exceptions/Handler.php
@@ -2,6 +2,8 @@

 use Exception;
 use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
+use Illuminate\Database\Eloquent\ModelNotFoundException;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

 class Handler extends ExceptionHandler {

@@ -42,6 +44,11 @@ class Handler extends ExceptionHandler {
 		if (!$e instanceof Exception) {
 			$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);
 	}

--- a/resources/views/errors/404.blade.php
+++ b/resources/views/errors/404.blade.php
@@ -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>