【Bubble開発】ブラウザのエラーメッセージをカスタム表示に変更する方法

Bubbleでログインや処理エラーが発生したとき、英語で表示される標準のブラウザメッセージでは、ユーザーにとって内容が伝わりづらいケースがあります。

しかし、Bubbleではエラーコードを活用して、開発者自身が任意の日本語メッセージを表示するカスタマイズが可能です。

この記事では、Bubbleのエラーハンドリングイベントを使って、UXを高めるカスタムエラーメッセージ表示方法を解説します。

実装の流れ

実装手順

1. 「An unhandled error occurs」イベントでシステムエラーを検出
2. エラーコードに応じて条件分岐し、Alertを表示
3. 「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エレメントでワークフローが何らかの理由で実行に失敗したときに発火するイベントのため、すべての操作・エレメントで発生するわけではない点に注意が必要です。

エラーコードの確認方法（重要）

1. エディター内の Settings ＞ Languages を開く
2. 本記事に掲載している動画の場合だと、「 CORE – Invalid login credentials.」 の下に表示されている薄い文字列「INVALID_LOGIN_CREDENTIALS」がエラーコードです

この実装を行うことで、従来は英語のシステムメッセージに頼っていたエラー通知を、ユーザーにとって理解しやすい日本語のカスタムメッセージに置き換えることができます。

単なるエラーハンドリングではなく、ユーザー体験を意識した「伝わるフィードバック設計」が可能になります。

アラート表示の最適化や文言チューニングも加えながら、プロダクトの完成度をさらに高めていくことが大切です。