本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

對 Amazon Connect 通訊小工具的問題進行疑難排解

本主題適用於需要調查在 Amazon Connect 管理網站中設定通訊小工具時可能發生之問題的開發人員。

「發生錯誤」

如果您在載入通訊小工具時看到下列發生錯誤的錯誤訊息，請開啟瀏覽器工具以檢視錯誤記錄。

以下是可能導致此錯誤的問題：

400 無效的請求

如果記錄檔提到 400 無效請求，可能的原因有幾個：

401 (未經授權)

如果日誌提到 401 未經授權，這是 JSON Web 權杖 (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 找不到

404 狀態碼通常是在請求的資源不存在時產生的：

確認您的程式碼片段與從 Amazon Connect 管理員網站複製的程式碼片段完全相同，而且沒有變更任何識別符。

如果識別碼未變更，而您看到 404，請聯絡 AWS 支援部門。

500 內部伺服器錯誤

這可能是因為您的服務連結角色沒有開始聊天所需的許可。如果您的 Amazon Connect 執行個體是在 2018 年 10 月之前建立的，因為您沒有設定服務連結角色，就會發生這種情況。

解決方案：針對與 Amazon Connect 執行個體關聯的角色新增 connect:* 政策。如需詳細資訊，請參閱使用 Amazon Connect 的服務連結角色和角色權限。

如果您的服務連結角色具有正確的許可，請連絡 AWS 支援部門。

客戶未接收到客服人員訊息：網路或 WebSocket 連線中斷

在聊天工作階段期間，使用聊天應用程式的客戶失去其網路/WebSocket 連線。他們很快就重新取得連線，但客服人員在這段期間傳送的訊息未呈現在客戶的聊天介面中。

下圖顯示客戶的聊天介面和客服人員的聯絡控制面板並排的範例。客服人員傳送的訊息未呈現在客戶的聊天工作階段中。但在客服人員看來，客戶已收到訊息。

如果客戶的聊天應用程式失去其網路/WebSocket 連線，則聊天使用者介面必須執行下列動作，才能擷取未來的訊息，以及在連線中斷期間傳送給客戶的訊息：

如果客服人員在客戶聊天使用者介面連線中斷期間傳送訊息，該訊息會成功存放在 Amazon Connect 後端：CCP 會正常運作，且訊息全都會記錄在文字記錄中，但客戶的裝置無法接收訊息。當用戶端重新連線至 WebSocket 時，訊息會出現差異。未來的傳入訊息會從 WebSocket 再次出現，但仍會遺漏差異訊息，除非程式碼明確呼叫 GetTranscript API。

解決方案

使用 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 上的開放原始碼實作。

在開啟第三方連結時略過 CORS

為了增強安全性，通訊小工具會在沙盒環境中運作。因此，在小工具中共用的第三方連結會無法開啟。

解決方案

有兩種選項可略過 CORS，讓第三方連結得以開啟。