Debugging

Every UI Element includes a config.logs option that determines the verbosity of messages printed to the browser console. The default value is warn, which will show warnings and errors (full details of all available options can be found here.

Configuration errors #

Configuration errors are problems with the options object used to initalize a UI Element. If there is an error with the configuration, the UI Element will not be rendered on the screen but an error message will be rendered in its place.

Note: There is one kind of configuration error that will not render anything to the screen, options.target_id not being found as then we don’t have a target to render the error within! This will still show an error message in the developer console as with all other errors.

Example configuration error #

The following screenshots show an Availability Viewer UI Element with an invalid config.start_time option:

Generic errors #

In some scenarios, the options can all be “valid” but the UI Element is still unable to function properly. In these instances, the UI Element will render on the page with an error message. This message is purposefully more generic, because end-users may see this error. The messages in the console, however, still aim to be as descriptive as possible.

The Element will also emit a notification with the type error in these cases, to allow your application to take action when these issues occur.

Common causes of errors #

An invalid token (if it’s a String it will pass the config-validation, but could still fail when connecting to the API if the token itself is not valid).
Bad permission on a UI Element token
Malformed availability queries

Example generic error #

The following screenshots show an Availability Viewer element with a malformed availability query option:

Example of an error notification #

The following is an example notification sent to your callback function. In this example, the API call to the Availability Query endpoint has failed because the application does not have access to the account acc_600eb48068ed0f33f6d4abad. This could happen because authorization was revoked between generating the Element Token and rendering the component, for example.

{
  "notification": {
    "type": "error",
    "element": "Availability Viewer",
    "message": "There was a problem with your availability query.",
    "url": "https://docs.cronofy.com/developers/ui-elements/availability-viewer/#availability_query",
    "errors": {
      "participant[sub=acc_600eb48068ed0f33f6d4abad]": [
        {
          "key": "errors.not_recognized",
          "description": "not recognized"
        }
      ]
    }
  }
}