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>

frontend/src/mock/UserStatsMockService.ts

@@ -19,4 +19,8 @@ export default class UserStatsMockService extends UserStatsService {
     async getStats(): Promise<TableEntry[]> {
         return Promise.resolve(this.entries);
     }
+
+    getStatsWithoutPromise(): TableEntry[] {
+        return this.entries;
+    }
 }

frontend/src/models/RequestError.ts

@@ -0,0 +1,3 @@
+export default class RequestError extends Error {
+  response?: any;
+}

frontend/src/services/UserStatsService.ts

@@ -1,4 +1,6 @@
 import TableEntry from "../models/TableEntry";
+import RequestError from "../models/RequestError";
+
 
 export default class UserStatsService {
 
@@ -13,13 +15,16 @@ export default class UserStatsService {
 
   async getStats(): Promise<TableEntry[]> {
     return fetch(this.apiURL, this.requestInit)
-      .then(res => this.checkResponse(res))
-      .then(data => data.json())
+      .then(res => UserStatsService.checkResponse(res))
+      .then(data => data.json());
   }
 
-  private checkResponse(response: any): any {
+  private static checkResponse(response: any): any {
     if (!response.ok) {
-      throw Error(response.statusText);
+      console.log(response);
+      let error = new RequestError(response.statusText);
+      error.response = response;
+      throw error;
     }
     return response;
   }