diff --git a/webapp/frontend/src/lib/mlog_watcher/channel.ts b/webapp/frontend/src/lib/mlog_watcher/channel.ts index d07db18ae..aae210563 100644 --- a/webapp/frontend/src/lib/mlog_watcher/channel.ts +++ b/webapp/frontend/src/lib/mlog_watcher/channel.ts @@ -19,17 +19,25 @@ export type MlogWatcherChannelError = { [mlogWatcherChannelErrorTag]: true; } & ({ type: 'disconnected' } | { type: 'connectionError' }); +export interface MlogWatcherChannelClosedEvent { + code: number; + wasOpen: boolean; +} + export class MlogWatcherChannel { private nextId = 0; private pendingInvocations = new Map>(); private socket: WebSocket; + private isOpen = false; ready: Promise; + closed: Promise; constructor(port: number) { this.socket = new WebSocket(`ws://localhost:${port}/v1`); this.ready = new Promise((resolve, reject) => { this.socket.onopen = () => { + this.isOpen = true; resolve(); }; @@ -42,7 +50,6 @@ export class MlogWatcherChannel { }; this.socket.onmessage = (event) => { - console.log(event.data); const response: MlogWatcherResponse = JSON.parse(event.data); const completer = this.pendingInvocations.get(response.invocation_id); if (!completer) { @@ -54,6 +61,15 @@ export class MlogWatcherChannel { this.pendingInvocations.delete(response.invocation_id); }; }); + + this.closed = new Promise((resolve) => { + this.socket.addEventListener('close', (event) => { + resolve({ + code: event.code, + wasOpen: this.isOpen + }); + }); + }); } private assertSocketOpen(socket: WebSocket) { @@ -78,7 +94,6 @@ export class MlogWatcherChannel { const completer = new Completer(); this.pendingInvocations.set(invocation.invocation_id, completer); const content = JSON.stringify(invocation); - console.log('Sending invocation:', content); this.socket.send(content); return completer.promise as Promise; } diff --git a/webapp/frontend/src/lib/mlog_watcher/store.svelte.ts b/webapp/frontend/src/lib/mlog_watcher/store.svelte.ts index 337337082..19120497b 100644 --- a/webapp/frontend/src/lib/mlog_watcher/store.svelte.ts +++ b/webapp/frontend/src/lib/mlog_watcher/store.svelte.ts @@ -29,6 +29,7 @@ export class MlogWatcherStore { channel.ready.catch((error) => { this.channel = new Completer(); this.#initialized = false; + toast.error( 'Mlog Watcher connection failed. Please ensure the Mlog Watcher server is running and the port is correct.' ); @@ -37,6 +38,19 @@ export class MlogWatcherStore { } }); + channel.closed.then((e) => { + if (!e.wasOpen) return; + + this.channel = new Completer(); + this.#initialized = false; + + if (e.code !== 1000) { + toast.error( + `Mlog Watcher connection closed unexpectedly. Websocket close code: ${e.code}` + ); + } + }); + return () => { channel.close(); this.channel = new Completer();