[ZEPPELIN-6375] Add auto-reconnect for abnormal WebSocket closures in new UI
### What is this PR for?
This PR adds automatic WebSocket reconnection for non-normal connection closures to the Angular UI (`zeppelin-web-angular`), matching the behavior of the legacy AngularJS UI.
Previously, when the WebSocket connection was closed abnormally (e.g., due to network issues, server timeouts, or browser tab throttling), the Angular UI would not attempt to reconnect, leaving users with a broken connection and requiring a manual page refresh.
This fix monitors WebSocket close events and automatically reconnects when the close code is not 1000 (Normal Closure).
### What type of PR is it?
Bug Fix
### Todos
* [x] - Add reconnection logic for non-normal close codes
### What is the Jira issue?
https://issues.apache.org/jira/browse/ZEPPELIN-6375
- Another related issue: https://issues.apache.org/jira/browse/ZEPPELIN-6374
### How should this be tested?
1. Start Zeppelin server locally
2. Open a notebook in the new UI
3. Test abnormal closure scenarios:
- e.g., **Tab throttling**: Leave the tab inactive for 2+ minutes (If you could watch the logs for `ZeppelinServer`, then you could check the timeout disconnect right away.).
4. Verify that:
- WebSocket automatically reconnects after idle timeout.
- Console shows "WebSocket closed unexpectedly. Reconnecting...".
- Notebook operations work after reconnection and connection status icon remain green color.
### Questions:
* Does the license files need to update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No
Closes #5116 from tbonelee/fix-websocket.
Signed-off-by: ChanHo Lee <chanholee@apache.org>
diff --git a/zeppelin-web-angular/projects/zeppelin-sdk/src/message.ts b/zeppelin-web-angular/projects/zeppelin-sdk/src/message.ts
index 25d0683..f63f693 100644
--- a/zeppelin-web-angular/projects/zeppelin-sdk/src/message.ts
+++ b/zeppelin-web-angular/projects/zeppelin-sdk/src/message.ts
@@ -52,6 +52,7 @@
private ticket?: Ticket;
private uniqueClientId = Math.random().toString(36).substring(2, 7);
private lastMsgIdSeqSent = 0;
+ private readonly normalCloseCode = 1000;
constructor() {
this.open$.subscribe(() => {
@@ -60,10 +61,15 @@
this.pingIntervalSubscription.unsubscribe();
this.pingIntervalSubscription = interval(1000 * 10).subscribe(() => this.ping());
});
- this.close$.subscribe(() => {
+ this.close$.subscribe(event => {
this.connectedStatus = false;
this.connectedStatus$.next(this.connectedStatus);
this.pingIntervalSubscription.unsubscribe();
+
+ if (event.code !== this.normalCloseCode) {
+ console.log('WebSocket closed unexpectedly. Reconnecting...');
+ this.connect();
+ }
});
}
