CNDT2022プレイベントで、chatが異常動作している

[hrk091]

観測された4つの問題と簡単な考察

1. トラックを切り替えると、websocketで受け取ったものが消失する
   • トラックのchatをGETする方はReduxでcacheされているが、websocketの方はされておらず、component内でのみ保持
   • トラック切替時にcomponentのデータは消されるが、redux側は残っている
   • トラックを元に戻したときに、refetchしないため、最新のが抜け落ちる
2. websocketではなくbackendから取得したときに、消失した分含めて一気に復活する
   • 1が発生しているときに、何かしらの契機でrefetchすると発生
   • そもそも1が解消すれば、問題ない
3. 最新のchatだけあるが、過去分がない
   • これは掘り下げないとわからない
4. 他のトラックのchatが混線する
   • refetchのタイミングで出てるっぽい
   • timing issueで発生する可能性が高い

対策案

• RTK Queryが提供するwebsocketに乗り換え、RTK Queryを更新する
  • reduxとwebsocket channel両方から受け取り、componentで合成するのをやめる
  • reduxで合成するようにする
• track切替時にchat componentをdestroyしているか確認し、destroyしていない場合はdestroyする方式に変更する
  • immutableにしてしまうほうが状態が減ってバグが減るので
• 上記は比較的大きな変更であり、深堀りして明確に原因究明してから対策を決めたほうが良いという話もあるが、今の状態でバグをなくすのは極めて困難かつ技術負債に負債を上塗りする形になるので、simplifyすることを優先する

進める上での課題

• local dev環境でrealtime pushが動いていない
  • これが解決しないと手元での検証ができないため、開発が困難。この解消が最優先
• 再現試験
  • 複数セッション立ち上げてチャットを書き込み、server sideからwebsocket pushしながらトラックを変えないと再現できない
  • JWTを使ってchatを書きまくる簡単な負荷ツールをかけばいけそう

[hrk091]

とりあえずのNext Action

• local devのrealtime pushが動かない問題を直す
• chatを書きまくる簡易負荷ツールを作って、4つの課題事象をすべてlocalで再現させる（できれば、再現条件を明確化する）

[hrk091]

4も、websocketで取得したデータののcomponent stateが問題っぽい。コードちゃんと見ないといけないけど、トラック変更前のやつを拾ってしまっているっぽい

[hrk091]

3は、初期化でRTK Queryで受け取りsetStateした値が、useEffect内で仕込んだwebsocket callbackに対して渡っていないことが原因とわかった。コードを修正しているときは気づかなかったけど、事象に直面してコードを見るとそりゃそうだという感じ。

4は、もう山程failure scenarioがあってよくわからないので、とりあえず再現コードを書いて改修後の確認ができるようにする

[hrk091]

4も再現できた。1sごとにmessageが届くscriptを走らせたら簡単に再現した。

trackを切り替えた際に、message classを作り変えているが、これもwebsocket callbackで用いているclassと別のインスタンスを参照してしまっており、resetがちゃんと聞いていないことが原因。

上記を総合して、そもそもRTK Query導入前の実装を踏襲することをやめ、RTK Queryで提供するwebsocketの機能を使うことにする。 また、trackを切り替えたときにredux stateをclearするあたりの考慮も必要。 （simplifyするために、とりあえずchatについては都度refetchするようにしても良いかもしれない）