Improved prod error page [SLE-192][SLE-57]

samuelgfeller · Dec 17, 2023 · 93add20 · 93add20
1 parent a08c230
commit 93add20
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 139 deletions.
diff --git a/README.md b/README.md
@@ -193,7 +193,7 @@ JS modules are added as attributes to the `PhpRenderer` (`$this` in the template
 // CSS
 $this->addAttribute('css', ['assets/general/page-component/form/form.css',]);  
 // JS
-$this->addAttribute('js', ['assets/error/generic-error-page.js',]);  
+$this->addAttribute('js', ['assets/error/prod-error-page.js',]);  
 // JS module
 $this->addAttribute('jsModules', ['assets/general/dark-mode/dark-mode.js',]);  
 ```

diff --git a/config/defaults.php b/config/defaults.php
@@ -26,9 +26,7 @@
 $settings['error'] = [
     // Should be set to false in production. When set to true, it will throw an ErrorException for notices and warnings.
     'display_error_details' => false,
-    // Should be set to false for unit tests
     'log_errors' => true,
-    // Display error details in error log
     'log_error_details' => true,
 ];
 

diff --git a/public/assets/error/error-details.css b/public/assets/error/error-details.css
@@ -4,155 +4,151 @@
     font-weight: normal;
 }
 
-* {
-    /*white-space: break-spaces;*/
-    overflow-wrap: anywhere;
-}
-
-body {
-    margin: 0;
-    background: #ffd9d0;
-    font-family: Poppins, Geneva, AppleGothic, sans-serif;
-}
+/* mobile first min-width sets base and content is adapted to computers. */
+@media (min-width: 100px) {
 
-body.warning {
-    background: #ffead0;
-}
+    * {
+        overflow-wrap: anywhere;
+    }
 
-body.error {
-    background: #ffd9d0;
-}
+    body {
+        margin: 0;
+        background: #ffd9d0;
+        font-family: Poppins, Geneva, AppleGothic, sans-serif;
+    }
 
-#title-div {
-    padding: 5px 10%;
-    color: black;
-    margin: 30px;
-    background: tomato;
-    border-radius: 0 35px;
-    box-shadow: 0 0 17px tomato;
-}
+    body.warning {
+        background: #ffead0;
+    }
 
-#title-div h1 {
-    margin-top: 4px;
-}
+    body.error {
+        background: #ffd9d0;
+    }
 
-#title-div.warning {
-    background: orange;
-    box-shadow: 0 0 17px orange;
-}
+    #title-div {
+        padding: 5px 10%;
+        color: black;
+        background: tomato;
+        border-radius: 0 35px;
+        box-shadow: 0 0 17px tomato;
+        box-sizing: border-box;
+        margin: 30px 0;
+        font-size: 0.8em;
+    }
 
-#title-div.error {
-    background: tomato;
-    box-shadow: 0 0 17px tomato;
-}
+    #title-div h1 {
+        margin-top: 4px;
+    }
 
-#first-path-chunk {
-    font-size: 0.7em;
-}
+    #title-div.warning {
+        background: orange;
+        box-shadow: 0 0 17px orange;
+    }
 
-#trace-div {
-    width: 80%;
-    margin: auto auto 40px;
-    min-width: 350px;
-    padding: 20px;
-    background: #ff9e88;
-    border-radius: 0 35px;
-    box-shadow: 0 0 10px #ff856e;
-}
+    #title-div.error {
+        background: tomato;
+        box-shadow: 0 0 17px tomato;
+    }
 
-#trace-div.warning {
-    background: #ffc588;
-    box-shadow: 0 0 10px #ffad6e;
-}
+    #first-path-chunk {
+        font-size: 0.7em;
+    }
 
-#trace-div.error {
-    background: #ff9e88;
-    box-shadow: 0 0 10px #ff856e;
-}
+    #trace-div {
+        font-size: 0.8em;
+        margin: auto auto 40px;
+        min-width: 350px;
+        padding: 20px;
+        background: #ff9e88;
+        border-radius: 0 35px;
+        box-shadow: 0 0 10px #ff856e;
+        width: 90%;
+    }
 
-#trace-div h2 {
-    margin-top: 0;
-    padding-top: 19px;
-    text-align: center;
-}
+    #trace-div.warning {
+        background: #ffc588;
+        box-shadow: 0 0 10px #ffad6e;
+    }
 
-#trace-div table {
-    border-collapse: collapse;
-    width: 100%;
-    overflow-x: auto;
-}
+    #trace-div.error {
+        background: #ff9e88;
+        box-shadow: 0 0 10px #ff856e;
+    }
 
-#trace-div table td, #trace-div table th { /*border-top: 6px solid red;*/
-    padding: 8px;
-    text-align: left;
-}
+    #trace-div h2 {
+        margin-top: 0;
+        padding-top: 19px;
+        text-align: center;
+    }
 
-#trace-div table tr td:nth-child(3) {
-    min-width: 100px;
-}
+    #trace-div table {
+        border-collapse: collapse;
+        width: 100%;
+        overflow-x: auto;
+    }
 
-#num-th {
-    font-size: 2em;
-    color: #a46856;
-    margin-right: 50px;
-}
+    #trace-div table td, #trace-div table th { /*border-top: 6px solid red;*/
+        padding: 8px;
+        text-align: left;
+    }
 
-.non-vendor {
-    font-weight: bold;
-    font-size: 1.2em;
-}
+    #trace-div table tr td:nth-child(3) {
+        min-width: 100px;
+    }
 
-.non-vendor .lineSpan {
-    font-weight: bold;
-    color: #b00000;
-    font-size: 1.1em;
-}
+    #num-th {
+        font-size: 2em;
+        color: #a46856;
+        margin-right: 50px;
+    }
 
-.is-vendor {
-    font-weight: normal;
-}
+    .non-vendor {
+        font-weight: bold;
+        font-size: 1.2em;
+    }
 
-.args-span {
-    color: #395186;
-    cursor: pointer;
-}
+    .non-vendor .lineSpan {
+        font-weight: bold;
+        color: #b00000;
+        font-size: 1.1em;
+    }
 
-#exception-name {
-    float: right
-}
+    .is-vendor {
+        font-weight: normal;
+    }
 
-.function-td{
-    font-size: 0.9em;
-}
+    .args-span {
+        color: #395186;
+        cursor: pointer;
+    }
 
-/* When screen smaller than 1000px */
-@media screen and (max-width: 1000px) {
-    #trace-div {
-        font-size: 0.8em;
+    #exception-name {
+        float: right
     }
 
-    #title-div h1 {
-        font-size: 1.6em;
+    .function-td {
+        font-size: 0.9em;
     }
 }
 
-/* When screen smaller than 810px */
-@media screen and (max-width: 810px) {
-    #trace-div table {
-        font-size: 1.1em;
+@media (min-width: 641px) {
+    #trace-div {
+        width: 80%;
     }
-
+}
+@media (min-width: 810px) {
     #title-div {
-        box-sizing: border-box;
-        margin-left: 0;
-        margin-right: 0;
-        width: 100%;
+        margin: 30px;
     }
-}
-
-/* When screen bigger than 810px */
-@media screen and (min-width: 810px) {
     #trace-div table tr td:first-child, #trace-div table tr th:first-child {
         padding-left: 20px;
     }
+    #title-div{
+        font-size: 1em;
+    }
+}
+@media (min-width: 1000px) {
+    #trace-div {
+        font-size: 1em;
+    }
 }
diff --git a/public/assets/error/generic-error-page.css → public/assets/error/prod-error-page.css b/public/assets/error/generic-error-page.css → public/assets/error/prod-error-page.css
@@ -10,15 +10,20 @@
 }
 
 :root {
-    --error-body-gradient-color-1: rgb(213, 210, 255);
-    --error-body-gradient-color-2: rgba(158, 247, 255, 1);
+    --error-body-gradient-color-1: #49d2ff;
+    --error-body-gradient-color-2: #ea9bc2;
+
     --error-inner-section-background: rgba(255, 255, 255, 0.4);
     --error-reason-phrase-color: #535353;
+
+    --error-status-code-gradient-color-1: #00c1ff;
+    --error-status-code-gradient-color-2: #ff6bb4;
+
 }
 
 [data-theme="dark"] {
-    --error-body-gradient-color-1: rgb(84, 79, 131);
-    --error-body-gradient-color-2: rgb(44, 110, 117);
+    --error-body-gradient-color-1: rgb(102, 93, 182);
+    --error-body-gradient-color-2: rgb(64, 148, 157);
     --error-inner-section-background: rgba(0, 0, 0, 0.4);
     --error-reason-phrase-color: #a9a9a9;
 }
@@ -67,7 +72,8 @@
         margin-bottom: 0;
         margin-top: 0px;
         position: relative;
-        background: linear-gradient(to bottom right, #2acaff 0%, #ff86c0 100%);
+        background: linear-gradient(to bottom right, var(--error-status-code-gradient-color-1) 0%,
+        var(--error-status-code-gradient-color-2) 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
     }

diff --git a/public/assets/error/generic-error-page.js → public/assets/error/prod-error-page.js b/public/assets/error/generic-error-page.js → public/assets/error/prod-error-page.js
@@ -1,5 +1,6 @@
 const statusCode = document.getElementById('error-status-code');
 
+// Make the linear gradient direction of the status code follow the cursor
 document.documentElement.addEventListener("mousemove", function(event) {
   // Retrieve the bounding rectangle of the "statusCode" element
   const { left, top, width, height } = statusCode.getBoundingClientRect();
@@ -18,5 +19,8 @@ document.documentElement.addEventListener("mousemove", function(event) {
   const gradientDirection = degrees + 90;
 
   // Apply the linear gradient background to the "statusCode" element
-  statusCode.style.backgroundImage = `linear-gradient(${gradientDirection}deg, #2acaff 0%, #ff86c0 100%)`;
+  const style = getComputedStyle(document.body);
+  const color1 = style.getPropertyValue('--error-status-code-gradient-color-1');
+  const color2 = style.getPropertyValue('--error-status-code-gradient-color-2');
+  statusCode.style.backgroundImage = `linear-gradient(${gradientDirection}deg, ${color1} 0%, ${color2} 100%)`;
 });