Khắc phục sự cố và sửa lỗi thẻ cũng như hộp thoại

Hướng dẫn này mô tả các lỗi thường gặp liên quan đến thẻ mà bạn có thể gặp phải và cách khắc phục.

Sử dụng Trình tạo thẻ để thiết kế và xem trước thông báo trên thẻ JSON cho các ứng dụng trong Chat:

Mở Trình tạo thẻ

Cách lỗi thẻ xuất hiện

Có một số cách để phát hiện lỗi thẻ:

  • 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 hiển thị theo cách ngoài dự kiến.
  • Toàn bộ thẻ sẽ 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 phải hành vi như vậy thì điều đó có 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 thẻ hoạt động, không có lỗi

Trước khi kiểm tra các ví dụ về thẻ lỗi, trước tiên hãy xem xét thông báo và hộp thoại trên thẻ đang hoạt động 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 các lỗi.

Thông báo trên thẻ không có lỗi

Đây là thông báo trên thẻ đang hoạt động, không có lỗi nêu chi tiết thông tin liên hệ có tiêu đề, các phần và các tiện ích như văn bản và nút được trang trí:

Hộp thoại không có lỗi

Đây là hộp thoại đang hoạt động và không có lỗi để tạo địa chỉ 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ăn bản và công tắc và nút:

Lỗi: Một phần của thẻ không xuất hiện

Đôi khi, thẻ xuất hiện nhưng một phần của thẻ mà bạn muốn nhìn thấy 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 chính xác.

Nguyên nhân: Thiếu trường JSON bắt buộc

Trong lỗi ví dụ này, thiếu trường JSON bắt buộc (title). Do đó, thẻ sẽ hiển thị nhưng các phần của thẻ dự kiến sẽ xuất hiện thì không. Bạn có thể khó dự đoán cách thẻ hiển thị khi các trường bắt buộc bị bỏ qua.

Để 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 có 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ả về trường title trên CardHeader.

Dưới đâ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ị do thiếu trường bắt buộc, tiêu đề.
Hình 1: Tiêu đề của thẻ này không hiển thị vì thiếu trường bắt buộc title.

Xem đoạn mã JSON của thẻ không chính xác

Lỗi: header thiếu 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 thông số kỹ thuật 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ị do thiếu trường bắt buộc, tiêu đề.
Hình 2: Tiêu đề của thẻ này không hiển thị tiêu đề phụ vì thiếu trường bắt buộc title, nhưng hình ảnh hiển thị như dự kiến.

Xem đoạn mã JSON của thẻ không chính xác

Lỗi: header thiếu 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 thông số kỹ thuật 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 sai chính tả hoặc viết hoa không chính xác

Trong ví dụ này, mã JSON của thẻ bao gồm tất cả các trường bắt buộc, 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ị.

Để sửa lỗi này và những lỗi khác tương tự, hãy sử dụng đúng định dạng JSON. 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ẻ so với tài liệu tham chiếu thẻ.

Tiêu đề của thẻ này không hiển thị do thiếu trường bắt buộc, tiêu đề.
Hình 3: Tiêu đề của thẻ này không hiển thị tiêu đề phụ vì thiếu trường bắt buộc title, nhưng hình ảnh 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ẻ

Đã sửa: 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ộ một thẻ không xuất hiện

Đôi khi, thẻ không xuất hiện; nguyên nhân có thể là:

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ẻ có tiện ích ButtonList được chỉ định không chính xác hoặc tiện ích CardFixedFooter có các nút đượ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í đó. Thông số kỹ thuật không chính xác có thể bao gồm các trường bị thiếu, các trường viết hoa hoặc viết sai chính tả hay JSON có cấu trúc không đúng cách, 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ẻ so với tài liệu tham chiếu thẻ. Cụ thể, hãy so sánh mọi tiện ích ButtonList 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 truyền một thao tác onClick chưa hoàn tất vào nút đầu tiên sẽ khiến toàn bộ thẻ không hiển thị.

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, do đó 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, vì vậy thẻ 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, dừng 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 đề.

Sau đây là những lý do phổ biến nhất:

Nguyên nhân: CardFixedFooter không có primaryButton

Trong hộp thoại có tiện ích CardFixedFooter, bạn 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 giá trị này không chính xác, thì 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 không có trường primaryButton được chỉ định. Điều này khiến hộp thoại không tải hoặc 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 hoạt động như mong đợi.

    . . .
    "fixedFooter": {
      "primaryButton": {
        "text": "Submit",
        "color": {
          "red": 0,
          "blue": 1,
          "green": 0
        },
        "onClick": {
          . . .
      },
      "secondaryButton": {
        . . .
        }
      }
    }
    . . .

Nguyên nhân: Chế độ cài đặt onClick không chính xác trong FixedFooter

Trong hộp thoại có tiện ích CardFixedFooter, việc chỉ định sai chế độ cài đặt onClick trên bất kỳ nút nào hoặc bỏ qua nút đó, 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 chứa mảng "parameters" sai chính tả, khiến hộp thoại không tải hoặc 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 với mảng "parameters" đúng chính tả, vì vậy hộp thoại 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ó một tiện ích TextInput loại trừ trường name, thì hộp thoại sẽ không hoạt động như mong đợi. Cửa sổ 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ó trường name thích hợp. Hãy đảm bảo mỗi trường name trong thẻ đều là duy nhất.

Xem đoạn mã JSON của thẻ không chính xác

Lỗi: Đối tượng textInput không có trường name được chỉ định. Điều này khiến hộp thoại bị đó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 hoạt động như mong đợi.

    . . .
    {
      "textInput": {
        "label": "Name",
        "type": "SINGLE_LINE",
        "name": "contactName"
      }
    }
    . . .

Không thực hiện được hành động mở, gửi hoặc huỷ hộp thoại với 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 làm việc với 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ư.

Bạn cần phải mở, gửi hoặc huỷ một hộp thoại phản hồi đồng bộ từ ứng dụng Chat có DialogEventType. Do đó, hộp thoại không được ứng dụng hỗ trợ được tạo bằng cấu trúc không đồng bộ.

Để giải quyết sự cố này, hãy cân nhắc sử dụng thông báo thẻ thay vì hộp thoại.

Các 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 thấy lỗi trong JSON thẻ hoặc mã ứng dụng. Ngoài ra, nhật ký này còn có các thông báo lỗi mô tả để giúp bạn khắc phục.

Để được trợ giúp khắc phục các lỗi liên quan đến ứng dụng Google Chat, hãy xem bài viết Khắc phục sự cố và khắc phục ứng dụng Google Chat cũng như Gỡ lỗi ứng dụng trong Chat.