Hướng dẫn này mô tả các lỗi phổ biến liên quan đến thẻ mà bạn có thể gặp phải và cách khắc phục các lỗi đó.
Thiết kế và xem trước thẻ bằng Trình tạo thẻ.
Mở Trình tạo thẻCách lỗi thẻ xuất hiện
Lỗi thẻ có thể xuất hiện theo một số cách:
- Một phần của thẻ, chẳng hạn như tiện ích hoặc thành phần, không xuất hiện hoặc không hiển thị theo cách không mong muốn.
- Toàn bộ thẻ không xuất hiện.
- Hộp thoại đóng, không mở hoặc không tải.
Nếu bạn gặp hành vi như thế này, nghĩa là đã xảy ra lỗi với thẻ của ứng dụng.
Để tham khảo: thông báo và hộp thoại đang hoạt động, không có lỗi trên thẻ
Trước khi kiểm tra ví dụ về thẻ không chính xác, trước tiên hãy xem xét thông báo và hộp thoại đang hoạt động trên thẻ này. Để minh hoạ từng lỗi ví dụ và cách khắc phục, JSON của thẻ này được sửa đổi bằng cách đưa ra lỗi.
Thông báo thẻ không có lỗi
Dưới đây là thông báo trên thẻ không có lỗi, đang hoạt động, nêu chi tiết thông tin liên hệ có tiêu đề, phần và tiện ích như văn bản và nút được trang trí:
Hộp thoại không có lỗi
Dưới đây là hộp thoại đang hoạt động không có lỗi giúp tạo một mục liên hệ bằng cách thu thập thông tin từ người dùng, có chân trang và các tiện ích có thể chỉnh sửa như nhập và chuyển văn bản, cùng với các nút:
Lỗi: Một phần của thẻ không xuất hiện
Đôi khi, các thẻ hiển thị, nhưng một phần của thẻ mà bạn muốn thấy lại không xuất hiện; nguyên nhân có thể là:
- Thiếu trường JSON bắt buộc.
- Trường JSON bị viết sai chính tả hoặc viết hoa không đúng.
Nguyên nhân: Thiếu trường JSON bắt buộc
Trong ví dụ này, trường JSON bắt buộc, title
, bị thiếu. Kết quả là thẻ sẽ hiển thị, nhưng một số phần của thẻ dự kiến sẽ xuất hiện thì không. Có thể khó dự đoán cách thẻ hiển thị khi bạn bỏ qua các trường bắt buộc.
Để khắc phục lỗi này, hãy thêm trường JSON bắt buộc; trong ví dụ này là title
.
Để tìm hiểu xem có bắt buộc phải sử dụng trường JSON hay không, hãy xem Tài liệu tham khảo về Thẻ v2. Trong ví dụ này, hãy tham khảo nội dung mô tả của trường title
trên CardHeader
.
Sau đây là hai ví dụ:
Ví dụ 1: Chỉ định subtitle
nhưng bỏ qua title
bắt buộc sẽ khiến toàn bộ tiêu đề bị trống:
![Tiêu đề của thẻ này không hiển thị vì thiếu trường bắt buộc, tiêu đề.](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-1.png?authuser=5&hl=vi)
title
.Xem đoạn mã JSON của thẻ không chính xác
Lỗi: Trường header
bị thiếu một trường bắt buộc, title
.
. . . "header": { "subtitle": "Software Engineer" } . . .
Xem đoạn mã JSON chính xác của thẻ
Khắc phục: Trường bắt buộc, title
, là một phần của quy cách header
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer" } . . .
Ví dụ 2: Việc chỉ định subtitle
, imageUrl
, imageType
và imageAltText
nhưng bỏ qua title
bắt buộc sẽ khiến hình ảnh hiển thị như mong đợi, nhưng không hiển thị là phụ đề:
![Tiêu đề của thẻ này không hiển thị vì thiếu trường bắt buộc, tiêu đề.](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-2.png?authuser=5&hl=vi)
title
, nhưng hình ảnh sẽ hiển thị như dự kiến.Xem đoạn mã JSON của thẻ không chính xác
Lỗi: Trường header
bị thiếu một trường bắt buộc, title
.
. . . "header": { "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Xem đoạn mã JSON chính xác của thẻ
Khắc phục: Trường bắt buộc, title
, là một phần của quy cách header
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Nguyên nhân: JSON bị viết hoa hoặc viết sai chính tả
Trong ví dụ này, JSON của thẻ bao gồm tất cả các trường cần thiết, nhưng có một trường imageUrl
được viết hoa không chính xác thành imageURL
(viết hoa R
viết hoa L
), điều này gây ra lỗi: hình ảnh mà thẻ trỏ đến không hiển thị.
Để khắc phục lỗi này và những lỗi khác tương tự, hãy sử dụng định dạng JSON chính xác. Trong trường hợp này, imageUrl
là chính xác. Khi nghi ngờ, hãy kiểm tra JSON của thẻ với tài liệu tham chiếu thẻ.
![Tiêu đề của thẻ này không hiển thị vì thiếu trường bắt buộc, tiêu đề.](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-imageURL-instead-of-imageUrl.png?authuser=5&hl=vi)
title
, nhưng hình ảnh sẽ hiển thị như dự kiến.Xem đoạn mã JSON của thẻ không chính xác
Lỗi: Trường imageURL
viết hoa không đúng. Giá trị này phải là imageUrl
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageURL": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Xem đoạn mã JSON chính xác của thẻ
Khắc phục: Trường imageUrl
được viết hoa đúng cách.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Lỗi: Toàn bộ thẻ không xuất hiện
Đôi khi chính thẻ không xuất hiện; nguyên nhân có thể là:
- Tiện ích
ButtonList
được chỉ định không chính xác. - Tiện ích
CardFixedFooter
có nút được chỉ định không chính xác.
Nguyên nhân: buttonList
hoặc cardFixedFooter
được chỉ định không chính xác
Nếu thông báo hoặc hộp thoại thẻ chứa tiện ích ButtonList
hoặc tiện ích CardFixedFooter
được chỉ định không chính xác, thì toàn bộ thẻ sẽ không hiển thị và không có nội dung nào xuất hiện ở vị trí đó. Quy cách không chính xác có thể bao gồm các trường bị thiếu, trường được viết hoa hoặc viết sai chính tả hay JSON có cấu trúc không đúng (chẳng hạn như thiếu dấu phẩy, dấu ngoặc kép hoặc dấu ngoặc nhọn).
Để khắc phục lỗi này, hãy kiểm tra JSON của thẻ với tài liệu tham chiếu thẻ. Cụ thể, hãy so sánh bất kỳ tiện ích ButtonList
nào với hướng dẫn về tiện ích ButtonList
.
Ví dụ: Trong hướng dẫn về tiện ích ButtonList
, việc chuyển một hành động onClick
chưa hoàn tất ở nút đầu tiên sẽ khiến toàn bộ thẻ không hiển thị được.
Xem đoạn mã JSON của thẻ không chính xác
Lỗi: Đối tượng onClick
không có trường nào được chỉ định, vì vậy, toàn bộ thẻ không xuất hiện.
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
Xem đoạn mã JSON chính xác của thẻ
Khắc phục: Đối tượng onClick
hiện có trường openLink
, do đó thẻ sẽ xuất hiện như dự kiến.
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { "openLink": { "url": "https://example.com/share", } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
Lỗi: Hộp thoại đóng, đứng yên hoặc không mở
Nếu một hộp thoại đóng đột ngột, không tải được hoặc không mở, thì nguyên nhân có thể là do giao diện thẻ của hộp thoại đó có vấn đề.
Dưới đây là những lý do phổ biến nhất:
- Tiện ích
CardFixedFooter
không cóprimaryButton
. - Một nút trong tiện ích
CardFixedFooter
không có hành độngonClick
hoặc hành độngonClick
của nút được chỉ định không chính xác. - Tiện ích
TextInput
thiếu trườngname
.
Nguyên nhân: CardFixedFooter
không có primaryButton
Trong hộp thoại có tiện ích CardFixedFooter
, bạn bắt buộc phải chỉ định primaryButton
có cả văn bản và màu sắc. Nếu bạn bỏ qua primaryButton
hoặc đặt thuộc tính này không chính xác, toàn bộ hộp thoại sẽ không xuất hiện.
Để khắc phục lỗi này, hãy đảm bảo tiện ích CardFixedFooter
bao gồm primaryButton
được chỉ định chính xác.
Xem đoạn mã JSON của thẻ không chính xác
Lỗi: Đối tượng fixedFooter
chưa chỉ định trường primaryButton
, khiến hộp thoại không tải hoặc không mở được.
. . . "fixedFooter": { "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
Xem đoạn mã JSON chính xác của thẻ
Khắc phục: fixedFooter
hiện có trường primaryButton
được chỉ định, vì vậy hộp thoại sẽ hoạt động như dự kiến.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
Nguyên nhân: Chế độ cài đặt onClick
trong FixedFooter
không chính xác
Trong hộp thoại có tiện ích CardFixedFooter
, việc chỉ định không chính xác chế độ cài đặt onClick
cho nút bất kỳ hoặc bỏ qua nút này, khiến hộp thoại đóng, không tải được hoặc không mở.
Để khắc phục lỗi này, hãy đảm bảo mỗi nút đều có chế độ cài đặt onClick
được chỉ định chính xác.
Xem đoạn mã JSON của thẻ không chính xác
Lỗi: Đối tượng primaryButton
có trường onClick
có mảng "parameter" bị sai chính tả, khiến hộp thoại không tải hoặc không mở được.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { "action": { "function": "setLanguageType", "parrammetters": [ { "key": "languageType", "value": "C++" } ] } } }, "secondaryButton": { "text": "Cancel", "onClick": { "action": { "function": "reset" } } } } . . .
Xem đoạn mã JSON chính xác của thẻ
Khắc phục: Đối tượng primaryButton
có trường onClick
có mảng "parameters" được viết đúng chính tả, vì vậy, hộp thoại sẽ hoạt động như mong đợi.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { "action": { "function": "setLanguageType", "parameters": [ { "key": "languageType", "value": "C++" } ] } } }, "secondaryButton": { "text": "Cancel", "onClick": { "action": { "function": "reset" } } } } . . .
Nguyên nhân: TextInput
không có name
Nếu hộp thoại có tiện ích TextInput
loại trừ trường name
, thì hộp thoại sẽ không hoạt động như mong đợi. Hộp này có thể đóng, mở nhưng không tải được hoặc không mở.
Để khắc phục lỗi này, hãy đảm bảo mỗi tiện ích TextInput
đều có một trường name
thích hợp. Đảm bảo mỗi trường name
trong thẻ là duy nhất.
Xem đoạn mã JSON của thẻ không chính xác
Lỗi: Đối tượng textInput
chưa chỉ định trường name
, điều này khiến hộp thoại đóng, không tải được hoặc không mở được.
. . . { "textInput": { "label": "Name", "type": "SINGLE_LINE", } } . . .
Xem đoạn mã JSON chính xác của thẻ
Khắc phục: textInput
hiện có trường name
được chỉ định, vì vậy hộp thoại sẽ hoạt động như dự kiến.
. . . { "textInput": { "label": "Name", "type": "SINGLE_LINE", "name": "contactName" } } . . .
Không thể mở hộp thoại, gửi hoặc huỷ các thao tác do cấu trúc ứng dụng không đồng bộ
Nếu ứng dụng Chat trả về thông báo lỗi Could not load dialog. Invalid response returned by bot.
trong khi xử lý hộp thoại, thì có thể là do ứng dụng của bạn sử dụng cấu trúc không đồng bộ, chẳng hạn như Cloud Pub/Sub hoặc phương thức API Tạo thông báo (Tạo thông báo).
Việc mở, gửi hoặc huỷ một hộp thoại sẽ yêu cầu phản hồi đồng bộ từ ứng dụng Chat bằng DialogEventType
.
Theo đó, các ứng dụng được tạo bằng cấu trúc không đồng bộ sẽ không hỗ trợ hộp thoại.
Để khắc phục vấn đề này, hãy cân nhắc sử dụng thông báo thẻ thay vì hộp thoại.
Lỗi khác về thẻ và hộp thoại
Nếu các cách khắc phục được mô tả trên trang này không giải quyết được lỗi liên quan đến thẻ mà ứng dụng của bạn gặp phải, hãy truy vấn nhật ký lỗi của ứng dụng. Việc truy vấn nhật ký có thể giúp bạn tìm lỗi trong JSON thẻ hoặc mã ứng dụng. Ngoài ra, nhật ký còn bao gồm các thông báo lỗi mô tả để giúp bạn khắc phục các lỗi đó.
Chủ đề có liên quan
Để được trợ giúp sửa lỗi ứng dụng Google Chat, hãy xem các bài viết Khắc phục sự cố và sửa ứng dụng Google Chat và Gỡ lỗi ứng dụng trong Chat.