翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# Amazon Connect コミュニケーションウィジェットに関する問題のトラブルシューティング
このトピックは、 Amazon Connect 管理ウェブサイトでコミュニケーションウィジェットを設定するときに発生する可能性のある問題を調査する必要があるデベロッパーを対象としています。
**Topics**
+ [「問題が発生しました」](#sww)
+ [お客様にエージェントメッセージが届かない: ネットワークまたは WebSocket の切断](#mam)
+ [サードパーティーリンクを開く場合の CORS のバイパス](#bcwotpl)
## 「問題が発生しました」
コミュニケーションウィジェットをロードする際に次の **[問題が発生しました]** エラーメッセージが表示された場合は、ブラウザのツールを開いてエラーログを確認します。
![\[「問題が発生しました」というエラーメッセージ。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-error-message.png)
このエラーの原因となる一般的な問題は次のとおりです。
### 400 Invalid request
ログに 400 invalid request が記載されている場合、いくつかの原因が考えられます。
+ コミュニケーションウィジェットが許可されたドメインで提供されていません。ウィジェットをホストするドメインを指定する必要があります。
+ エンドポイントへのリクエストが正しくフォーマットされていません。これは通常、埋め込みスニペットの内容が変更された場合にのみ発生します。
### 401 Unauthorized
![\[「問題が発生しました」というエラーメッセージ。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/something-went-wrong.png)
ログに 401 unauthorized が記載されている場合、これは 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 Not found
404 ステータスコードは通常、リクエストされたリソースが次のような理由で存在しない場合に発生します。
+ API リクエストで無効な widgetId が指定されている
+ widgetId は有効だが、関連付けられたフローが削除またはアーカイブされている
+ ウィジェットが公開されていないか、削除されている
スニペットが Amazon Connect 管理者ウェブサイトからコピーされた正確な方法であり、どの識別子も変更されていないことを確認します。
識別子が変更されていないにもかかわらず 404 が表示される場合は、 AWS サポートにご連絡ください。
### 500 Internal server error
これは、サービスにリンクされたロールに、チャットを開始するのに必要なアクセス許可がないことで発生します。これは、Amazon Connect インスタンスが 2018 年 10 月より前に作成されたものである場合に発生します。これらのインスタンスでは、サービスにリンクされたロールが設定されていません。
**ソリューション**: `connect:*` ポリシーを、Amazon Connect インスタンスに関連付けられたロールに設定します。詳細については、「[Amazon Connect のサービスにリンクされたロールとロールのアクセス許可](connect-slr.md)」を参照してください。
サービスにリンクされたロールに正しいアクセス許可がある場合は、 AWS サポートにご連絡ください。
## お客様にエージェントメッセージが届かない: ネットワークまたは WebSocket の切断
チャットセッションの最中に、チャットアプリケーションを使用しているお客様のネットワーク/WebSocket 接続が途切れることがあります。接続はすぐに復旧しますが、その間にエージェントが送信したメッセージは、お客様のチャットインターフェースに表示されません。
次の画像では、例として、お客様のチャットインターフェイスとエージェントのコンタクトコントロールパネルを並べて表示しています。エージェントが送信したメッセージが、お客様のチャットセッションには表示されていません。しかし、エージェント側には、お客様に届いたように見えています。
![\[CCP 内の、宛先に送信されていないメッセージ。\]](http://docs.aws.amazon.com/ja_jp/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 を呼び出さない限り、途切れたメッセージは表示されないままです。
### ソリューション
[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 のバイパス
セキュリティを強化するために、コミュニケーションウィジェットはサンドボックス環境内で動作します。そのため、ウィジェット内で共有されているサードパーティーリンクは開くことができません。
**解決策**
CORS をバイパスしてサードパーティーリンクを開くには、2 つのオプションがあります。
+ **(推奨)**
次の属性をコードスニペットに追加してサンドボックス属性を更新することで、新しいタブでリンクを開くことを許可できます。
```
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)
```