はじめまして、CyberFight DX 事業本部で web フロントエンドエンジニアをしている久保です。

今回は、web フロントエンド領域で生成 AI を活かす一例をご紹介します。私のチームで運用している WRESTLE UNIVERSE では管理画面上での各エラーに対応した UI 表示ができていない問題があり、解決のためにサーバーからのスタックトレースを生成 AI に与えることでエラー文を自動生成するようにしています。これにより、煩雑なハンドリングを実装・管理するコストから解放されるだけでなく、非技術者にもわかりやすいエラー文を表示することが可能になっています。

 

管理画面のエラーハンドリングは煩雑になりがち

toC サービスを作る場合は併せて管理画面を作ることが多いですが、管理画面のエラーハンドリングは煩雑になりがちです。

サーバーとの API 通信で得られる HTTP エラーコードだけで制御できれば良いのですが、付帯して返却される独自エラーコードやメッセージなどを勘案する場合も多々あると思います。加えて、エラーケースが多岐に渡る場合はサーバー側のハンドリング実装も煩雑になりかねません。

一方で、非技術者でもわかりやすいエラーメッセージを UI 上に表示することは使いやすさや運用効率の観点から重視したいポイントでもあります。この対応を疎かにしてしまうと、例えば新機能追加に伴う新しいエラーケースの発生やデグレなど問題発生時の原因究明に時間がかかってしまい、運用効率に支障をきたすおそれがあります。

私のチームで運用している WRESTLE UNIVERSE もこういった問題を長らく抱えており、管理画面上のメッセージングが不親切なまま運用が続いていました。

 

画一的なエラーメッセージが表示される例

 

生成 AI を管理画面で活用する

WRESTLE UNIVERSE の管理画面ではエラー発生時にサーバーからスタックトレースが返却されます。これにはサーバー上のどこで問題が発生したか、どういった問題なのかが詳細に記されています。一方で、このスタックトレースをそのまま表示しても運用担当者には問題点が伝わらず解決に至らないことが予想されます。

この現状に対し WRESTLE UNIVERSE ではスタックトレースにプロンプトを添えて生成 AI に与えることでエラーメッセージを生成するソリューションを採用しました。

生成 AI から返却されたエラーメッセージが表示される例

 

これにより、サーバーでの validation / エラー発生時に運用担当者へわかりやすくフィードバックすることが可能になりました。さらに、プロンプトを調整することで多言語でのエラーメッセージ表示も可能なため、日本語話者以外の担当者が運用するケースでも柔軟に対応できます。

また、本記事の主題であるエラー時の表示ハンドリングの煩雑さからも解放されます。エラー発生時に生成 AI へスタックトレースを渡すだけなのでハンドリングがほぼ不要になるだけでなく、新たなエラーケースが追加されても柔軟にハンドリングが出来るようになります。実装・管理工数を削減出来るので生成 AI の導入・維持コストと比較しても長期的なメリットは大きいと考えています。

WRESTLE UNIVERSE では現状プロンプトはハードコーディングされていますが、環境変数でのプロンプト管理やユーザーごとのプロンプトリストを作成できるようにして、多言語での実行や入稿コストの削減を狙いつつ、他プロダクトへの横展をしやすくする予定です。

 

まとめ

本記事では、生成 AI を使ってクライアント・サーバー間のメッセージを簡素化し、その内容で十分な内容をユーザーにフィードバックできる事例を紹介しました。

こういった管理画面上での表示ハンドリングは単純ですが実装や管理コストが膨らみがちなので、削減することで生産性の向上に繋がります。

アバター画像
2016年新卒入社のwebフロントエンドエンジニアです。現在はWRESTLE UNIVERSEというプロレス動画配信サービスのwebチームリーダーをやっています。