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

# 對 Amazon Connect 通訊小工具的問題進行疑難排解
<a name="ts-cw"></a>

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

**Topics**
+ [「發生錯誤」](#sww)
+ [客戶未接收到客服人員訊息：網路或 WebSocket 連線中斷](#mam)
+ [在開啟第三方連結時略過 CORS](#bcwotpl)

## 「發生錯誤」
<a name="sww"></a>

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

![\[一條錯誤訊息，說出了什麼問題。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/chatwidget-error-message.png)


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

### 400 無效的請求
<a name="400-invalid-request"></a>

如果記錄檔提到 400 無效請求，可能的原因有幾個：
+ 您的通訊小工具未在允許的網域上提供服務。您必須特別聲明您將託管小工具的網域。
+ 對端點的請求格式不正確。這通常只有在內嵌程式碼片段的內容已被修改時才會發生。

### 401 (未經授權)
<a name="401-unauthorized"></a>

![\[「發生錯誤」錯誤訊息。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/something-went-wrong.png)


如果日誌提到 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：確認並複製通訊小工具程式碼和安全密鑰](add-chat-to-website.md#confirm-and-copy-chat-widget-script)。

如果您已經實作了回呼函數，則以下情況仍可能導致 401：
+ 無效的簽章
+ 權杖過期

### 404 找不到
<a name="404-not-found"></a>

404 狀態碼通常是在請求的資源不存在時產生的：
+ 在 API 請求中指定了無效的 widgetId
+ widgetId 有效，但相關聯的流程已刪除或封存
+ 小工具尚未發布，或已遭刪除

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

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

### 500 內部伺服器錯誤
<a name="500-internalservererror-chatwidget"></a>

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

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

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

## 客戶未接收到客服人員訊息：網路或 WebSocket 連線中斷
<a name="mam"></a>

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

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

![\[CCP 中未傳送給聯絡人的訊息。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/tw-cw-001-message-not-sent.png)


如果客戶的聊天應用程式失去其網路/WebSocket 連線，則聊天使用者介面必須執行下列動作，才能擷取未來的訊息，以及在連線中斷期間傳送給客戶的訊息：
+ 重新建立 WebSocket 連線，以接收未來傳入的訊息。
+ 提出 [chatSession.getTranscript](https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript) ([getTranscripts](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html) API) 請求，以擷取在客戶連線中斷期間傳送但遺失的所有訊息。

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

### 解決方案
<a name="solution-network-disconnected"></a>

使用 [chatSession.onConnectionEstablished](https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiononconnectionestablished) 事件處理常式呼叫 [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html) 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 上的開放原始碼實作](https://github.com/amazon-connect/amazon-connect-chat-interface/blob/c88f854073fe6dd45546585c3bfa363d3659d73f/src/components/Chat/ChatSession.js#L408)。

## 在開啟第三方連結時略過 CORS
<a name="bcwotpl"></a>

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

**解決方案**

有兩種選項可略過 CORS，讓第三方連結得以開啟。
+ **（建議）**

  更新沙盒屬性以允許在新索引標籤中開啟連結，方法是將下列屬性新增至程式碼片段：

  ```
  amazon_connect('updateSandboxAttributes', 'allow-scripts allow-same-origin allow-popups allow-downloads allow-top-navigation-by-user-activation allow-popups-to-escape-sandbox')
  ```
**注意**  
屬性值可視需要更新，以允許特定動作。這是如何允許在新的索引標籤中開啟連結的範例。
+ 移除沙盒屬性，方法是將下列屬性新增至程式碼片段：

  ```
  amazon_connect('removeSandboxAttribute', true)
  ```