microsoft / microsoft/BotFramework-DirectLineJS

Connection status Online when Websockets connection failing

Open
#432 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
199
Forks
133
PR merge metrics
No merged PRs in 30d

Description

We are using this library in our React app and I encounter this weird behaviour.

The problem

When disabled Websockets connection in Chrome browser using these steps:

  1. Open Chrome and install this extension
  2. Restart Chrome
  3. Go to the Extensions
  4. Click uBlock Origin, the dashboard window or popup should be viewed
  5. From the dashboard, click on Settings (cogs icon, see image above)
  6. In the settings go to My filters tab
  7. Add ||*^$websocket to 1st line of the filter editor and hit Apply changes

I can see that it successfully blocks the wss connections as I can see failed requests in my network tab. The problem is that the connection status will eventually set to ConnectionStatus.Online. I would expect that it will be ConnectionStatus.FailedToConnect as the Websockets request are failing. We need this so we can react with our UI to this scenario and also to log this to our internal logging systems. I cannot see how to do it without proper connection status information, though.

Our setup

In the React code we are just initializing my DirectLine instance in effect hook:

  useEffect(() => {
    if (directLineTokenData) {
      const body = {
        token: directLineTokenData.token || '',
        conversationId: conversationId || '',
        ...COMMON_BOT_PROPERTIES,
      };
      setDirectLine(new DirectLine(body));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [directLineTokenData]);

and in another we subscribe to the activity$ and connectionStatus$ observables:

 useEffect(() => {
    // eslint-disable-next-line no-console
    console.log('Starting subscription to all activities');
    const subscribtion = directLine?.activity$.subscribe(activity =>
      // eslint-disable-next-line no-console
      console.log('Received activity:', activity),
    );
    // eslint-disable-next-line no-console
    const connectionStatusSubscription = directLine?.connectionStatus$.subscribe(
      status => {
        switch (status) {
          case ConnectionStatus.Uninitialized:
            // eslint-disable-next-line no-console
            console.log('STATUS: uninitialized');
            break;
          case ConnectionStatus.Connecting:
            // eslint-disable-next-line no-console
            console.log('STATUS: connecting...');
            break;
          case ConnectionStatus.Online:
            // eslint-disable-next-line no-console
            console.log('STATUS: online');
            break;
          case ConnectionStatus.ExpiredToken:
            // eslint-disable-next-line no-console
            console.log('STATUS: expired token');
            break;
          case ConnectionStatus.FailedToConnect:
            // eslint-disable-next-line no-console
            console.log('STATUS: failed to connect');
            break;
          case ConnectionStatus.Ended:
            // eslint-disable-next-line no-console
            console.log('STATUS: ended');
            break;
          default:
            // eslint-disable-next-line no-console
            console.log('STATUS: unknown status', status);
        }
      },
      error => {
        // eslint-disable-next-line no-console
        console.error('Error subscribing to connection status', error);
      },
    );
    return () => {
      console.log('Stopping subscription to all activities');

      subscribtion?.unsubscribe();
      connectionStatusSubscription?.unsubscribe();
    };
  }, [directLine]);
Observing the problem

Console logs from our React app:

Image

From the logs we can see that there is eventually a ConnectionStatus.Online connection status change, even though failing Websockets requests. What's interesting that it sets connection status to ConnectionStatus.FailedToConnect one time (before it is set to ConnectionStatus.Online)

Any help is appreciated 🙏

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in the React setup by blocking WebSocket requests with the documented uBlock Origin filter, then observe DirectLine's connectionStatus$ alongside activity$. Start by tracing the DirectLine constructor and connectionStatus$ lifecycle; done means a persistently failing wss connection reports ConnectionStatus.FailedToConnect rather than eventually becoming Online.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
api, networking
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.