ウェブサイトにチャットユーザーインターフェイスを追加する際の一般的な問題を調査する

このトピックは、 Amazon Connect 管理ウェブサイトでコミュニケーションウィジェットを設定するときに発生する可能性のある問題を調査する必要があるデベロッパーを対象としています。

「問題が発生しました」

コミュニケーションウィジェットをロードする際に次の [問題が発生しました] エラーメッセージが表示された場合は、ブラウザのツールを開いてエラーログを確認します。

このエラーの原因となる一般的な問題は次のとおりです。

400 Invalid request

ログに 400 invalid request が記載されている場合、いくつかの原因が考えられます。

• コミュニケーションウィジェットが許可されたドメインで提供されていません。ウィジェットをホストするドメインを指定する必要があります。

• エンドポイントへのリクエストが正しくフォーマットされていません。これは通常、埋め込みスニペットの内容が変更された場合にのみ発生します。

401 Unauthorized

ログに 401 の権限がないと記載されている場合、これはJSONウェブトークン (JWT) 認証の問題です。

を取得したらJWT、authenticateコールバック関数に実装する必要があります。次の例は、トークンを取得して使用する場合の実装方法を示しています。

amazon_connect('authenticate', function(callback) {
  window.fetch('/token').then(res => {
    res.json().then(data => {
      callback(data.data);
    });
  });
});   

実装する必要があるものの、より基本的なバージョンを次に示します。

amazon_connect('authenticate', function(callback) {
   callback(token);
});  

の実装手順についてはJWT、「」を参照してくださいステップ 3: コミュニケーションウィジェットのコードとセキュリティキーを確認してコピーする。

既にコールバックを実装している場合は、次のシナリオでも 401 が発生する可能性があります。

• 無効な署名

• 期限切れのトークン

404 Not found

404 ステータスコードは、widgetId が見つからないことを示します。スニペットが Amazon Connect のウェブサイトからコピーされたとおりで、どの識別子も変更されていないことを確認してください。

識別子が変更されていないにもかかわらず 404 が表示される場合は、 AWS サポートにご連絡ください。

500 Internal server error

これは、サービスにリンクされたロールに、チャットを開始するのに必要なアクセス許可がないことで発生します。これは、Amazon Connect インスタンスが 2018 年 10 月より前に作成されたものである場合に発生します。これらのインスタンスでは、サービスにリンクされたロールが設定されていません。

ソリューション: connect:* ポリシーを、Amazon Connect インスタンスに関連付けられたロールに設定します。詳細については、「Amazon Connect でサービスにリンクされたロールを使用する」を参照してください。

サービスにリンクされたロールに正しいアクセス許可がある場合は、 AWS サポートにご連絡ください。

エージェントメッセージを受信しない顧客: ネットワークまたは WebSocket切断

チャットセッション中に、チャットアプリケーションを使用している顧客はネットワーク/WebSocket 接続を失います。接続はすぐに復旧しますが、その間にエージェントが送信したメッセージは、お客様のチャットインターフェースに表示されません。

次の図は、顧客のチャットインターフェイスとエージェントの問い合わせコントロールパネル の例を示しています side-by-side。エージェントが送信したメッセージが、お客様のチャットセッションには表示されていません。しかし、エージェント側には、お客様に届いたように見えています。

顧客のチャットアプリケーションがネットワーク/WebSocket 接続を失った場合、チャットユーザーインターフェイスは以下を実行して、切断中に送信されたメッセージだけでなく、今後のメッセージを取得する必要があります。

• WebSocket 接続を再確立して、今後の受信メッセージを再度受信します。

• chatSession.getTranscript (getTranscriptsAPI) リクエストを実行して、顧客が切断されている間に送信されたすべての欠落メッセージを取得します。

顧客のチャットユーザーインターフェイスが切断されている間にエージェントがメッセージを送信すると、メッセージは Amazon Connect バックエンドに正常に保存されます。 CCP は期待どおりに動作し、メッセージはすべてトランスクリプトに記録されますが、顧客のデバイスはメッセージを受信できません。クライアントが に再接続すると WebSocket、メッセージにギャップがあります。今後の受信メッセージは から再び表示されますが WebSocket、コードが明示的に を呼び出さない限り、ギャップメッセージは欠落していますGetTranscriptAPI。

ソリューション

を呼び出すには、chatSession.onConnectionEstablished GetTranscript イベントハンドラーを使用しますAPI。chatSession.onConnectionEstablished イベントハンドラーは WebSocket 、再接続時にトリガーされます。ChatJS には、 WebSocket 接続用のハートビートと再試行ロジックが組み込まれています。ただし、ChatJS はチャット記録を保存しないため、手動でチャット記録を再取得するために、チャットユーザーインターフェースにカスタムコードを追加する必要があります。

次のサンプルコードは、onConnectionEstablished を実装して GetTranscript を呼び出す方法を示しています。

import "amazon-connect-chatjs";

const chatSession = connect.ChatSession.create({
  chatDetails: {
    ContactId: "the ID of the contact",
    ParticipantId: "the ID of the chat participant",
    ParticipantToken: "the participant token",
  },
  type: "CUSTOMER",
  options: { region: "us-west-2" },
});

// Triggered when the websocket reconnects
chatSession.onConnectionEstablished(() => {
  chatSession.getTranscript({
    scanDirection: "BACKWARD",
    sortOrder: "ASCENDING",
    maxResults: 15,
    // nextToken?: nextToken - OPTIONAL, for pagination
  })
    .then((response) => {
      const { initialContactId, nextToken, transcript } = response.data;
      // ...
    })
    .catch(() => {})
});

function loadLatestTranscript(args) {
    // Documentation: https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript
    return chatSession.getTranscript({
        scanDirection: "BACKWARD",
        sortOrder: "ASCENDING",
        maxResults: 15,
        // nextToken?: nextToken - OPTIONAL, for pagination
      })
      .then((response) => {
        const { initialContactId, nextToken, transcript } = response.data;
        
        const exampleMessageObj = transcript[0];
        const {
          DisplayName,
          ParticipantId,
          ParticipantRole, // CUSTOMER, AGENT, SUPERVISOR, SYSTEM
          Content,
          ContentType,
          Id,
          Type,
          AbsoluteTime, // sentTime = new Date(item.AbsoluteTime).getTime() / 1000
          MessageMetadata, // { Receipts: [{ RecipientParticipantId: "asdf" }] }
          Attachments,
          RelatedContactid,
        } = exampleMessageObj;

        return transcript // TODO - store the new transcript somewhere
      })
      .catch((err) => {
        console.log("CustomerUI", "ChatSession", "transcript fetch error: ", err);
      });
}      

別の例については、「」の「このオープンソース実装 GitHub」を参照してください。