Merge branch 'develop'

CHANGELOG.md

@@ -4,9 +4,15 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+## [1.2.5] - 2023-06-06
+
+- [#104](https://github.com/os2display/display-client/pull/104)
+  Changed error boundary page to show error.
+
 ## [1.2.4] - 2023-05-25
+
 - [#103](https://github.com/os2display/display-client/pull/103)
-Update PullStrategy to handle pagination.
+  Update PullStrategy to handle pagination.
 
 ## [1.2.3] - 2023-03-24
 

src/error-boundary.js

@@ -2,11 +2,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Logger from './logger/logger';
 import './error-boundary.scss';
+import fallback from './assets/fallback.png';
 
 class ErrorBoundary extends Component {
   constructor(props) {
     super(props);
-    this.state = { hasError: false };
+    this.state = { hasError: false, errorMessage: null, errorStackTrace: null };
   }
 
   // Update state so the next render will show the fallback UI.
@@ -19,14 +20,29 @@ class ErrorBoundary extends Component {
 
     const { errorHandler } = this.props;
     errorHandler(error, errorInfo);
+
+    this.setState({
+      errorMessage: error.message.toString(),
+      errorStackTrace: errorInfo.componentStack,
+    });
   }
 
   render() {
-    const { hasError } = this.state;
+    const { hasError, errorMessage, errorStackTrace } = this.state;
+
     if (hasError) {
       return (
-        <div className="error-boundary">
-          <div className="error-boundary-loader">Loading...</div>
+        <div
+          className="error-boundary"
+          style={{ backgroundImage: `url(${fallback})` }}
+        >
+          <div className="error-boundary-box">
+            <div className="error-boundary-header">Seneste log hændelser</div>
+            <pre className="error-boundary-stacktrace">
+              {errorMessage}
+              {errorStackTrace}
+            </pre>
+          </div>
         </div>
       );
     }

src/error-boundary.scss

@@ -1,73 +1,33 @@
 .error-boundary {
-  background-color: #b2b2b2;
+  background-color: #000;
+  background-size: cover;
+  background-position: center;
+  color: #ddd;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
   width: 100%;
   height: 100%;
+}
 
-  // From: https://github.com/lukehaas/css-loaders
-  .error-boundary-loader,
-  .error-boundary-loader:before,
-  .error-boundary-loader:after {
-    border-radius: 50%;
-    width: 2.5em;
-    height: 2.5em;
-    -webkit-animation: load7 1.8s infinite ease-in-out;
-    animation: load7 1.8s infinite ease-in-out;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-  }
-
-  .error-boundary-loader {
-    color: #ffffff;
-    font-size: 10px;
-    margin: 80px auto;
-    position: relative;
-    text-indent: -9999em;
-    -webkit-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    transform: translateZ(0);
-    -webkit-animation-delay: -0.16s;
-    animation-delay: -0.16s;
-  }
-
-  .error-boundary-loader:before,
-  .error-boundary-loader:after {
-    content: "";
-    position: absolute;
-    top: 0;
-  }
-
-  .error-boundary-loader:before {
-    left: -3.5em;
-    -webkit-animation-delay: -0.32s;
-    animation-delay: -0.32s;
-  }
-
-  .error-boundary-loader:after {
-    left: 3.5em;
-  }
+.error-boundary-box {
+  margin: 1em;
+  border: 1px solid #fff;
+  padding: 1em;
+  border-radius: 5px;
+}
 
-  @-webkit-keyframes load7 {
-    0%,
-    80%,
-    100% {
-      box-shadow: 0 2.5em 0 -1.3em;
-    }
-    40% {
-      box-shadow: 0 2.5em 0 0;
-    }
-  }
+.error-boundary-header {
+  font-weight: bold;
+  font-family: "Arial", sans-serif;
+  font-size: 1.2em;
+}
 
-  @keyframes load7 {
-    0%,
-    80%,
-    100% {
-      box-shadow: 0 2.5em 0 -1.3em;
-    }
-    40% {
-      box-shadow: 0 2.5em 0 0;
-    }
-  }
+.error-boundary-stacktrace {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
 }