Install two versions of Sentry Client SDK

What does this MR do and why?

This MR is a follow up to !102650 (merged).

It installs two versions of the Sentry browser SDK so we can toggle reporting errors to two a new Sentry instance:

• Disabled feature flag: Use Sentry SDK v5 and report to the Sentry v9 DSN in the config (gitlab.yml)
• Enabled feature flag: Use Sentry SDK v7 and report to the Sentry v22+ DSN in the settings (Admin UI values)

Note

20+ files changed! Wow!

Yes, I've had to change many files but most of the lines changes are small changes

• Move current sentry js files to have a legacy_ prefix and add the new ones
• Add the new Sentry 7 dependency with an alias, which leads to a few changes in webpack and jest config.
• A few repetitive specs for the feature flag state checks.

I've split this change into different MRs, but this last one is the largest one:

Remove unusable Sentry feature flag (!104231 - merged)
Move and rename Sentry constants (!104247 - merged)
Install two versions of Sentry Client SDK (!102790 - merged)	you are here

Use case

This rollout is enabled by having two sets of Sentry settings in our gitlab instance at once, the GitLab instance config (from gitlab.yml) and the settings (the UI). A rollout could consist of:

1. Ensure the Sentry config (e.g. in gitabl.yml) is present for the old Sentry instance (v9).
2. Enable configure_sentry_in_application_settings the enable Admin UI Sentry settings.
3. Visit /admin/application_settings/metrics_and_profiling to configure the Sentry settings for the new Sentry instance.
4. Progressive rollout of enable_new_sentry_clientside_integration to users. Users with the feature flag enabled will begin reporting to the new instance.
   • The recommended rollout method is percentage: 5%, 10%, ...
5. Once the rollout is complete, remove the dangling dependencies and remove this feature flag.

Screenshots or screen recordings

Errors appear to be reported the new Sentry instance:

How to set up and validate locally

1. Check out this branch and install run yarn.

2. This MR installs two versions of the Sentry Browser GDK, so we should test two integrations:

Legacy Integration

1. Ensure the feature flag for the new integration is disabled Feature.disable(:enable_new_sentry_clientside_integration)

2. Add Sentry (v9) DSN in gitlab.yml:

  ## Error Reporting and Logging with Sentry
  sentry:
    enabled: true
    dsn: https://XXXX@sentry.gitlab.net/1
    clientside_dsn: https://XXXX@sentry.gitlab.net/1
    environment: 'development'

3. Confirm events are captured by the old Sentry instance

New integration

1. Enable the feature flags to enable the new integration and the UI settings panel:

   • Feature.enable(:enable_new_sentry_clientside_integration)
   • Feature.enable(:configure_sentry_in_application_settings)

2. Setup the Sentry (newer version) DSN at: http://gdk.test:3000/admin/application_settings/metrics_and_profiling

3. Confirm events are captured by the new Sentry instance

Simulate triggering an error

To ensure I can trigger an error consistently, I added a mock button in `/admin/runners`.

diff --git a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
index 2915e4600855..fd04e7b3e4e1 100644
--- a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
@@ -1,4 +1,5 @@
 <script>
+import * as Sentry from '@sentry/browser';
 import { GlLink } from '@gitlab/ui';
 import { createAlert } from '~/flash';
 import { updateHistory } from '~/lib/utils/url_utility';
@@ -152,6 +153,9 @@ export default {
     onPaginationInput(value) {
       this.search.pagination = value;
     },
+    reportError() {
+      Sentry.captureException(new Error('test error'));
+    },
   },
   filteredSearchNamespace: ADMIN_FILTERED_SEARCH_NAMESPACE,
   INSTANCE_TYPE,
@@ -160,6 +164,7 @@ export default {
 </script>
 <template>
   <div>
+    <gl-link @click="reportError">Report Error Here!</gl-link>
     <div
       class="gl-display-flex gl-align-items-center gl-flex-direction-column-reverse gl-md-flex-direction-row gl-mt-3 gl-md-mt-0"
     >

After I visit http://gdk.test:3000/admin/runners to report an error on each click.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

app/assets/javascripts/sentry/sentry_browser_wrapper.js

@@ -3,22 +3,25 @@
 // in the browser (or none). See app/views/layouts/_head.html.haml
 // to find how it is imported.
 
-// This module wraps methods used by our production code.
-// Each export is names as we cannot export the entire namespace from *.
-
-// eslint-disable-next-line no-underscore-dangle
-const Sentry = window._Sentry;
-
 // This module wraps methods used by our production code.
 // Each export is names as we cannot export the entire namespace from *.
 export const captureException = (...args) => {
+  // eslint-disable-next-line no-underscore-dangle
+  const Sentry = window._Sentry;
+
   Sentry?.captureException(...args);
 };
 
 export const captureMessage = (...args) => {
+  // eslint-disable-next-line no-underscore-dangle
+  const Sentry = window._Sentry;
+
   Sentry?.captureMessage(...args);
 };
 
 export const withScope = (...args) => {
+  // eslint-disable-next-line no-underscore-dangle
+  const Sentry = window._Sentry;
+
   Sentry?.withScope(...args);
 };