[TS] HubConnection stuck in Disconnecting state

[M0ns1gn0r]

Describe the bug

After I wake up my PC from sleep, the WebSocket connection gets terminated (which is OK). Sometimes it cannot be restarted and then HubConnection.state becomes Disconnecting forever:

• .start() always throws Cannot start a HubConnection that is not in the 'Disconnected' state.
• .stop() returns a promise which doesn't resolve ever.

---

Logs after waking up the PC from sleep:

---

Internals of the corrupted HubConnection:

Exceptions (if any)

Error: Cannot start a HubConnection that is not in the 'Disconnected' state.
    at e.<anonymous> (2.1fa56808.chunk.js:formatted:42032)
    at 2.1fa56808.chunk.js:formatted:41930
    at Object.next (2.1fa56808.chunk.js:formatted:41943)
    at 2.1fa56808.chunk.js:formatted:41850
    at new Promise (<anonymous>)
    at C (2.1fa56808.chunk.js:formatted:41829)
    at e.startWithStateTransitions (2.1fa56808.chunk.js:formatted:42026)
    at e.start (2.1fa56808.chunk.js:formatted:42021)
    at e.<anonymous> (SignalRService.ts:39)
    at s (2.1fa56808.chunk.js:formatted:60817)

Further technical details

• Chrome 89.0.4389.72
• @microsoft/signalr 5.0.3
• Azure Functions V3
• Azure SignalR service in "Serverless" mode.

[BrennanConroy]

Can you share the debug logs from the client?

[M0ns1gn0r]

Explanation

I opened 3 identical browser tabs and put the PC to sleep overnight. Today I woke it up and the connection was successfully restored in all tabs. Then I put the PC to sleep again, after waking up the issue reproduced in all 3 tabs.

1st sleep: reconnected normally

2nd sleep: stuck in "Disconnecting"

• SignalRClient is the sink for your library's log messages.

• SignalRService is our service that starts the connection when a user logs in and stops it when he logs out.

  export class SignalRService {
    private readonly _connection: HubConnection;
    private _accessToken: string | undefined;
  
    constructor() {
      this._connection = new HubConnectionBuilder()
        .withUrl(
          config.serviceUrl,
          {
            withCredentials: false,
            accessTokenFactory: () =>
              this._accessToken ?? Promise.reject("No user is logged in.")
          })
        .withAutomaticReconnect()
        .configureLogging(new TelemetryLoggerAdapter())
        .build();
  
      this._connection.on("jobCancelled", () => { /* irrelevant */});
      this._connection.on("walletBalanceUpdated", () => { /* irrelevant */ });
  
      eventHub.loggedIn.subscribe(this.start.bind(this));
      eventHub.loggedOut.subscribe(this.stop.bind(this));
    }
  
    private async start(userId: string, accessToken: string): Promise<void> {
      this._accessToken = accessToken;
      if (this._connection.connectionId) {
        telemetry.verbose(`SignalRService: connection is already established.`);
        return;
      }
      try {
        telemetry.verbose(`SignalRService: starting the connection.`);
        await this._connection.start();
        telemetry.info(`SignalRService: connected as user '${userId}'.`, { userId });
      } catch (err) {
        telemetry.error(
          `SignalRService: failed to connect as user '${userId}'. ${err}`, { userId, err });
      }
    }
  
    private async stop(): Promise<void> {
      this._accessToken = undefined;
      try {
        telemetry.verbose(`SignalRService: stopping the connection.`);
        await this._connection.stop();
        telemetry.info("SignalRService: disconnected, user logged out.");
      } catch (err) {
        telemetry.error(`SignalRService: failed to disconnect. ${err}`, { err });
      }
    }
  }

[BrennanConroy]

Awesome, thanks for the logs! Sort of figured out what is wrong in the library.

We don't properly handle closing the connection if connection.start errors during reconnect and hubConnection.stop was called.

I was able to write a test to reproduce the issue, so now we can look into fixing it and have a nice regression test 😃