Monitoring Twilio’s Flex Agent Desktop with Sentry

Twilio Flex is a React-based web app that lets you run your contact center as a service, and years ago, while working at a previous company, I was tasked with setting it up with Sentry for application observability and error monitoring. To help you set up Flex with Sentry— and using all the lessons I learned along the way— I’ve teamed up with Bruno, Solutions Engineer, from Twilio to build a new Twilio Flex integration.

If you are involved in contact center management, you know that SLAs and uptime management are of the utmost importance. Nothing impacts long wait times more than errors interrupting or halting contact center operations. The Twilio Flex and Sentry integration gives developers and call center specialists the visibility and context needed to capture and resolve those errors quickly.

Sentry in Twilio Flex

In collaboration with Twilio we have built an example Flex Plugin, flex-sentry, which you can adapt for your use case. This example plugin uses the Sentry React SDK, since Flex is a React app using react-router v5.

Sentry is a debuggability tool that captures errors, tracing data, and video-like reproductions of user sessions with Session Replay. With this data and context, you can easily reproduce any errors that occur in your application. Sentry’s User Feedback component allows you to capture feedback from your end users. In that same way, now with Sentry integrated into Flex, contact center agents can provide give feedback too. Via an embedded widget and they won’t need to break away from their current workflow in managing incoming calls and chats from your customers…

Below we will show you how to add Sentry’s React SDK to your Twilio Flex instance, ensuring you can capture errors and be alerted to downtimes which might negatively impact your team’s ability to respond to customers in a timely manner.

Before we start

This post assumes you already have a Twilio account (if you don’t, sign up for a free account here), have a Flex Instance running, and know how to install a Flex Plugin. Get started with Flex Plugins if this is not the case. Before getting started:

1. You need to have the Twilio CLI. Type twilio in your terminal to see if you have it. If not, install it now.

npm install -g twilio-cli

2. You need the Flex Plugins CLI. Type twilio plugins to make sure you have it. If not, install it.

twilio plugins:install @twilio-labs/plugin-flex`

3. You need to create a new profile for your Twilio CLI, type twilio profiles:list to check if you are using it correctly. If not, add a new profile with the command twilio profiles:add

If you want to dive deeper into Flex Plugins, check out the Flex Exercises courses – a great place to learn more.

Run Flex Plugin locally for testing

Before deploying, let’s test everything locally to make sure your setup is working. For that, you’ll need to:

1. Clone the flex-sentry repo.
2. Go over this sentry config file to update it with your DSN
3. Install the npm package dependencies with npm install
4. Start the Plugin with npm run start

And that’s it. At this point, your default browser should have opened with your Flex Plugin running locally.

And if you click at the “X” highlighted below, it throws an Error - a good way to test if Sentry integration is working properly. After this you can go check within Sentry to see if a new issue was created.

As a final step before deploying, you can check the Sentry config file to adapt it for your needs. It’s where you can, for example, enable/disable Session Replay or the User Feedback component.

Sentry.init({
    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0', 
    integrations: [
      ........
      Sentry.replayIntegration(),
      Sentry.feedbackIntegration({
      // Additional SDK configuration goes in here, for example:
      colorScheme: "system",
    }),
    ],
    replaysSessionSampleRate: 0.1, // overall replay sampling
    replaysOnErrorSampleRate: 1.0, // sampling on errors 
......
  });

Deploy the Plugin:

After successfully running it locally, it is time to deploy the Plugin so all the Agents of your Contact Center can benefit from it:

1. To deploy, run:

twilio flex:plugins:deploy --major --changelog "Initial deployment with Sentry integration"

2. Once deployed, you have to enable it with the command:

twilio flex:plugins:release --plugin sentry-plugin@x.x.x --name "Release Name" --description "Release Description"

Go to your Twilio Flex instance and verify that your plugin is working and trigger that error again in your custom component to ensure everything is still working as expected in Sentry.

Above you can see how to navigate from the Error event to the Session Replay with a video-like representation of the user session, and then a series of breadcrumbs.

By integrating Sentry for Twilio Flex, it’s easier for your developer and support teams to identify the root cause behind issues your customers experience.Try it for yourself, and if you have any feedback please feel free to reach out on our Discord server, our X @getsentry, or by creating an issue for Sentry’s JavaScript SDK in GitHub.