# Debugging

> **WARNING:** 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](/developers/ui-elements/index.md).

## 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.

> **SECONDARY:** *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:

![](/developers/ui-elements/debugging/example-error-config.d3d72ca54134bfcbbfe1b3d78bc0368ab6508ed13b6626df56fb537050e69609.png)
![](/developers/ui-elements/debugging/example-console-config.c1eb0eb1bdaddb81c37403c4368ccda52aea6227824eeecd416d9925df50c963.png)
## 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](/developers/ui-elements/authentication/index.md) (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](/developers/ui-elements/authentication/index.md)

- [Malformed `availability` queries](/developers/api/scheduling/availability/index.md)

### Example generic error
The following screenshots show an Availability Viewer element with a malformed  `availability` query option:

![](/developers/ui-elements/debugging/example-error-generic.33638b10bb76d951edbd86456c95ffd839bb3949bc5de6bdec880b61244e798c.png)
![](/developers/ui-elements/debugging/example-console-generic.73f18bcee7bae4bd5d2700bc34fc18a43612b4a8492ac3fe5a4590794629396a.png)
### 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.

```json
{
  "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"
        }
      ]
    }
  }
}
```



---
[Read in HTML](/developers/ui-elements/debugging/)