Error Handling and Debugging

The Flex UI provides the FlexError class, the FlexError event, and the Error Reporting UI to make it easier to notice and report issues. Read on to learn more about these tools and how they affect your development process.

The FlexError Class

The FlexError class is an extension of normal JavaScript Error class, with added context. This class includes more info on errors to help pinpoint problems and consolidate the Flex UI API. The most noteworthy fields of the FlexError are:

Field Name Description
error.message Error message with unique non-changing string describing the error
error.content.description A longer version of error.message. It can include a longer explanation of the error and also include variable information, like the worker SID or task SID in question.
error.content.wrappedError Any error captured from 3rd party libraries, Twilio SDKs or a custom Plugin. The original error is placed in this field.

You'll see FlexErrors in two main contexts:

FlexError in an Action Invocation

If a Flex Action called by your Plugin fails, it throws a FlexError in its promise rejection. Depending on the error, the FlexError can wrap another error, like an error thrown by the backend.

try {
    await Flex.Actions.invokeAction("SomeAction", payload)
} catch(e){
    // e is FlexError

Listening to the flexError event

Whenever the Flex UI creates an error in its code, whether it throws it further or not, its creation is reported by flexError event. You can subscribe to that event for your own reporting purposes. The event is strictly informative. The user's actions in the event handler will not have any bearing on how the Flex UI deals with the error itself."flexError", (error) => {
    // do your own handling/reporting

Get error reports and logs

Client-side logs or errors are allowed to contain PII (Personally Identifiable Information) because they are transient and are not saved beyond a user session. By exporting them, however, PII is also exported and saved to the file. Please take proper precautions to protect your customers' data when saving and sharing this file.

Error reports and logs mentioned in the Error UI End User Docs can also be retrieved programmatically. Flex.Monitor.getLogs returns the current logs and Flex.Monitor.getError returns all recorded errors in an array. You can use these methods to implement special reporting or report handling.

import { Monitor } from "@twilio/flex-ui";

Monitor.getErrors(); // returns { errors: [Monitor.FlexErrorJSON] }
Monitor.getLogs(); // returns { logs: 'string' }

Next Steps

Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Community Forums or browsing the Twilio tag on Stack Overflow.

Thank you for your feedback!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Sending your feedback...
🎉 Thank you for your feedback!
Something went wrong. Please try again.

Thanks for your feedback!

Refer us and get $10 in 3 simple steps!

Step 1

Get link

Get a free personal referral link here

Step 2

Give $10

Your user signs up and upgrade using link

Step 3

Get $10

1,250 free SMSes
OR 1,000 free voice mins
OR 12,000 chats
OR more