Matomo and Sentry tracking components

[spwoodcock]

We use Sentry for tracking application errors and Matomo for usage statistics.

Matomo

The Matomo banner looks like this:

The code is here https://github.com/hotosm/matomo-tracking

A new Web Component should be made for this banner, wrapping a few existing web components, for easy integration into frontends:

<hot-matomo site_id="xx"></hot-matomo>

Sentry

If possible, can the sentry component load in the Sentry JS code dynamically? So it's only loaded via CDN if the component is used. It then needs to init Sentry:

      Sentry.init({
        dsn: 'https://some.sentry.instance',
        integrations: [
          new Sentry.BrowserTracing({
            tracePropagationTargets: ['https://your.domain.com/', 'https://other.domain.com/'],
          }),
          new Sentry.Replay(),
        ],
        // Performance Monitoring
        tracesSampleRate: 1.0,
        replaysSessionSampleRate: 0.1,
        replaysOnErrorSampleRate: 1.0,
      });

The web component should be configurable:

<hot-sentry
  endpoint="https://some.sentry.instance"
  domains="['https://your.domain.com/', 'https://other.domain.com/']"
  traces-sample-rate="1.0"
  replays-sessions-sample-rate="0.1"
  replays-on-error-sample-rate="1.0"
></hot-sentry>

[spwoodcock]

Matomo component done.

A Sentry component doesn't have anything visual, just initialisation code. It's probably best leaving this to each project to configure - it's pretty easy to do.

Closing.

[spwoodcock]

If a component could be made that handles either Sentry or OpenTelemetry based config, then this could be re-opened. (as OpenTelemetry is not trivial & it could be useful to write a standardised way to do things)