ErrorBoundaryを導入して画面全体がエラーになることを防ぐ

ErrorBoundaryを導入して画面全体がエラーになることを防ぐ中野伸吾 Date : 2024.06.14 Asobica internal only 1

会社概要 01 目次 Contents 自己紹介 02 導入に至った経緯 03 導入例 05
2 さいごに 06 ErrorBoundaryについて 04

会社概要 01 about company

自己紹介 02 self-introduction

名前  中野伸吾  役割  WEBアプリ開発エンジニア  住まい  東京都  直近の経歴  受託開発PHPエンジニア
→ Webメディア開発エジニア（Rails）  去年の8月にAsobica入社  自己紹介  Profile   家族  妻、猫2匹 

導入に至った経緯 03 background

導入に至った経緯 • nilチェックが必要なロジックに対して、 nilチェックがない状態のソースコードが本番反映されてしまった（インシデントが発生した） ※ nilチェックのロジックが、本番用branchに適用されていなない状態で　臨時リリースを当ててしまった（hotfix的な扱い） 13

導入に至った経緯本来のGitFlow 14 master develop hotfix的な対応 feature1 (nilチェック対応) feature2 (feature1で対応した
同一ファイルの追加) release 今回やってしまった対応急ぎリリースしたい事情で feature2のcommitを cherry-pickしてしまった

導入に至った経緯（developブランチの状態） 15 <% if flag.enabled? && @current_user.present? %> <%= @current_user.url_name
%>', <%= @current_user.name %>' // 追加された行 <% end %> ※ エラーにならない

導入に至った経緯（masterブランチの状態） 16 <% if flag.enabled? %> <%= @current_user&.url_name %>', <%=
@current_user.name %>' // 追加された行 <% end %> ※ エラーになる（current_user.present?がない）

導入に至った経緯（実際のPR抜粋） 17 ※ GitHubのdiff表示では隠れているが、1行目にif分岐がある（PRレビューで気付けず）

ErrorBoundaryについて 04 about ErrorBoundary

ErrorBoundaryについて • ReactのErrorBoundaryから想像 https://ja.legacy.reactjs.org/docs/error-boundaries.html 自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチし、エラーを記録し、クラッシュしたコンポーネントツリーの代わりにフォールバック用の UI を表示する
React コンポーネント • 他のアプローチとしては、Null Objectのデザインパターンがある ※ 値が存在しない場合の処理を共通化したい場合に使えるデザインパターン 19

参考：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 # => 免許なし

参考：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

導入例 04 example

導入例（ヘルパー） 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

導入例（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>

導入例（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 ～中略～

導入例（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

さいごに 05 closing

さいごに同じことを繰り返さないために • リリースフローを遵守する（当たり前） • コードレビューで違和感を覚えたら放置しない（当たり前） • 単体テストを網羅的に書く（未ログイン時の考慮など） • ポストモーテムの実施
• せっかく実装したErrorBoundaryが形骸化しないように、周知していく 28

プロダクト開発部

プロダクト開発部カルチャー “大人な開発組織”   行動目標   カルチャー   Professional   価値を創出し、最大化する
パフォーマンスを出す（システム・個人の生産性） Breakthrough   エンジニアリング観点で新しい挑戦をするエンジニア目線で提案ができる   Synergy   お互いに気持ちの良いコミュニケーション取る   Speed   価値の提供を早め、トライの回数を増やす   Asobigokoro   技術を好きになれること  

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

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

技術スタック詳細新規プロダクト

使用ツール群その他モバイルアプリ関連ソースコード管理エラートラッキング CI/CD App Distribution, Messaging  その他 CircleCI 
監視ツール

Thank you 36

ErrorBoundaryを導入して画面全体がエラーになることを防ぐ

ErrorBoundaryを導入して画面全体がエラーになることを防ぐ

nakano-shingo

Featured

Transcript

ErrorBoundaryを導入して画面全体がエラーになることを防ぐ中野伸吾 Date : 2024.06.14 Asobica internal only 1

会社概要 01 目次 Contents 自己紹介 02 導入に至った経緯 03 導入例 05

会社概要 01 about company

自己紹介 02 self-introduction

名前  中野伸吾  役割  WEBアプリ開発エンジニア  住まい  東京都  直近の経歴  受託開発PHPエンジニア

導入に至った経緯 03 background

導入に至った経緯本来のGitFlow 14 master develop hotfix的な対応 feature1 (nilチェック対応) feature2 (feature1で対応した

導入に至った経緯（developブランチの状態） 15 <% if flag.enabled? && @current_user.present? %> <%= @current_user.url_name

導入に至った経緯（masterブランチの状態） 16 <% if flag.enabled? %> <%= @current_user&.url_name %>', <%=

導入に至った経緯（実際のPR抜粋） 17 ※ GitHubのdiff表示では隠れているが、1行目にif分岐がある（PRレビューで気付けず）

ErrorBoundaryについて 04 about ErrorBoundary

参考：Null Objectデザインパターンについて 20 参考：https://zenn.dev/ytnk531/articles/4719dd13bab3ff class License Nothing = NullLicense.new end

参考：Null Objectデザインパターンについて（別パターン） 21 class LogoutUser < UserInterface def name nil

導入例 04 example

導入例（ヘルパー） 23 # app/helpers/application_helper.rb module ApplicationHelper def error_boundary content =

導入例（erb） 24 <!DOCTYPE html> <html> <head> <%= csrf_meta_tags %> <%=

導入例（RSpec） 25 describe "#error_boundary" do context "エラーが発生しない場合" do it "ブロック内のコンテンツをキャプチャして返す"

導入例（RSpec） 26 ～中略～ context "エラーが発生した場合" do before { allow(Asobica::ErrorLogger).to receive(:error)

さいごに 05 closing

プロダクト開発部

プロダクト開発部カルチャー “大人な開発組織”   行動目標   カルチャー   Professional   価値を創出し、最大化する

プロダクト開発部組織構成予定ブランド  デザインG     7名  Insight   開発G

技術スタック詳細インフラモバイルアプリ coorum coorum insight ECS, ALB, RDS, S3,

技術スタック詳細新規プロダクト

使用ツール群その他モバイルアプリ関連ソースコード管理エラートラッキング CI/CD App Distribution, Messaging  その他 CircleCI

Thank you 36

ErrorBoundaryを導入して 画面全体がエラーになることを防ぐ

ErrorBoundaryを導入して 画面全体がエラーになることを防ぐ

Featured

Transcript

ErrorBoundaryを導入して画面全体がエラーになることを防ぐ

ErrorBoundaryを導入して画面全体がエラーになることを防ぐ