本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
# 排查您的 Amazon Connect 通信小部件问题
本主题适用于需要调查在 Connect Customer 管理网站中配置通信控件时可能出现的问题的开发人员。
**Topics**
+ [“出问题了”](#sww)
+ [客户未收到代理消息：网络或 WebSocket 已断开连接](#mam)
+ [打开第三方链接时绕过 CORS](#bcwotpl)
## “出问题了”
如果您在加载通信小部件时看到以下**错误**消息，请打开浏览器工具查看错误日志。
以下是可能导致此错误的常见问题：
### 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 步：确认并复制通信小部件代码和安全密钥](add-chat-to-website.md#confirm-and-copy-chat-widget-script)。
如果您已经实施了回调，以下情况仍可能导致 401：
+ 签名无效
+ 令牌已过期
### 404 未找到
出现 404 状态码通常是因为请求的资源不存在：
+ API 请求中指定的 widgetId 无效
+ widgetId 有效，但关联的流已被删除或存档
+ 该小部件尚未发布或已被删除
确认您的代码片段与从 Connect Customer 管理员网站复制的内容完全相同，并且所有标识符均未更改。
如果标识符未更改，而您看到的是 404，请联系 AWS 支持。
### 500 内部服务器错误
这可能是由于您的服务相关角色没有启用聊天所需的权限所致。如果您的 Amazon Connect 实例是在 2018 年 10 月之前创建的，就会出现这种情况，因为您尚未设置服务相关角色。
**解决方案**：为与 Amazon Connect 实例关联的角色上添加 `connect:*` 策略。有关更多信息，请参阅 [使用 Amazon Connect 的服务相关角色和角色权限](connect-slr.md)。
如果您的服务相关角色拥有适当的权限，请联系 AWS 支持。
## 客户未收到代理消息：网络或 WebSocket 已断开连接
在聊天会话期间，使用聊天应用程序的客户会失去 network/WebSocket 连接。他们很快就会重新获得连接，但在此期间座席发送的消息不会显示在客户的聊天界面上。
下图显示了客户的聊天界面和客服联系人控制面板的示例 side-by-side。座席发送的消息不会显示在客户的聊天会话中。但是，在座席看来，客户似乎已经收到了。
如果客户的聊天应用程序失去 network/WebSocket 连接，聊天用户界面必须执行以下操作才能检索 future 消息以及断开连接时发送给它的消息：
+ 重新建立 WebSocket 连接，以便再次接收 future 传入的消息。
+ 发送 [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，否则仍会缺少间隙消息。
### 解决方案
使用 [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 的事件处理程序。 WebSocket 重新连接时会触发`chatSession.onConnectionEstablished`事件处理程序。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
为增强安全性，通信小部件在沙盒环境中运行。因此，无法打开小部件内共享的第三方链接。
**解决方案**
有两种方法可以绕过 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)
```