Bubbleでログインや処理エラーが発生したとき、英語で表示される標準のブラウザメッセージでは、ユーザーにとって内容が伝わりづらいケースがあります。
しかし、Bubbleではエラーコードを活用して、開発者自身が任意の日本語メッセージを表示するカスタマイズが可能です。
この記事では、Bubbleのエラーハンドリングイベントを使って、UXを高めるカスタムエラーメッセージ表示方法を解説します。
実装の流れ
目次
実装手順
- 「An unhandled error occurs」イベントでシステムエラーを検出
- エラーコードに応じて条件分岐し、Alertを表示
- 「An element has an error running a workflow」イベントで特定のエレメントのエラーを補足することも可能
実装方法
方法①：「An unhandled error occurs」でエラーコードを検出 → Alertで表示
1. エラー発生イベントを設定
- Workflowで「An unhandled error occurs」イベントを追加
- Catch に「Element workflow error…」を選択
「Only when」には以下の条件を指定
Current Workflow Error’s code is INVALID_LOGIN_CREDENTIALS
2. カスタムメッセージの表示
- 「Show message in Alert login_error」アクションを追加
- 表示時間（Fade in / Hold / Fade out）を適宜設定
3. アラートの設定
- Alert login_error エレメントに任意のメッセージを入力
例：「ログインに失敗しました。」 - 表示位置を「Position the alert at the top」で画面上部に
方法②：「An element has an error running a workflow」を活用して、要素単位で補足
1. 対象エレメントを指定
- イベント：「Button ログイン has an error running a workflow」
- 対象エレメント：「Button ログイン」を指定
2. Show Alertを使ってメッセージ表示
上記と同様に Alert を表示するアクションをセットすればOK
※「An element has an error running a workflow」は、ボタンなどのUIエレメントでワークフローが何らかの理由で実行に失敗したときに発火するイベントのため、すべての操作・エレメントで発生するわけではない点に注意が必要です。
エラーコードの確認方法（重要）
- エディター内の Settings ＞ Languages を開く
- 本記事に掲載している動画の場合だと、「 CORE – Invalid login credentials.」 の下に表示されている薄い文字列「INVALID_LOGIN_CREDENTIALS」がエラーコードです
この実装を行うことで、従来は英語のシステムメッセージに頼っていたエラー通知を、ユーザーにとって理解しやすい日本語のカスタムメッセージに置き換えることができます。
単なるエラーハンドリングではなく、ユーザー体験を意識した「伝わるフィードバック設計」が可能になります。
アラート表示の最適化や文言チューニングも加えながら、プロダクトの完成度をさらに高めていくことが大切です。
