Panduan ini menjelaskan error umum terkait kartu yang mungkin Anda alami, dan cara memperbaikinya.
Desain dan pratinjau kartu dengan Pembuat Kartu.
Buka Pembuat KartuTampilan error kartu
Error kartu diwujudkan dalam beberapa cara:
- Bagian kartu, seperti widget atau komponen, tidak muncul atau dirender dengan cara yang tidak diharapkan.
- Seluruh kartu tidak akan muncul.
- Dialog akan ditutup, tidak terbuka, atau tidak dapat dimuat.
Jika Anda mengalami perilaku seperti ini, berarti terjadi error pada kartu aplikasi Anda.
Untuk referensi: pesan dan dialog kartu yang berfungsi dan bebas error
Sebelum memeriksa contoh kartu yang keliru, pertama-tama pertimbangkan pesan dan dialog kartu yang ini. Untuk menggambarkan setiap contoh error dan perbaikannya, JSON kartu ini diubah dengan membuat error.
Pesan kartu bebas error
Berikut ini adalah pesan kartu bebas error yang berfungsi dan merinci informasi kontak yang menampilkan header, bagian, dan widget seperti teks dan tombol berdekorasi:
Dialog bebas error
Berikut adalah dialog bebas error yang berfungsi dan membuat kontak dengan mengumpulkan informasi dari pengguna, yang dilengkapi footer, dan widget yang dapat diedit seperti input dan tombol teks, serta tombol:
Error: Bagian kartu tidak muncul
Terkadang kartu dirender, tetapi bagian kartu yang ingin Anda lihat tidak muncul; kemungkinan penyebabnya adalah:
- Bidang JSON yang diperlukan tidak ada.
- Kolom JSON salah eja atau huruf besarnya salah.
Penyebab: Kolom JSON yang wajib diisi tidak ada
Pada error contoh ini, kolom JSON yang wajib diisi, title
, tidak ada. Akibatnya, kartu dirender, tetapi bagian kartu yang diharapkan tidak muncul. Terkadang sulit untuk memprediksi bagaimana kartu dirender jika kolom yang wajib diisi dihilangkan.
Untuk memperbaiki error ini, tambahkan kolom JSON yang diperlukan; dalam contoh ini, title
.
Untuk mengetahui apakah kolom JSON diperlukan atau tidak, lihat Dokumentasi referensi Kartu v2. Dalam contoh ini, lihat deskripsi kolom title
di CardHeader
.
Berikut ini dua contohnya:
Contoh 1: Menentukan subtitle
tetapi menghilangkan title
yang diperlukan akan menyebabkan seluruh header terlihat kosong:
![Header kartu ini tidak ditampilkan karena kolom yang wajib diisi, judul, tidak ada.](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-1.png?authuser=6&hl=id)
title
, tidak ada.Lihat cuplikan JSON kartu yang salah
Error: Kolom wajib diisi, title
, tidak ada di header
.
. . . "header": { "subtitle": "Software Engineer" } . . .
Lihat cuplikan JSON kartu yang benar
Perbaikan: Kolom yang wajib diisi, title
, adalah bagian dari spesifikasi header
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer" } . . .
Contoh 2: Menentukan subtitle
, imageUrl
, imageType
, dan imageAltText
, tetapi menghilangkan title
yang diperlukan akan menyebabkan gambar dirender seperti yang diharapkan, tetapi tidak subtitel:
![Header kartu ini tidak ditampilkan karena kolom yang wajib diisi, judul, tidak ada.](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-2.png?authuser=6&hl=id)
title
, tidak ada, tetapi gambar dirender seperti yang diharapkan.Lihat cuplikan JSON kartu yang salah
Error: Kolom wajib diisi, title
, tidak ada di header
.
. . . "header": { "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Lihat cuplikan JSON kartu yang benar
Perbaikan: Kolom yang wajib diisi, title
, adalah bagian dari spesifikasi header
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Penyebab: JSON salah ejaan atau huruf besarnya
Dalam contoh error ini, JSON kartu menyertakan semua kolom yang diperlukan, tetapi satu kolom, imageUrl
tidak menggunakan huruf besar dengan benar sebagai imageURL
(huruf kapital R
kapital L
), yang menyebabkan error: gambar yang ditunjuk tidak dirender.
Untuk memperbaiki error ini, dan lain-lain yang serupa, gunakan format JSON yang benar. Dalam hal ini, imageUrl
sudah benar. Jika ragu, periksa JSON kartu dengan dokumen referensi kartu.
![Header kartu ini tidak ditampilkan karena kolom yang wajib diisi, judul, tidak ada.](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-imageURL-instead-of-imageUrl.png?authuser=6&hl=id)
title
, tidak ada, tetapi gambar dirender seperti yang diharapkan.Lihat cuplikan JSON kartu yang salah
Error: Penggunaan huruf besar pada kolom imageURL
salah. Seharusnya imageUrl
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageURL": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Lihat cuplikan JSON kartu yang benar
Diperbaiki: Kolom imageUrl
menggunakan huruf besar dengan benar.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Error: Seluruh kartu tidak muncul
Terkadang kartu tersebut tidak muncul; kemungkinan penyebabnya adalah:
- Widget
ButtonList
tidak ditentukan dengan benar. - Widget
CardFixedFooter
memiliki tombol yang tidak ditentukan dengan benar.
Penyebab: buttonList
atau cardFixedFooter
tidak ditentukan dengan benar
Jika pesan kartu atau dialog menyertakan widget ButtonList
atau widget CardFixedFooter
yang salah ditentukan dengan tombol yang salah, seluruh kartu tidak akan ditampilkan, dan tidak ada yang muncul pada tempatnya. Spesifikasi yang salah dapat mencakup kolom yang tidak ada, kolom dengan ejaan atau huruf besar yang salah, atau JSON yang tidak terstruktur dengan baik, seperti ada koma, tanda kutip, atau tanda kurung kurawal yang hilang.
Untuk memperbaiki error ini, periksa JSON kartu pada dokumen referensi kartu. Secara khusus, bandingkan widget ButtonList
apa pun dengan panduan widget ButtonList
.
Contoh: Dalam panduan widget ButtonList
, meneruskan tindakan onClick
yang tidak lengkap di tombol pertama akan mencegah seluruh kartu dirender.
Lihat cuplikan JSON kartu yang salah
Error: Objek onClick
tidak memiliki kolom yang ditentukan, sehingga seluruh kartu tidak muncul.
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
Lihat cuplikan JSON kartu yang benar
Diperbaiki: Objek onClick
kini memiliki kolom openLink
, sehingga kartu muncul seperti yang diharapkan.
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { "openLink": { "url": "https://example.com/share", } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
Error: Dialog tertutup, terhenti, atau tidak terbuka
Jika dialog tertutup secara tidak terduga, gagal dimuat, atau tidak terbuka, kemungkinan penyebabnya adalah masalah pada antarmuka kartunya.
Berikut adalah alasan yang paling umum:
- Widget
CardFixedFooter
tidak memilikiprimaryButton
. - Tombol dalam widget
CardFixedFooter
tidak memiliki tindakanonClick
, atau tindakanonClick
-nya tidak ditentukan dengan benar. - Widget
TextInput
tidak memiliki kolomname
.
Penyebab: CardFixedFooter
tidak memiliki primaryButton
Dalam dialog dengan widget CardFixedFooter
, diperlukan primaryButton
dengan teks dan warna. Menghilangkan primaryButton
atau menyetelnya dengan tidak benar akan mencegah seluruh dialog muncul.
Untuk memperbaiki error ini, pastikan widget CardFixedFooter
menyertakan primaryButton
yang ditentukan dengan benar.
Lihat cuplikan JSON kartu yang salah
Error: Objek fixedFooter
tidak memiliki kolom primaryButton
yang ditetapkan, sehingga menyebabkan dialog gagal dimuat atau dibuka.
. . . "fixedFooter": { "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
Lihat cuplikan JSON kartu yang benar
Perbaikan: fixedFooter
kini memiliki kolom primaryButton
yang ditentukan, sehingga dialog berfungsi seperti yang diharapkan.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
Penyebab: Setelan onClick
salah di FixedFooter
Dalam dialog dengan widget CardFixedFooter
, yang menentukan setelan onClick
pada tombol mana pun dengan tidak benar, atau menghilangkannya, menyebabkan dialog ditutup, gagal dimuat, atau tidak terbuka.
Untuk memperbaiki error ini, pastikan setiap tombol menyertakan setelan onClick
yang ditentukan dengan benar.
Lihat cuplikan JSON kartu yang salah
Error: Objek primaryButton
memiliki kolom onClick
dengan array `parameters` yang salah eja, sehingga menyebabkan dialog gagal dimuat atau dibuka.
. . . "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" } } } } . . .
Lihat cuplikan JSON kartu yang benar
Perbaikan: Objek primaryButton
memiliki kolom onClick
dengan array `parameters` yang dieja dengan benar, sehingga dialog berfungsi seperti yang diharapkan.
. . . "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" } } } } . . .
Penyebab: TextInput
tidak memiliki name
Jika dialog menyertakan widget TextInput
yang mengecualikan kolom name
, dialog tidak akan berperilaku seperti yang diharapkan. Halaman mungkin tertutup, terbuka tetapi gagal dimuat, atau tidak terbuka.
Untuk memperbaiki error ini, pastikan setiap widget TextInput
menyertakan kolom name
yang sesuai. Pastikan setiap kolom name
di kartu unik.
Lihat cuplikan JSON kartu yang salah
Error: Objek textInput
tidak memiliki kolom name
yang ditetapkan, sehingga menyebabkan dialog ditutup, gagal dimuat, atau gagal dibuka.
. . . { "textInput": { "label": "Name", "type": "SINGLE_LINE", } } . . .
Lihat cuplikan JSON kartu yang benar
Perbaikan: textInput
kini memiliki kolom name
yang ditentukan, sehingga dialog berfungsi seperti yang diharapkan.
. . . { "textInput": { "label": "Name", "type": "SINGLE_LINE", "name": "contactName" } } . . .
Dialog buka, kirim, atau batalkan tindakan gagal dengan arsitektur aplikasi asinkron
Jika aplikasi Chat Anda menampilkan pesan error
Could not load dialog. Invalid response returned by bot.
saat menangani
dialog, hal ini mungkin karena aplikasi Anda
menggunakan arsitektur asinkron, seperti
Cloud Pub/Sub atau metode
Create Message API.
Membuka, mengirimkan, atau membatalkan dialog memerlukan
respons sinkron dari aplikasi Chat dengan
DialogEventType
.
Oleh karena itu, dialog tidak didukung oleh aplikasi
yang dibuat dengan arsitektur asinkron.
Sebagai solusinya, pertimbangkan untuk menggunakan pesan kartu, bukan dialog.
Error kartu dan dialog lainnya
Jika perbaikan yang dijelaskan di halaman ini tidak menyelesaikan error terkait kartu yang dialami aplikasi Anda, kueri log error aplikasi. Membuat kueri log dapat membantu menemukan error di JSON kartu atau kode aplikasi, dan log tersebut menyertakan pesan error deskriptif untuk membantu Anda memperbaikinya.
Topik terkait
Untuk mendapatkan bantuan dalam memperbaiki error aplikasi Google Chat, lihat Memecahkan masalah dan memperbaiki aplikasi Google Chat serta Men-debug aplikasi Chat.