雰囲気でSWRを使ったらハマった話

Transcript

1. 1 ©2023 Loglass Inc. 雰囲気でSWRを使ったらハマった話 2023/12/07 #2023年ヒヤリハット⼤反省会@新宿
2. 2 ©2023 Loglass Inc. ⾃⼰紹介 名前 粟⽥恭介（@wooootack） 経歴 2019年に製造業からエンジニアに異業種転職！ SESや受託開発、個⼈事業主を経て、2023年10⽉から株式会社ログラス のエンジニアとして働いています！ 最近は、コーディングはもちろんスクラムイベントの改善や採⽤に関する 業務など幅広く⾊々なことをやっています！
3. 3 ©2023 Loglass Inc. ログラスについて
4. 4 ©2023 Loglass Inc. 次世代型 経営管理クラウド
5. 5 ©2023 Loglass Inc.
6. 6 ©2023 Loglass Inc. 従来 あらゆる集計作業を自動化 工数を削減し、意思決定精度・速度の向上 集計・誤り探しの煩雑な手作業が中心 属人化した手作業の連続、ミスの温床 • 出所ごとにバラバラのフォーマットを手作業で統合。数値の正 確性担保に時間を取られる • いつ・誰が・何を変更したか履歴を追うのがほぼ不可能であ り、ミスが発生していても発見しづらい • 集計作業に時間がかかるため、詳細なデータをレポートまで落 としきれない • 細かな閲覧権限制御が追いつかず、経営レイヤー以外に詳細 な情報を共有しづらい • Excel、スプレッドシートのデータを自動統合することで、集計作 業時間を極限まで縮小 • システム上でバージョン管理を徹底し、変更点が可視化される ため、いつ・どこでミスが発生したか分かる • 配賦などを含む詳細なデータがリアルタイムで可視化されるた め、意思決定の精度が上がる • レイヤーごとの細かな閲覧権限設定が容易で、センシティブな 情報をケアしながら情報を透明化できる Loglassで変わる経営管理
7. 7 ©2023 Loglass Inc. ヒヤリハットの概要
8. 8 ©2023 Loglass Inc. こんな感じの画⾯を想像してください 組織図のセレクトボックス ‧組織図の⼀覧が表⽰される ‧プライマリ組織図が初期選択される 部署ツリー ‧選択された組織図の部署ツリーが表⽰される ‧プライマリ組織図のツリーが初期表⽰される
9. 9 ©2023 Loglass Inc. 経緯 1. 先ほどの画⾯でSWRに起因する別の不具合が⾒つかった 2. 不具合対応を⾏ってリリースした 3. 以下のような不具合の問い合わせが届くように 「組織図のセレクトボックスもツリーも表⽰されない時があります。でもリロードしたら直ります。 あ、でもリロードしても直らない時もありますね。」
10. 10 ©2023 Loglass Inc. 原因を探る
11. 11 ©2023 Loglass Inc. 原因のコードの全体像を簡単に紹介 動作イメージ ‧SWRで組織図の⼀覧を取得する ‧useEffectOnceでプライマリ組織図のツリーを取得する ‧result.treeMapsを使ってセレクトボックスを表⽰する ‧result.treeを使ってツリーの部分を表⽰する ‧画⾯で組織図を変更した場合は、loadTreeが呼ばれる 結局どうなっていたのか ‧result.dataがundefinedのままになってしまっていた ※ コードはイメージです
12. 12 ©2023 Loglass Inc. なぜundefinedのままになっていたのか 実はまだ完全に理解できていないのですが... 不具合発⽣時は以下のような流れです ‧fetchTreeMaps によるデータ取得中 ‧useEffectOnce から loadTree が呼び出される ‧if (!data) return; で早期リターンされる そうなると、後にfetchTreeMapsの結果を取得しても キャッシュの更新はされないままとなってしまう フロントエンド強いマンいたら解説してほしい...
13. 13 ©2023 Loglass Inc. 解決⽅法
14. 14 ©2023 Loglass Inc. SWRとの決別をすることに ‧SWRを使うのをやめて、初期表⽰とセレクトボックスの変更時の毎回APIを叩くように変更した  ‧そもそもSWRである必要のない画⾯だった  ‧SWRを使うとなると、APIの構成的にもちょっと複雑な作りになってしまうことを避けられない ‧愚直に直列にデータを取得するようにした  ‧まずは組織図の⼀覧を取得する  ‧次に選択している組織図があればそのツリーを、なければプライマリのツリーを取得する  ‧最後にこれらをいい感じに組み⽴ててレスポンスを返せばオッケー 無事に解決！わーい！
15. 15 ©2023 Loglass Inc. まとめ
16. 16 ©2023 Loglass Inc. 振り返って反省してみる ‧そもそもSWRのことを雰囲気で使っていた  ‧キャッシュの更新をカスタマイズするの、複雑になるから避けたいよねという感覚はあった  ‧データのフェッチングとmutateが同時に動いたらどうなるのかを理解してなかった ‧修正範囲を⼩さく済ませようとしすぎた  ‧最初の段階でSWRをやめる検討もしたが、修正量多くなるし⼀旦やめとくかとなった  ‧最初の不具合⾃体もそこまで重要じゃなかったので、あまり時間をかけたくなかった ‧hooksの単体テストを書いていなかった  ‧フロントエンドのテストに対してコスパが悪いイメージを個⼈的に持っていた  ‧今回はUI関連ではなくロジックのテストだったのでちゃんと書くべきだった