Twilio Flex Plugin for Sentry

[smeubank]

Background:

Twilio Provides a frontend solution, which is a "Contact Center as a Service", solution. It is essentially a place where agents can login to manage inbound and outbound calls, and other forms of communication with their respective customers.

The SaaS based offereing of flex allows Twilio developers to modify the site with plugins.

OOTB it does not support Sentry, and since it is a plugin, it means developers do not have access to the source code, or build process.

So how best to introduce Sentry?

Proposal:

This repo, https://github.com/bruno222/flex-sentry/tree/add-sentry provides an example of how to create a plugin using the Sentry React SDK.

Is this the best way to add this instrumentation? Are there any other configurations that should be considered?

src/sentry.ts

import { createBrowserHistory } from 'history';

import * as Sentry from '@sentry/react';

export const startSentry = (email: string, flexVersion: string) => {
  const history = createBrowserHistory();

  // Array of Route Config Objects
  // Make sure the order of the routes is correct. The longest url under the same parent should be placed first and in decreasing order.
  // Doc: https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/
  const routes = [{ path: '/agent-desktop/:taskReservation' }, { path: '/agent-desktop' }, { path: '/' }];

  Sentry.init({
    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0', // ADD YOUR SENTRY DSN HERE
    integrations: [
      Sentry.reactRouterV5BrowserTracingIntegration({
        history,
        routes,
        // matchPath,
      }),
      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 


    // OfflineCaching
    // https://docs.sentry.io/platforms/javascript/guides/react/best-practices/offline-caching/
    transport: Sentry.makeBrowserOfflineTransport(Sentry.makeFetchTransport),

    // We recommend adjusting this value in production, or using tracesSampler
    // for finer control
    tracesSampleRate: 1.0,

    // Get info about Flex and about the Agent
    initialScope: {
      tags: { flexVersion },
      user: { email },
    },
  });
};

[smeubank]

@bruno222 it would probably make sense we define some requirements. Like user/agent email which you are already capturing. let me know if the current discussion description makes sense

[bruno222]

Yes - requirements to instal this Plugin must be mentioned on the blog post. Here are two examples: One and Two

[smeubank]

@AbhiPrasad thinking of cloud context, would there be away to denote that events are coming from the Twilio Flex SaaS env? Since this is just the react SDK, but it'd be interesting to see if events are coming from this cloud environment

[smeubank]

after discussions with @AbhiPrasad

We might need to consider https://docs.sentry.io/platforms/javascript/best-practices/browser-extensions/ because there can be multiple integration on the site.

But it is not clear, I think the best course is to potentially add other common plugins, one with an error ideally, and ensure that the sentry plugin also captures that errors, which I assume it will.