Handle network errors

js/controller.js

@@ -128,25 +128,24 @@ async function switchToChannel(client, team, channel) {
 		}
 	}
 
-	byId("channel_contents").innerText = "Loading…";
-	client.channelPosts(channel.id)
-		.then(response => {
-			console.info(`Got channel contents of ${channel.id} (${channel.name})`);
-			response.order.reverse();
-			populateChannelContents(client, channel, response);
-
-			markChannelAsRead(client, channel);
-		})
-		.catch(error => {
-			console.error(error);
-			byId("channel_contents").innerText = `Failed to get channel contents:\n${error.message}`;
-		});
-
 	const users = await client.getUsers();
 	const [title, elements] = channelNameElements(team, channel, client.me["id"], users);
 	byId("channel_header").innerHTML = "";
 	byId("channel_header").append(...elements);
 	byId("compose").setAttribute("placeholder", `Write to ${byId("channel_header").textContent}`);
+
+	byId("channel_contents").innerText = "Loading…";
+	try {
+		const response = await client.channelPosts(channel.id);
+		console.info(`Got channel contents of ${channel.id} (${channel.name})`);
+		response.order.reverse();
+		populateChannelContents(client, channel, response);
+
+		markChannelAsRead(client, channel);
+	} catch(error) {
+		console.error(error);
+		byId("channel_contents").innerText = `Failed to get channel contents:\n${error.message}`;
+	}
 }
 
 function sendMessage(endpoint, channel_id, message) {

js/mm_client.js

@@ -10,6 +10,7 @@ class MattermostClient {
 		this.token = creds ? creds.token : null;
 		console.info(`Created MattermostClient for ${this.endpoint}, ${this.token ? "found token" : "did not find token"}`);
 
+		this.socket = null;
 		this.channelStore = new store.ChannelStore(this);
 	}
 
@@ -58,16 +59,36 @@ class MattermostClient {
 	start() {
 		assert(this.token);
 
-		const users = this.getUsers();
+		if (this.socket) {
+			try {
+				this.socket.close();
+			} catch(e) {}
+		}
+
+		const users = this.regetUsers();
 		const me = this.userMe().then(data => {this.me = data;});
-		const channels = this.channelStore.get();
+		const channels = this.channelStore.fetch();
 
 		return Promise.all([
 			users,
 			me,
 			channels
 		])
-			.then(() => {this.websocket();});
+			.then(() => this.websocket())
+			.then(async () => {
+				const curChan = currentChannel();
+				if (curChan.endpoint === this.endpoint) {
+					console.debug("Reloading channel");
+					const {channels, teams, unread} = await this.channelStore.get();
+					const channel = channels[curChan.channel_id];
+					const team = channel["team_id"] ? teams[channel["team_id"]] : null;
+					await switchToChannel(this, team, channel);
+				}
+			})
+			.catch(e => {
+				console.error("Could not connect, trying again in 5 seconds", e);
+				window.setTimeout(() => this.start(), 5000);
+			});
 	}
 
 	async loggedIn() {
@@ -197,12 +218,17 @@ class MattermostClient {
 		const socket = new WebSocket(endpoint);
 
 		socket.addEventListener("error", event => {
-			console.error("Websocket errored", event.data);
+			console.error("Websocket errored", event);
-			this.regetUsers();
+			try {
+				socket.close();
+			} catch(e) {}
+
+			this.start();
 		});
 
 		socket.addEventListener("close", event => {
-			 console.info("Websocket closed", event.data);
+			this.socket = null;
+			console.info("Websocket closed", event);
 		});
 
 		socket.addEventListener("open", event => {
@@ -238,6 +264,8 @@ class MattermostClient {
 
 		});
 
+		this.socket = socket;
+
 	}
 }
 

js/store.js

@@ -50,7 +50,8 @@ class ChannelStore {
 				this._fetching = false;
 
 				pubsub.publish("CHANNELS_RELOADED");
-			});
+			})
+			.catch(() => {this._fetching = false;});
 	}
 
 	async get() {