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.

We will track the following:

• Page visits (secrets table, secret detail, create form, edit form)
• GraphQL error messages
• [-] Nice to have: if the user attempts to do the CTA for the action after receiving an error
• [-] Nice to have: how many people abandon their task of either creating/editing/deleting a secret (see #571236 (comment 2811425725))

This will be implemented over a series of MRs. We may need to have separate event categories per context (PROJECT, GROUP).

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

1. Upload a Premium+ license.
2. Enable the feature flags secrets_manager and secrets_manager_group.
3. Set up openbao on your gdk.
4. Enable the Secrets Manager on gdk for a project.
5. Go to Secure > Secrets manager and verify that page visits and UI interactions trigger the track_event request on the Network tab.