ErrorBoundaryを導入して 画面全体がエラーになることを防ぐ

Ruby勉強会
https://techplay.jp/event/946269

Transcript

1. ErrorBoundaryを導入して 画面全体がエラーになることを防ぐ 中野伸吾 Date : 2024.06.14 Asobica internal only 1
2. 会社概要 01 目次 Contents 自己紹介 02 導入に至った経緯 03 導入例 05 2 さいごに 06 ErrorBoundaryについて 04
3. 会社概要 01 about company
10. 自己紹介 02 self-introduction
11. 名前
 中野 伸吾
 役割
 WEBアプリ開発エンジニア
 住まい
 東京都
 直近の経 歴
 受託開発PHPエンジニア → Webメディア開発エジニア（Rails）
 去年の8月にAsobica入社
 自己紹介
 Profile 
 家族
 妻、猫2匹

12. 導入に至った経緯 03 background
13. 導入に至った経緯 • nilチェックが必要なロジックに対して、 nilチェックがない状態のソースコードが本番反映されてしまった （インシデントが発生した） ※ nilチェックのロジックが、本番用branchに適用されていなない状態で 　 臨時リリースを当ててしまった（hotfix的な扱い） 13
14. 導入に至った経緯 本来のGitFlow 14 master develop hotfix的な対応 feature1 (nilチェック対応) feature2 (feature1で対応した 同一ファイルの追加) release 今回やってしまった対応 急ぎリリースしたい事情で feature2のcommitを cherry-pickしてしまった
15. 導入に至った経緯（developブランチの状態） 15 <% if flag.enabled? && @current_user.present? %> <%= @current_user.url_name %>', <%= @current_user.name %>' // 追加された行 <% end %> ※ エラーにならない
16. 導入に至った経緯（masterブランチの状態） 16 <% if flag.enabled? %> <%= @current_user&.url_name %>', <%= @current_user.name %>' // 追加された行 <% end %> ※ エラーになる（current_user.present?がない）
17. 導入に至った経緯（実際のPR抜粋） 17 ※ GitHubのdiff表示では隠れているが、1行目にif分岐がある （PRレビューで気付けず）
18. ErrorBoundaryについて 04 about ErrorBoundary
19. ErrorBoundaryについて • ReactのErrorBoundaryから想像 https://ja.legacy.reactjs.org/docs/error-boundaries.html 自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチし、 エラーを記録し、クラッシュしたコンポーネントツリーの代わりにフォールバック用の UI を表示する React コンポーネント • 他のアプローチとしては、Null Objectのデザインパターンがある ※ 値が存在しない場合の処理を共通化したい場合に使えるデザインパターン 19
20. 参考：Null Objectデザインパターンについて 20 参考：https://zenn.dev/ytnk531/articles/4719dd13bab3ff class License Nothing = NullLicense.new end class NullLicense def name '免許なし' end end class Customer def initialize(license=nil) @license = license end def license @license || License::Nothing end end driving_license = License.new('運転免許') customer1 = Customer.new(driving_license) customer2 = Customer.new puts customer1.license.name # => 運転免許 puts customer2.license.name # => 免許なし
21. 参考：Null Objectデザインパターンについて（別パターン） 21 class LogoutUser < UserInterface def name nil end end class LoginUser < UserInterface def name db_user.name end end # application_controller def current_user @auth.login? ? LoginUser : LogoutUser end
22. 導入例 04 example
23. 導入例（ヘルパー） 23 # app/helpers/application_helper.rb module ApplicationHelper def error_boundary content = capture { yield } raw content rescue => exception # 適宜エラートラッキングツールに通知するなり、ログを吐くなりする Rails.logger.error exception # 最後に評価したものが画面に出力されないようにnilを返す nil end end
24. 導入例（erb） 24 <!DOCTYPE html> <html> <head> <%= csrf_meta_tags %> <%= javascript_pack_tag "application", "data-turbolinks-track": "reload" %> <%= stylesheet_pack_tag "application", media: "all", "data-turbolinks-track": "reload" %> <%= error_boundary do %> <% if @current_user.present? %> <%= render 'shared/custom_script' %> <% end %> <% end %> </head>
25. 導入例（RSpec） 25 describe "#error_boundary" do context "エラーが発生しない場合" do it "ブロック内のコンテンツをキャプチャして返す" do result = helper.error_boundary { "test text" } expect(result).to eq "test text" end it "HTMLコンテンツを正しくレンダリングする" do result = helper.error_boundary { "<div>test html</div>".html_safe } expect(result).to eq "<div>test html</div>" end end ～中略～
26. 導入例（RSpec） 26 ～中略～ context "エラーが発生した場合" do before { allow(Asobica::ErrorLogger).to receive(:error) } it "nilを返し、通知用のメソッドが呼び出されること" do # エラーを発生させて例外オブジェクトを取得 begin raise StandardError, "Test error" rescue StandardError => e error = e end result = helper.error_boundary { raise error } expect(Asobica::ErrorLogger).to have_received(:error).with(error) expect(result).to be_nil end end end
27. さいごに 05 closing
28. さいごに 同じことを繰り返さないために • リリースフローを遵守する（当たり前） • コードレビューで違和感を覚えたら放置しない（当たり前） • 単体テストを網羅的に書く（未ログイン時の考慮など） • ポストモーテムの実施 • せっかく実装したErrorBoundaryが形骸化しないように、周知していく 28
29. プロダクト開発部
30. プロダクト開発部カルチャー “大人な開発組織” 
 行動目標 
 カルチャー 
 Professional 
 価値を創出し、最大化する パフォーマンスを出す（システム・個人の生産性） Breakthrough 
 エンジニアリング観点で新しい挑戦をする エンジニア目線で提案ができる 
 Synergy 
 お互いに気持ちの良いコミュニケーション取る 
 Speed 
 価値の提供を早め、トライの回数を増やす 
 Asobigokoro 
 技術を好きになれること 

31. プロダクト開発部 組織構成予定 ブランド
 デザインG 
 
 7名
 Insight 
 開発G
 
 5名
 データ
 エンジニア リングG
 
 1名
 
 Web
 アプリG
 
 15名
 
 PMG
 
 
 2名
 技術顧問
 
 
 3名
 モバイル
 アプリ
 
 1名
 インフラG 
 
 4名
 プロダクト開発部 
 SRE
 
 2名
 メディア
 開発
 
 2名
 共通基盤チーム 
 新規事業
 開発G

32. 技術スタック詳細 インフラ モバイルアプリ coorum coorum insight ECS, ALB, RDS, S3, CloudWatch, Terraform
 一部Swift

33. 技術スタック詳細 新規プロダクト
34. 使用ツール群 その他モバイルアプリ関連 ソースコード管理 エラートラッキング CI/CD App Distribution, Messaging
 その他 CircleCI
 監視ツール
36. Thank you 36