Frontend: Log and monitor error events and UI interactions

Why are we doing this work

We want to track error events and secrets usage for the Closed Beta so we can determine how often or severe they are, and what actions we can take to make improvements or mitigate errors for GA.

What we want to track (list to be finalized later):

• Page visits and UX interactions
• GraphQL error messages and if the user attempts to do the CTA for this actin
• Nice to have: how many people abandon their task of either creating/editing/deleting a secret (see #571236 (comment 2811425725))

Relevant links

See related discussions in:

• Log and monitor error events and secrets usage (backend issue)
• Design UX for handling partially failed operations in Secrets Manager
• Frontend: Hide pages and buttons in the Secrets Manager based on permissions granted to the current user

Implementation plan

frontend can implement tracking for page visits, UX interactions (e.g. button clicks, etc.) using the GitLab Internal Events Tracking API (snowplow tracking is being deprecated). Refer to the frontend docs and the main documentation Internal Event Tracking.

GraphQL errors are tracked via sentry. This can be implemented manually or through createAlert:

import { createAlert } from '~/alert';
...
createAlert({
  message: __('An error occurred.'), // Error message shown in the UI
  captureError: true, // Captures error to Sentry
  error, // Error message provided to Sentry
});

Verification steps

TBA