Output clean error page on health check route (laravel#53528)

* Enhancements to health check page Inline CSS rather than depending on CDN * Revert to use CDN
mdariftiens · Nov 18, 2024 · 9894eee · 9894eee
1 parent 0ca47f9
commit 9894eee
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 39 deletions.
diff --git a/src/Illuminate/Foundation/Configuration/ApplicationBuilder.php b/src/Illuminate/Foundation/Configuration/ApplicationBuilder.php
@@ -211,9 +211,23 @@ protected function buildRoutingCallback(array|string|null $web,
 
             if (is_string($health)) {
                 Route::get($health, function () {
-                    Event::dispatch(new DiagnosingHealth);
+                    $exception = null;
 
-                    return View::file(__DIR__.'/../resources/health-up.blade.php');
+                    try {
+                        Event::dispatch(new DiagnosingHealth);
+                    } catch (\Throwable $e) {
+                        if (app()->hasDebugModeEnabled()) {
+                            throw $e;
+                        }
+
+                        report($e);
+
+                        $exception = $e->getMessage();
+                    }
+
+                    return response(View::file(__DIR__.'/../resources/health-up.blade.php', [
+                        'exception' => $exception,
+                    ]), status: $exception ? 500 : 200);
                 });
             }
 

diff --git a/src/Illuminate/Foundation/resources/health-up.blade.php b/src/Illuminate/Foundation/resources/health-up.blade.php
@@ -1,52 +1,52 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <title>{{ config('app.name', 'Laravel') }}</title>
+    <title>{{ config('app.name', 'Laravel') }}</title>
 
-        <!-- Fonts -->
-        <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
 
-        <!-- Styles -->
-        <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Styles -->
+    <script src="https://cdn.tailwindcss.com"></script>
 
-        <script>
-            tailwind.config = {
-                theme: {
-                    extend: {
-                        fontFamily: {
-                            sans: ['Figtree', 'ui-sans-serif', 'system-ui', 'sans-serif', "Apple Color Emoji", "Segoe UI Emoji"],
-                        }
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Figtree', 'ui-sans-serif', 'system-ui', 'sans-serif', "Apple Color Emoji", "Segoe UI Emoji"],
                     }
                 }
             }
-        </script>
-    </head>
-    <body class="antialiased">
-        <div class="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-gray-100 selection:bg-red-500 selection:text-white">
-            <div class="w-full sm:w-3/4 xl:w-1/2 mx-auto p-6">
-                <div class="px-6 py-4 bg-white from-gray-700/50 via-transparent rounded-lg shadow-2xl shadow-gray-500/20 flex items-center focus:outline focus:outline-2 focus:outline-red-500">
-                    <div class="relative flex h-3 w-3">
-                      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
-                      <span class="relative inline-flex rounded-full h-3 w-3 bg-green-400"></span>
-                    </div>
+        }
+    </script>
+</head>
+<body class="antialiased">
+<div class="relative flex justify-center items-center min-h-screen bg-gray-100 selection:bg-red-500 selection:text-white">
+    <div class="w-full sm:w-3/4 xl:w-1/2 mx-auto p-6">
+        <div class="px-6 py-4 bg-white from-gray-700/50 via-transparent rounded-lg shadow-2xl shadow-gray-500/20 flex items-center focus:outline focus:outline-2 focus:outline-red-500">
+            <div class="relative flex h-3 w-3 group {{ $exception ? 'status-down' : null }}">
+                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 group-[.status-down]:bg-red-600 opacity-75"></span>
+                <span class="relative inline-flex rounded-full h-3 w-3 bg-green-400 group-[.status-down]:bg-red-600"></span>
+            </div>
 
-                    <div class="ml-6">
-                        <h2 class="text-xl font-semibold text-gray-900">Application up</h2>
+            <div class="ml-6">
+                <h2 class="text-xl font-semibold text-gray-900">Application {{ $exception ? 'experiencing problems' : 'up' }}</h2>
 
-                        <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                            HTTP request received.
+                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
+                    HTTP request received.
 
-                            @if (defined('LARAVEL_START'))
-                                Response successfully rendered in {{ round((microtime(true) - LARAVEL_START) * 1000) }}ms.
-                            @endif
-                        </p>
-                    </div>
-                </div>
+                    @if (defined('LARAVEL_START'))
+                        Response rendered in {{ round((microtime(true) - LARAVEL_START) * 1000) }}ms.
+                    @endif
+                </p>
             </div>
         </div>
-    </body>
+    </div>
+</div>
+</body>
 </html>