microsoft / microsoft/BotFramework-DirectLineJS
Connection status Online when Websockets connection failing
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 199
- Fork
- 133
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
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:
- Open Chrome and install this extension
- Restart Chrome
- Go to the Extensions
- Click uBlock Origin, the dashboard window or popup should be viewed
- From the dashboard, click on Settings (cogs icon, see image above)
- In the settings go to My filters tab
- Add
||*^$websocketto 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:
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 🙏
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Riprodurre il problema nella configurazione React bloccando le richieste WebSocket con il filtro documentato di uBlock Origin, quindi osservare connectionStatus$ di DirectLine insieme ad activity$. Iniziare tracciando il ciclo di vita del costruttore di DirectLine e di connectionStatus$; il lavoro è completo quando una connessione wss che continua a fallire segnala ConnectionStatus.FailedToConnect invece di diventare infine Online.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react, typescript
- Ambito
- api, networking
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 30/100