古い予約回答URLでも、白い画面にしないためのnull対策を入れた話

今日は、美容サービス向けの予約サイトで、店舗側が予約依頼へ回答する画面を見直した。

通常は、予約ごとに発行されたURLを開くと、お客様名、希望日時、メニューが表示され、「受付」「調整」「辞退」を選べる。ところが、予約がすでに処理済みだったり、URLのIDが正しくなかったり、データ取得が一時的に失敗したりすると、画面側が「予約データは必ずある」前提で値を読みにいき、何も表示されない状態になる可能性があった。

最初は例外をcatchして同じ画面へ戻せばよいと考えた。しかし、それでは店舗側は「通信エラーなのか、予約が存在しないのか、すでに対応済みなのか」を判断できない。

そこで、Next.jsとTypeScriptの画面を三つの状態に分けた。

・予約を読み込んでいる状態

・予約を確認できない、または回答できない状態

・正常に回答できる状態

Supabaseから取得結果がnullだった場合は、顧客情報を表示せず、「予約を確認できません。管理画面から最新状況をご確認ください」という案内だけを出す。回答ボタンも無効化し、無効なURLから状態変更が行われないようにした。ログには個人情報や内部URLを残さず、調査に必要な最小限の識別情報だけを記録する。

修正後は、存在しないID、対応済みの予約、通常の未対応予約をそれぞれ確認し、PCとスマートフォンの両方で画面が壊れないことを検証した。

Webシステムでは、正常なデータがある場合だけでなく、「ない」「古い」「途中で変わった」場合の見せ方が運用の安心感を左右する。小さなnull対策でも、現場が迷わず次の行動を取れることが大切だと思う。

Next.js、TypeScript、Supabaseを使った予約・管理システムでは、既存コードの調査、不具合の原因特定、小規模な修正から対応しています。画面が白くなる、特定条件だけ操作できない、といった問題もご相談ください。