4 files changed, 83 insertions, 64 deletions
diff --git a/app/assets/javascripts/sentry/index.js b/app/assets/javascripts/sentry/index.js
index cf6a79fe939..940caea3322 100644
--- a/app/assets/javascripts/sentry/index.js
+++ b/app/assets/javascripts/sentry/index.js
@@ -1,35 +1,4 @@
 import '../webpack';
+import { initSentry } from './init_sentry';
 
-import * as Sentry from 'sentrybrowser7';
-import SentryConfig from './sentry_config';
-
-const index = function index() {
-  // Configuration for newer versions of Sentry SDK (v7)
-  SentryConfig.init({
-    dsn: gon.sentry_dsn,
-    environment: gon.sentry_environment,
-    currentUserId: gon.current_user_id,
-    allowUrls:
-      process.env.NODE_ENV === 'production'
-        ? [gon.gitlab_url]
-        : [gon.gitlab_url, 'webpack-internal://'],
-    release: gon?.version,
-    tags: {
-      revision: gon?.revision,
-      feature_category: gon?.feature_category,
-      page: document?.body?.dataset?.page,
-    },
-  });
-};
-
-index();
-
-// The _Sentry object is globally exported so it can be used by
-//   ./sentry_browser_wrapper.js
-// This hack allows us to load a single version of `@sentry/browser`
-// in the browser, see app/views/layouts/_head.html.haml to find how it is imported.
-
-// eslint-disable-next-line no-underscore-dangle
-window._Sentry = Sentry;
-
-export default index;
+initSentry();
diff --git a/app/assets/javascripts/sentry/init_sentry.js b/app/assets/javascripts/sentry/init_sentry.js
new file mode 100644
index 00000000000..dbd12dc36ce
--- /dev/null
+++ b/app/assets/javascripts/sentry/init_sentry.js
@@ -0,0 +1,77 @@
+import {
+  BrowserClient,
+  getCurrentHub,
+  defaultStackParser,
+  makeFetchTransport,
+  defaultIntegrations,
+
+  // exports
+  captureException,
+  captureMessage,
+  withScope,
+  SDK_VERSION,
+} from 'sentrybrowser';
+
+const initSentry = () => {
+  if (!gon?.sentry_dsn) {
+    return;
+  }
+
+  const hub = getCurrentHub();
+
+  const client = new BrowserClient({
+    // Sentry.init(...) options
+    dsn: gon.sentry_dsn,
+    release: gon.version,
+    allowUrls:
+      process.env.NODE_ENV === 'production'
+        ? [gon.gitlab_url]
+        : [gon.gitlab_url, 'webpack-internal://'],
+    environment: gon.sentry_environment,
+
+    // Browser tracing configuration
+    tracePropagationTargets: [/^\//], // only trace internal requests
+    tracesSampleRate: gon.sentry_clientside_traces_sample_rate || 0,
+
+    // This configuration imitates the Sentry.init() default configuration
+    // https://github.com/getsentry/sentry-javascript/blob/7.66.0/MIGRATION.md#explicit-client-options
+    transport: makeFetchTransport,
+    stackParser: defaultStackParser,
+    integrations: defaultIntegrations,
+  });
+
+  hub.bindClient(client);
+
+  hub.setTags({
+    revision: gon.revision,
+    feature_category: gon.feature_category,
+    page: document?.body?.dataset?.page,
+  });
+
+  if (gon.current_user_id) {
+    hub.setUser({
+      id: gon.current_user_id,
+    });
+  }
+
+  // The option `autoSessionTracking` is only avaialble on Sentry.init
+  // this manually starts a session in a similar way.
+  // See: https://github.com/getsentry/sentry-javascript/blob/7.66.0/packages/browser/src/sdk.ts#L204
+  hub.startSession({ ignoreDuration: true }); // `ignoreDuration` counts only the page view.
+  hub.captureSession();
+
+  // The _Sentry object is globally exported so it can be used by
+  //   ./sentry_browser_wrapper.js
+  // This hack allows us to load a single version of `@sentry/browser`
+  // in the browser, see app/views/layouts/_head.html.haml to find how it is imported.
+
+  // eslint-disable-next-line no-underscore-dangle
+  window._Sentry = {
+    captureException,
+    captureMessage,
+    withScope,
+    SDK_VERSION, // used to verify compatibility with the Sentry instance
+  };
+};
+
+export { initSentry };
diff --git a/app/assets/javascripts/sentry/sentry_browser_wrapper.js b/app/assets/javascripts/sentry/sentry_browser_wrapper.js
index 0382827f82c..fbfd5d4f458 100644
--- a/app/assets/javascripts/sentry/sentry_browser_wrapper.js
+++ b/app/assets/javascripts/sentry/sentry_browser_wrapper.js
@@ -5,6 +5,8 @@
 
 // This module wraps methods used by our production code.
 // Each export is names as we cannot export the entire namespace from *.
+
+/** @type {import('@sentry/core').captureException} */
 export const captureException = (...args) => {
   // eslint-disable-next-line no-underscore-dangle
   const Sentry = window._Sentry;
@@ -12,6 +14,7 @@ export const captureException = (...args) => {
   Sentry?.captureException(...args);
 };
 
+/** @type {import('@sentry/core').captureMessage} */
 export const captureMessage = (...args) => {
   // eslint-disable-next-line no-underscore-dangle
   const Sentry = window._Sentry;
@@ -19,6 +22,7 @@ export const captureMessage = (...args) => {
   Sentry?.captureMessage(...args);
 };
 
+/** @type {import('@sentry/core').withScope} */
 export const withScope = (...args) => {
   // eslint-disable-next-line no-underscore-dangle
   const Sentry = window._Sentry;
diff --git a/app/assets/javascripts/sentry/sentry_config.js b/app/assets/javascripts/sentry/sentry_config.js
deleted file mode 100644
index 80f087691f4..00000000000
--- a/app/assets/javascripts/sentry/sentry_config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as Sentry from 'sentrybrowser7';
-
-const SentryConfig = {
-  init(options = {}) {
-    this.options = options;
-
-    this.configure();
-    if (this.options.currentUserId) this.setUser();
-  },
-
-  configure() {
-    const { dsn, release, tags, allowUrls, environment } = this.options;
-
-    Sentry.init({
-      dsn,
-      release,
-      allowUrls,
-      environment,
-    });
-
-    Sentry.setTags(tags);
-  },
-
-  setUser() {
-    Sentry.setUser({
-      id: this.options.currentUserId,
-    });
-  },
-};
-
-export default SentryConfig;