Fix error handling to display them correctly without crashing

frontend/src/App.tsx

@@ -1,46 +1,50 @@
 import React from 'react';
 import './App.scss';
 import UserStatsMockService from "./mock/UserStatsMockService";
-import UserStats from "./models/TableEntry";
 import UserStatsService from "./services/UserStatsService";
 import {findDOMNode} from "react-dom";
 import TableEntry from "./models/TableEntry";
 
 interface State {
-  error?: any,
+  error?: string,
   isLoaded: boolean,
-  users?: UserStats[],
-  mock?: UserStats[]
+  users?: TableEntry[],
+  mock?: TableEntry[]
 }
 
 export default class App extends React.Component {
 
   private apiService: UserStatsService = new UserStatsService();
-  private mockService: UserStatsService = new UserStatsMockService();
+  private mockService = new UserStatsMockService();
 
   state: State = {
-    error: null,
+    error: undefined,
     isLoaded: false,
     users: undefined,
     mock: undefined
   }
 
   componentDidMount() {
-    this.setState({isLoaded: false})
-    this.mockService.getStats()
-      .then(data => this.setState({
-        data: data,
-        mock: data
-      }));
+    this.setState({isLoaded: false, mock: this.mockService.getStatsWithoutPromise()});
+    // this.mockService.getStats()
+    //   .then(data => this.setState({
+    //     data: data,
+    //     mock: data
+    //   }))
+    //   .finally(() => {
+    //   });
     this.apiService.getStats()
       .then(data => this.setState({
         isLoaded: true,
         users: data
       }))
-      .catch(error => this.setState({
-        isLoaded: true,
-        error: error
-      }));
+      .catch(error => {
+        error.response.json()
+          .then((err: any) => this.setState({
+            isLoaded: true,
+            error: err.error
+          }))
+      });
   }
 
   componentDidUpdate() {
@@ -73,6 +77,8 @@ export default class App extends React.Component {
       return this.createTableEntries(users);
     } else if (isLoaded && error != null && mock != null) {
       return this.createTableEntries(mock);
+    } else if (mock != null) {
+      return this.createTableEntries(mock);
     }
   }
 
@@ -80,7 +86,7 @@ export default class App extends React.Component {
     return (
       <div className="App">
         <p className="title">Humenius' TeamSpeak 3-Ranking</p>
-        { this.state.error != null ? <p className="error-message">Data could not be loaded. Please try again later!</p> : null}
+        { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null}
         <table>
           <thead>
           <tr>
@@ -89,7 +95,7 @@ export default class App extends React.Component {
             <th>Online time</th>
           </tr>
           </thead>
-          <tbody className={this.state.error != null ? "blurred" : undefined}>
+          <tbody className={this.state.error != null || !this.state.isLoaded ? "blurred" : undefined}>
             {this.renderTableData()}
           </tbody>
         </table>