Merge branch 'develop' of github.com:thecodingmachine/workadventure

front/src/Connexion/AxiosUtils.ts

@@ -0,0 +1,37 @@
+import axios from "axios";
+import * as rax from "retry-axios";
+import { errorStore } from "../Stores/ErrorStore";
+
+/**
+ * This instance of Axios will retry in case of an issue and display an error message as a HTML overlay.
+ */
+export const axiosWithRetry = axios.create();
+axiosWithRetry.defaults.raxConfig = {
+    instance: axiosWithRetry,
+    retry: Infinity,
+    noResponseRetries: Infinity,
+
+    maxRetryAfter: 60_000,
+
+    // You can detect when a retry is happening, and figure out how many
+    // retry attempts have been made
+    onRetryAttempt: (err) => {
+        const cfg = rax.getConfig(err);
+        console.log(err);
+        console.log(cfg);
+        console.log(`Retry attempt #${cfg?.currentRetryAttempt} on URL '${err.config.url}'`);
+        errorStore.addErrorMessage("Unable to connect to WorkAdventure. Are you connected to internet?", {
+            closable: false,
+            id: "axios_retry",
+        });
+    },
+};
+
+axiosWithRetry.interceptors.response.use((res) => {
+    if (res.status < 400) {
+        errorStore.clearMessageById("axios_retry");
+    }
+    return res;
+});
+
+const interceptorId = rax.attach(axiosWithRetry);

front/src/Connexion/ConnectionManager.ts

@@ -11,6 +11,7 @@ import { loginSceneVisibleIframeStore } from "../Stores/LoginSceneStore";
 import { userIsConnected } from "../Stores/MenuStore";
 import { analyticsClient } from "../Administration/AnalyticsClient";
 import { gameManager } from "../Phaser/Game/GameManager";
+import { axiosWithRetry } from "./AxiosUtils";
 
 class ConnectionManager {
     private localUser!: LocalUser;
@@ -233,7 +234,7 @@ class ConnectionManager {
     }
 
     public async anonymousLogin(isBenchmark: boolean = false): Promise<void> {
-        const data = await Axios.post(`${PUSHER_URL}/anonymLogin`).then((res) => res.data);
+        const data = await axiosWithRetry.post(`${PUSHER_URL}/anonymLogin`).then((res) => res.data);
         this.localUser = new LocalUser(data.userUuid, [], data.email);
         this.authToken = data.authToken;
         if (!isBenchmark) {

front/src/Connexion/Room.ts

@@ -1,7 +1,10 @@
+import * as rax from "retry-axios";
 import Axios from "axios";
 import { CONTACT_URL, PUSHER_URL, DISABLE_ANONYMOUS, OPID_LOGIN_SCREEN_PROVIDER } from "../Enum/EnvironmentVariable";
 import type { CharacterTexture } from "./LocalUser";
 import { localUserStore } from "./LocalUserStore";
+import axios from "axios";
+import { axiosWithRetry } from "./AxiosUtils";
 
 export class MapDetail {
     constructor(public readonly mapUrl: string, public readonly textures: CharacterTexture[] | undefined) {}
@@ -90,7 +93,7 @@ export class Room {
 
     private async getMapDetail(): Promise<MapDetail | RoomRedirect> {
         try {
-            const result = await Axios.get(`${PUSHER_URL}/map`, {
+            const result = await axiosWithRetry.get(`${PUSHER_URL}/map`, {
                 params: {
                     playUri: this.roomUrl.toString(),
                     authToken: localUserStore.getAuthToken(),

front/src/Connexion/RoomConnection.ts

@@ -255,6 +255,9 @@ export class RoomConnection implements RoomConnection {
                 warningContainerStore.activateWarningContainer();
             } else if (message.hasRefreshroommessage()) {
                 //todo: implement a way to notify the user the room was refreshed.
+            } else if (message.hasErrormessage()) {
+                const errorMessage = message.getErrormessage() as ErrorMessage;
+                console.error("An error occurred server side: " + errorMessage.getMessage());
             } else {
                 throw new Error("Unknown message received");
             }