Merge branch 'reenable-sentry-pipeline-graph-only' into 'master'

Re-enable Sentry across all of the frontend codebase

See merge request gitlab-org/gitlab!54441

app/assets/javascripts/analytics/usage_trends/components/projects_and_groups_chart.vue

 <script>
 import { GlAlert } from '@gitlab/ui';
 import { GlLineChart } from '@gitlab/ui/dist/charts';
+import * as Sentry from '@sentry/browser';
 import produce from 'immer';
 import { sortBy } from 'lodash';
 import { formatDateAsMonth } from '~/lib/utils/datetime_utility';
 import { s__, __ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 import latestGroupsQuery from '../graphql/queries/groups.query.graphql';
 import latestProjectsQuery from '../graphql/queries/projects.query.graphql';

app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue

 <script>
+import * as Sentry from '@sentry/browser';
 import MetricCard from '~/analytics/shared/components/metric_card.vue';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
 import { s__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import usageTrendsCountQuery from '../graphql/queries/usage_trends_count.query.graphql';
 
 const defaultPrecision = 0;

app/assets/javascripts/analytics/usage_trends/components/usage_trends_count_chart.vue

 <script>
 import { GlAlert } from '@gitlab/ui';
 import { GlLineChart } from '@gitlab/ui/dist/charts';
+import * as Sentry from '@sentry/browser';
 import { some, every } from 'lodash';
 import {
   differenceInMonths,
   formatDateAsMonth,
   getDayDifference,
 } from '~/lib/utils/datetime_utility';
-import * as Sentry from '~/sentry/wrapper';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 import { TODAY, START_DATE } from '../constants';
 import { getAverageByMonth, getEarliestDate, generateDataKeys } from '../utils';

app/assets/javascripts/analytics/usage_trends/components/users_chart.vue

 <script>
 import { GlAlert } from '@gitlab/ui';
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
+import * as Sentry from '@sentry/browser';
 import produce from 'immer';
 import { sortBy } from 'lodash';
 import { formatDateAsMonth } from '~/lib/utils/datetime_utility';
 import { __ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 import usersQuery from '../graphql/queries/users.query.graphql';
 import { getAverageByMonth } from '../utils';

app/assets/javascripts/clusters_list/store/actions.js

+import * as Sentry from '@sentry/browser';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import Poll from '~/lib/utils/poll';
 import { __ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import { MAX_REQUESTS } from '../constants';
 import * as types from './mutation_types';
 

app/assets/javascripts/flash.js

+import * as Sentry from '@sentry/browser';
 import { escape } from 'lodash';
-import * as Sentry from '~/sentry/wrapper';
 import { spriteIcon } from './lib/utils/common_utils';
 
 const FLASH_TYPES = {

app/assets/javascripts/issue_show/utils/parse_data.js

+import * as Sentry from '@sentry/browser';
 import { sanitize } from '~/lib/dompurify';
-import * as Sentry from '~/sentry/wrapper';
 
 // We currently load + parse the data from the issue app and related merge request
 let cachedParsedData;

app/assets/javascripts/monitoring/stores/actions.js

+import * as Sentry from '@sentry/browser';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
-import * as Sentry from '~/sentry/wrapper';
 import { convertObjectPropsToCamelCase } from '../../lib/utils/common_utils';
 import { s__, sprintf } from '../../locale';
 import { ENVIRONMENT_AVAILABLE_STATE, OVERVIEW_DASHBOARD_PATH, VARIABLE_TYPES } from '../constants';

app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue

@@ -17,6 +17,7 @@ import {
   GlLoadingIcon,
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { uniqueId } from 'lodash';
 import Vue from 'vue';
 import axios from '~/lib/utils/axios_utils';
@@ -24,7 +25,6 @@ import { backOff } from '~/lib/utils/common_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { s__, __, n__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import { VARIABLE_TYPE, FILE_TYPE, CONFIG_VARIABLES_TIMEOUT } from '../constants';
 
 export default {

app/assets/javascripts/pipelines/components/graph/utils.js

+import * as Sentry from '@sentry/browser';
 import Visibility from 'visibilityjs';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import * as Sentry from '~/sentry/wrapper';
 import { unwrapStagesWithNeeds } from '../unwrapping_utils';
 
 const addMulti = (mainPipelineProjectPath, linkedPipeline) => {

app/assets/javascripts/projects/commits/store/actions.js

+import * as Sentry from '@sentry/browser';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import * as types from './mutation_types';
 
 export default {

app/assets/javascripts/sentry/sentry_config.js

+import * as Sentry from '@sentry/browser';
 import $ from 'jquery';
 import { __ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 
 const IGNORE_ERRORS = [
   // Random plugins/extensions

app/assets/javascripts/sentry/wrapper.js

-// Temporarily commented out to investigate performance: https://gitlab.com/gitlab-org/gitlab/-/issues/251179
-// export * from '@sentry/browser';
-
-export function init(...args) {
-  return args;
-}
-
-export function setUser(...args) {
-  return args;
-}
-
-export function captureException(...args) {
-  return args;
-}
-
-export function captureMessage(...args) {
-  return args;
-}
-
-export function withScope(fn) {
-  fn({
-    setTag(...args) {
-      return args;
-    },
-  });
-}

app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue

@@ -11,12 +11,12 @@ import {
   GlButton,
   GlSafeHtmlDirective,
 } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
 import { fetchPolicies } from '~/lib/graphql';
 import { toggleContainerClasses } from '~/lib/utils/dom_utils';
 import { visitUrl, joinPaths } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import Tracking from '~/tracking';
 import initUserPopovers from '~/user_popovers';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';

app/assets/javascripts/vue_shared/alert_details/components/alert_metrics.vue

 <script>
+import * as Sentry from '@sentry/browser';
 import Vue from 'vue';
 import Vuex from 'vuex';
-import * as Sentry from '~/sentry/wrapper';
 
 Vue.use(Vuex);
 

app/views/layouts/_head.html.haml

@@ -54,8 +54,7 @@
   = Gon::Base.render_data(nonce: content_security_policy_nonce)
 
   = javascript_include_tag locale_path unless I18n.locale == :en
-  -# Temporarily commented out to investigate performance: https://gitlab.com/gitlab-org/gitlab/-/issues/251179
-  -# = webpack_bundle_tag "sentry" if Gitlab.config.sentry.enabled
+  = webpack_bundle_tag "sentry" if Gitlab.config.sentry.enabled
   = webpack_bundle_tag 'performance_bar' if performance_bar_enabled?
 
   = yield :page_specific_javascripts

changelogs/unreleased/reenable-sentry-pipeline-graph-only.yml

+---
+title: Restore Sentry functionaly to the frontend
+merge_request: 54441
+author:
+type: changed

config/webpack.config.js

@@ -101,7 +101,7 @@ function generateEntries() {
 
   const manualEntries = {
     default: defaultEntries,
-    // sentry: './sentry/index.js', Temporarily commented out to investigate performance: https://gitlab.com/gitlab-org/gitlab/-/issues/251179
+    sentry: './sentry/index.js',
     performance_bar: './performance_bar/index.js',
     chrome_84_icon_fix: './lib/chrome_84_icon_fix.js',
     jira_connect_app: './jira_connect/index.js',

ee/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_app.vue

@@ -7,8 +7,8 @@ import {
   GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import dateformat from 'dateformat';
-import * as Sentry from '~/sentry/wrapper';
 import {
   DEVOPS_ADOPTION_STRINGS,
   DEVOPS_ADOPTION_ERROR_KEYS,

ee/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_delete_modal.vue

 <script>
 import { GlModal, GlSprintf, GlAlert } from '@gitlab/ui';
-import * as Sentry from '~/sentry/wrapper';
+import * as Sentry from '@sentry/browser';
 import { DEVOPS_ADOPTION_STRINGS, DEVOPS_ADOPTION_SEGMENT_DELETE_MODAL_ID } from '../constants';
 import deleteDevopsAdoptionSegmentMutation from '../graphql/mutations/delete_devops_adoption_segment.mutation.graphql';
 import { deleteSegmentFromCache } from '../utils/cache_updates';

ee/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_segment_modal.vue

 <script>
 import { GlFormGroup, GlFormInput, GlFormRadioGroup, GlModal, GlAlert, GlIcon } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { convertToGraphQLId, TYPE_GROUP } from '~/graphql_shared/utils';
-import * as Sentry from '~/sentry/wrapper';
 import { DEVOPS_ADOPTION_STRINGS, DEVOPS_ADOPTION_SEGMENT_MODAL_ID } from '../constants';
 import createDevopsAdoptionSegmentMutation from '../graphql/mutations/create_devops_adoption_segment.mutation.graphql';
 import { addSegmentToCache } from '../utils/cache_updates';

ee/app/assets/javascripts/boards/components/sidebar/board_sidebar_iteration_select.vue

@@ -9,6 +9,7 @@ import {
   GlLoadingIcon,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { mapGetters } from 'vuex';
 import {
   iterationSelectTextMap,
@@ -22,7 +23,6 @@ import currentIterationQuery from 'ee/sidebar/queries/issue_iteration.query.grap
 import setIssueIterationMutation from 'ee/sidebar/queries/set_iteration_on_issue.mutation.graphql';
 import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
 import createFlash from '~/flash';
-import * as Sentry from '~/sentry/wrapper';
 
 const debounceValue = 250;
 

ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/create_form.vue

 <script>
+import * as Sentry from '@sentry/browser';
 import { visitUrl } from '~/lib/utils/url_utility';
-import * as Sentry from '~/sentry/wrapper';
 import { SAVE_ERROR } from '../constants';
 import createComplianceFrameworkMutation from '../graphql/queries/create_compliance_framework.mutation.graphql';
 import { initialiseFormData } from '../utils';

ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/edit_form.vue

 <script>
+import * as Sentry from '@sentry/browser';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { visitUrl } from '~/lib/utils/url_utility';
-import * as Sentry from '~/sentry/wrapper';
 
 import { FETCH_ERROR, SAVE_ERROR } from '../constants';
 import getComplianceFrameworkQuery from '../graphql/queries/get_compliance_framework.query.graphql';

ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/list.vue

 <script>
 import { GlAlert, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { s__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 
 import getComplianceFrameworkQuery from '../graphql/queries/get_compliance_framework.query.graphql';
 import EmptyState from './list_empty_state.vue';

ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans_form.vue

@@ -12,6 +12,7 @@ import {
   GlSprintf,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import {
   SCAN_TYPE_LABEL,
   SCAN_TYPE,
@@ -22,7 +23,6 @@ import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { serializeFormObject } from '~/lib/utils/forms';
 import { redirectTo, queryToObject } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import validation from '~/vue_shared/directives/validation';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';

ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue

@@ -7,6 +7,7 @@ import {
   GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { capitalize } from 'lodash';
 import { fetchPolicies } from '~/lib/graphql';
 import {
@@ -17,7 +18,6 @@ import {
   nDaysAfter,
 } from '~/lib/utils/datetime_utility';
 import { s__, __ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import { addRotationModalId, editRotationModalId, PRESET_TYPES } from '../constants';
 import getShiftsForRotations from '../graphql/queries/get_oncall_schedules_with_rotations_shifts.query.graphql';
 import EditScheduleModal from './add_edit_schedule_modal.vue';

ee/app/assets/javascripts/oncall_schedules/components/oncall_schedules_wrapper.vue

 <script>
 import { GlAlert, GlButton, GlEmptyState, GlLoadingIcon, GlModalDirective } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { s__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import getOncallSchedulesWithRotationsQuery from '../graphql/queries/get_oncall_schedules.query.graphql';
 import AddScheduleModal from './add_edit_schedule_modal.vue';
 import OncallSchedule from './oncall_schedule.vue';

ee/app/assets/javascripts/projects/pipelines/charts/components/deployment_frequency_charts.vue

 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import Api from 'ee/api';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
-import * as Sentry from '~/sentry/wrapper';
 import { LAST_WEEK, LAST_MONTH, LAST_90_DAYS } from './constants';
 import {
   allChartDefinitions,

ee/app/assets/javascripts/security_configuration/api_fuzzing/components/configuration_form.vue

@@ -10,9 +10,9 @@ import {
   GlLink,
   GlSprintf,
 } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { isEmptyValue } from '~/lib/utils/forms';
 import { __, s__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import DropdownInput from '../../components/dropdown_input.vue';
 import DynamicFields from '../../components/dynamic_fields.vue';
 import FormInput from '../../components/form_input.vue';

ee/app/assets/javascripts/security_configuration/components/auto_fix_settings.vue

 <script>
 import { GlIcon, GlLink, GlCard, GlFormCheckbox, GlSprintf } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {

ee/app/assets/javascripts/security_configuration/components/create_merge_request_button.vue

 <script>
 import { GlButton } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 
 export default {
   components: {

ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles.vue

 <script>
 import { GlDropdown, GlDropdownItem, GlTab, GlTabs } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { camelCase, kebabCase } from 'lodash';
 import { getLocationHash } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import * as cacheUtils from '../graphql/cache_utils';
 import { getProfileSettings } from '../settings/profiles';

ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_saved_scans_list.vue

 <script>
 import { GlButton } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { ERROR_RUN_SCAN, ERROR_MESSAGES } from 'ee/on_demand_scans/settings';
 import { redirectTo } from '~/lib/utils/url_utility';
-import * as Sentry from '~/sentry/wrapper';
 import dastProfileRunMutation from '../graphql/dast_profile_run.mutation.graphql';
 import ProfilesList from './dast_profiles_list.vue';
 import ScanTypeBadge from './dast_scan_type_badge.vue';

ee/app/assets/javascripts/security_configuration/dast_scanner_profiles/components/dast_scanner_profile_form.vue

@@ -11,12 +11,12 @@ import {
   GlFormCheckbox,
   GlFormRadioGroup,
 } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { isEqual } from 'lodash';
 import { returnToPreviousPageFactory } from 'ee/security_configuration/dast_profiles/redirect';
 import { initFormField } from 'ee/security_configuration/utils';
 import { serializeFormObject, isEmptyValue } from '~/lib/utils/forms';
 import { __, s__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import { SCAN_TYPE, SCAN_TYPE_OPTIONS } from '../constants';
 import dastScannerProfileCreateMutation from '../graphql/dast_scanner_profile_create.mutation.graphql';
 import dastScannerProfileUpdateMutation from '../graphql/dast_scanner_profile_update.mutation.graphql';

ee/app/assets/javascripts/security_configuration/dast_site_profiles_form/components/dast_site_profile_form.vue

@@ -8,12 +8,12 @@ import {
   GlModal,
   GlFormTextarea,
 } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { isEqual } from 'lodash';
 import { returnToPreviousPageFactory } from 'ee/security_configuration/dast_profiles/redirect';
 import { initFormField } from 'ee/security_configuration/utils';
 import { serializeFormObject } from '~/lib/utils/forms';
 import { __, s__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import validation from '~/vue_shared/directives/validation';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import dastSiteProfileCreateMutation from '../graphql/dast_site_profile_create.mutation.graphql';

ee/app/assets/javascripts/security_configuration/dast_site_validation/components/dast_site_validation_modal.vue

@@ -11,10 +11,10 @@ import {
   GlSkeletonLoader,
   GlTruncate,
 } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import download from '~/lib/utils/downloader';
 import { cleanLeadingSeparator, joinPaths, stripPathTail } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import {
   DAST_SITE_VALIDATION_MODAL_ID,

ee/app/assets/javascripts/security_configuration/dast_site_validation/components/dast_site_validation_revoke_modal.vue

 <script>
 import { GlModal, GlSprintf, GlAlert, GlLink, GlIcon } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { __, s__ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import { DAST_SITE_VALIDATION_REVOKE_MODAL_ID } from '../constants';
 import dastSiteValidationRevokeMutation from '../graphql/dast_site_validation_revoke.mutation.graphql';
 

ee/app/assets/javascripts/security_configuration/modules/configuration/actions.js

+import * as Sentry from '@sentry/browser';
 import axios from '~/lib/utils/axios_utils';
-import * as Sentry from '~/sentry/wrapper';
 import * as types from './mutation_types';
 
 export const fetchSecurityConfiguration = ({ commit, state }) => {

ee/app/assets/javascripts/security_configuration/sast/components/configuration_form.vue

 <script>
 import { GlAlert, GlButton, GlIcon, GlLink } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { cloneDeep } from 'lodash';
 import DynamicFields from 'ee/security_configuration/components/dynamic_fields.vue';
 import ExpandableSection from 'ee/security_configuration/components/expandable_section.vue';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 import configureSastMutation from '~/security_configuration/graphql/configure_sast.mutation.graphql';
-import * as Sentry from '~/sentry/wrapper';
 import AnalyzerConfiguration from './analyzer_configuration.vue';
 import {
   toSastCiConfigurationEntityInput,

ee/app/assets/javascripts/security_dashboard/store/modules/pipeline_jobs/actions.js

+import * as Sentry from '@sentry/browser';
 import Api from '~/api';
 import axios from '~/lib/utils/axios_utils';
-import * as Sentry from '~/sentry/wrapper';
 import * as types from './mutation_types';
 
 export const setPipelineJobsPath = ({ commit }, path) => commit(types.SET_PIPELINE_JOBS_PATH, path);

ee/app/assets/javascripts/sidebar/components/iteration_select.vue

@@ -11,9 +11,9 @@ import {
   GlIcon,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
-import * as Sentry from '~/sentry/wrapper';
 import { iterationSelectTextMap, iterationDisplayState, noIteration } from '../constants';
 import groupIterationsQuery from '../queries/group_iterations.query.graphql';
 import currentIterationQuery from '../queries/issue_iteration.query.graphql';

ee/spec/frontend/admin/dev_ops_report/components/devops_adoption_app_spec.js

 import { GlAlert, GlButton, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { getByText } from '@testing-library/dom';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
@@ -17,7 +18,6 @@ import getGroupsQuery from 'ee/admin/dev_ops_report/graphql/queries/get_groups.q
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import waitForPromises from 'helpers/wait_for_promises';
-import * as Sentry from '~/sentry/wrapper';
 import {
   groupNodes,
   nextGroupNode,

ee/spec/frontend/admin/dev_ops_report/components/devops_adoption_delete_modal_spec.js

 import { GlModal, GlSprintf, GlAlert } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { shallowMount } from '@vue/test-utils';
 import { ApolloMutation } from 'vue-apollo';
 import DevopsAdoptionDeleteModal from 'ee/admin/dev_ops_report/components/devops_adoption_delete_modal.vue';
 import { DEVOPS_ADOPTION_SEGMENT_DELETE_MODAL_ID } from 'ee/admin/dev_ops_report/constants';
 import waitForPromises from 'helpers/wait_for_promises';
-import * as Sentry from '~/sentry/wrapper';
 import {
   genericDeleteErrorMessage,
   dataErrorMessage,

ee/spec/frontend/admin/dev_ops_report/components/devops_adoption_segment_modal_spec.js

 import { GlModal, GlFormInput, GlSprintf, GlAlert, GlIcon } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { ApolloMutation } from 'vue-apollo';
 import DevopsAdoptionSegmentModal from 'ee/admin/dev_ops_report/components/devops_adoption_segment_modal.vue';
 import { DEVOPS_ADOPTION_SEGMENT_MODAL_ID } from 'ee/admin/dev_ops_report/constants';
 import waitForPromises from 'helpers/wait_for_promises';
-import * as Sentry from '~/sentry/wrapper';
 import {
   groupNodes,
   groupIds,
@@ -271,7 +271,7 @@ describe('DevopsAdoptionSegmentModal', () => {
         );
 
         it('calls sentry on top level error', async () => {
-          jest.spyOn(Sentry, 'captureException');
+          const captureException = jest.spyOn(Sentry, 'captureException');
 
           createComponent({ mutationMock: mutateWithErrors });
 
@@ -281,7 +281,7 @@ describe('DevopsAdoptionSegmentModal', () => {
 
           await waitForPromises();
 
-          expect(Sentry.captureException.mock.calls[0][0]).toBe(genericErrorMessage);
+          expect(captureException).toHaveBeenCalledWith(genericErrorMessage);
         });
       });
     });

ee/spec/frontend/boards/components/sidebar/board_sidebar_iteration_select_spec.js

 import { GlDropdown, GlDropdownItem, GlDropdownText, GlLink, GlSearchBoxByType } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
@@ -15,7 +16,6 @@ import waitForPromises from 'helpers/wait_for_promises';
 import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
 import getters from '~/boards/stores/getters';
 import createFlash from '~/flash';
-import * as Sentry from '~/sentry/wrapper';
 
 import {
   mockIssue2 as mockIssue,

ee/spec/frontend/groups/settings/compliance_frameworks/components/create_form_spec.js

+import * as Sentry from '@sentry/browser';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 
@@ -10,7 +11,6 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { visitUrl } from '~/lib/utils/url_utility';
 
-import * as Sentry from '~/sentry/wrapper';
 import { validCreateResponse, errorCreateResponse } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -95,7 +95,7 @@ describe('CreateForm', () => {
     };
 
     it('passes the error to the form status when saving causes an exception and does not redirect', async () => {
-      jest.spyOn(Sentry, 'captureException');
+      const captureExceptionSpy = jest.spyOn(Sentry, 'captureException');
       wrapper = createComponent([[createComplianceFrameworkMutation, createWithNetworkErrors]]);
 
       await submitForm(name, description, pipelineConfigurationFullPath, color);
@@ -104,11 +104,11 @@ describe('CreateForm', () => {
       expect(findFormStatus().props('loading')).toBe(false);
       expect(visitUrl).not.toHaveBeenCalled();
       expect(findFormStatus().props('error')).toBe(SAVE_ERROR);
-      expect(Sentry.captureException.mock.calls[0][0].networkError).toStrictEqual(sentryError);
+      expect(captureExceptionSpy.mock.calls[0][0].networkError).toStrictEqual(sentryError);
     });
 
     it('passes the errors to the form status when saving fails and does not redirect', async () => {
-      jest.spyOn(Sentry, 'captureException');
+      const captureExceptionSpy = jest.spyOn(Sentry, 'captureException');
       wrapper = createComponent([[createComplianceFrameworkMutation, createWithErrors]]);
 
       await submitForm(name, description, pipelineConfigurationFullPath, color);
@@ -117,7 +117,7 @@ describe('CreateForm', () => {
       expect(findFormStatus().props('loading')).toBe(false);
       expect(visitUrl).not.toHaveBeenCalled();
       expect(findFormStatus().props('error')).toBe('Invalid values given');
-      expect(Sentry.captureException.mock.calls[0][0]).toStrictEqual(sentrySaveError);
+      expect(captureExceptionSpy).toHaveBeenCalledWith(sentrySaveError);
     });
 
     it('saves inputted values and redirects', async () => {

ee/spec/frontend/groups/settings/compliance_frameworks/components/edit_form_spec.js

+import * as Sentry from '@sentry/browser';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 
@@ -11,7 +12,6 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { visitUrl } from '~/lib/utils/url_utility';
 
-import * as Sentry from '~/sentry/wrapper';
 import {
   validFetchOneResponse,
   emptyFetchResponse,

ee/spec/frontend/groups/settings/compliance_frameworks/components/list_spec.js

 import { GlAlert, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 
@@ -10,7 +11,6 @@ import getComplianceFrameworkQuery from 'ee/groups/settings/compliance_framework
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
-import * as Sentry from '~/sentry/wrapper';
 import { validFetchResponse, emptyFetchResponse } from '../mock_data';
 
 const localVue = createLocalVue();

ee/spec/frontend/projects/pipelines/charts/components/deployment_frequency_charts_spec.js

 import { GlSprintf, GlLink } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { useFakeDate } from 'helpers/fake_date';
@@ -6,10 +7,8 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
 import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
-import * as Sentry from '~/sentry/wrapper';
 
 jest.mock('~/flash');
-jest.mock('~/sentry/wrapper');
 
 const lastWeekData = getJSONFixture(
   'api/project_analytics/daily_deployment_frequencies_for_last_week.json',
@@ -123,14 +122,21 @@ describe('ee_component/projects/pipelines/charts/components/deployment_frequency
   });
 
   describe('when there are network errors', () => {
+    let captureExceptionSpy;
     beforeEach(async () => {
       mock = new MockAdapter(axios);
 
       createComponent();
 
+      captureExceptionSpy = jest.spyOn(Sentry, 'captureException');
+
       await axios.waitForAll();
     });
 
+    afterEach(() => {
+      captureExceptionSpy.mockRestore();
+    });
+
     it('shows a flash message', () => {
       expect(createFlash).toHaveBeenCalledTimes(1);
       expect(createFlash).toHaveBeenCalledWith({
@@ -139,7 +145,7 @@ describe('ee_component/projects/pipelines/charts/components/deployment_frequency
     });
 
     it('reports an error to Sentry', () => {
-      expect(Sentry.captureException).toHaveBeenCalledTimes(1);
+      expect(captureExceptionSpy).toHaveBeenCalledTimes(1);
 
       const expectedErrorMessage = [
         'Something went wrong while getting deployment frequency data:',
@@ -148,7 +154,7 @@ describe('ee_component/projects/pipelines/charts/components/deployment_frequency
         'Error: Request failed with status code 404',
       ].join('\n');
 
-      expect(Sentry.captureException).toHaveBeenCalledWith(new Error(expectedErrorMessage));
+      expect(captureExceptionSpy).toHaveBeenCalledWith(new Error(expectedErrorMessage));
     });
   });
 });

ee/spec/frontend/security_configuration/components/create_merge_request_button_spec.js

 import { GlButton } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import CreateMergeRequestButton from 'ee/security_configuration/components/create_merge_request_button.vue';
@@ -6,7 +7,6 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
-import * as Sentry from '~/sentry/wrapper';
 
 jest.mock('~/flash.js');
 jest.mock('~/lib/utils/url_utility', () => ({

ee/spec/frontend/security_configuration/sast/components/configuration_form_spec.js

 import { GlAlert, GlLink } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { shallowMount } from '@vue/test-utils';
 import { merge } from 'lodash';
 import DynamicFields from 'ee/security_configuration/components/dynamic_fields.vue';
@@ -7,7 +8,6 @@ import AnalyzerConfiguration from 'ee/security_configuration/sast/components/ana
 import ConfigurationForm from 'ee/security_configuration/sast/components/configuration_form.vue';
 import { redirectTo } from '~/lib/utils/url_utility';
 import configureSastMutation from '~/security_configuration/graphql/configure_sast.mutation.graphql';
-import * as Sentry from '~/sentry/wrapper';
 import { makeEntities, makeSastCiConfiguration } from '../../helpers';
 
 jest.mock('~/lib/utils/url_utility', () => ({

ee/spec/frontend/sidebar/components/iteration_select_spec.js

 import { GlDropdown, GlDropdownItem, GlDropdownText, GlLink, GlSearchBoxByType } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 
@@ -11,7 +12,6 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
-import * as Sentry from '~/sentry/wrapper';
 
 import {
   mockIssue,

package.json

@@ -58,6 +58,7 @@
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-4",
     "@rails/ujs": "^6.0.3-4",
+    "@sentry/browser": "^5.22.3",
     "@sourcegraph/code-host-integration": "0.0.52",
     "@toast-ui/editor": "^2.5.1",
     "@toast-ui/vue-editor": "^2.5.1",

spec/features/sentry_js_spec.rb

@@ -12,7 +12,7 @@ RSpec.describe 'Sentry' do
     expect(has_requested_sentry).to eq(false)
   end
 
-  xit 'loads sentry if sentry is enabled' do
+  it 'loads sentry if sentry is enabled' do
     stub_sentry_settings
 
     visit new_user_session_path

spec/frontend/clusters_list/components/clusters_spec.js

@@ -4,12 +4,12 @@ import {
   GlDeprecatedSkeletonLoading as GlSkeletonLoading,
   GlTable,
 } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import Clusters from '~/clusters_list/components/clusters.vue';
 import ClusterStore from '~/clusters_list/store';
 import axios from '~/lib/utils/axios_utils';
-import * as Sentry from '~/sentry/wrapper';
 import { apiData } from '../mock_data';
 
 describe('Clusters', () => {

spec/frontend/clusters_list/store/actions_spec.js

+import * as Sentry from '@sentry/browser';
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -7,7 +8,6 @@ import * as types from '~/clusters_list/store/mutation_types';
 import { deprecatedCreateFlash as flashError } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import Poll from '~/lib/utils/poll';
-import * as Sentry from '~/sentry/wrapper';
 import { apiData } from '../mock_data';
 
 jest.mock('~/flash.js');

spec/frontend/sentry/sentry_config_spec.js

+import * as Sentry from '@sentry/browser';
 import SentryConfig from '~/sentry/sentry_config';
-import * as Sentry from '~/sentry/wrapper';
 
 describe('SentryConfig', () => {
   describe('IGNORE_ERRORS', () => {

yarn.lock

@@ -1186,6 +1186,58 @@
   resolved "https://registry.yarnpkg.com/@rails/ujs/-/ujs-6.1.0.tgz#9a48df6511cb2b472c9f596c1f37dc0af022e751"
   integrity sha512-kQNKyM4ePAc4u9eR1c4OqrbAHH+3SJXt++8izIjeaZeg+P7yBtgoF/dogMD/JPPowNC74ACFpM/4op0Ggp/fPw==
 
+"@sentry/browser@^5.22.3":
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.30.0.tgz#c28f49d551db3172080caef9f18791a7fd39e3b3"
+  integrity sha512-rOb58ZNVJWh1VuMuBG1mL9r54nZqKeaIlwSlvzJfc89vyfd7n6tQ1UXMN383QBz/MS5H5z44Hy5eE+7pCrYAfw==
+  dependencies:
+    "@sentry/core" "5.30.0"
+    "@sentry/types" "5.30.0"
+    "@sentry/utils" "5.30.0"
+    tslib "^1.9.3"
+
+"@sentry/core@5.30.0":
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.30.0.tgz#6b203664f69e75106ee8b5a2fe1d717379b331f3"
+  integrity sha512-TmfrII8w1PQZSZgPpUESqjB+jC6MvZJZdLtE/0hZ+SrnKhW3x5WlYLvTXZpcWePYBku7rl2wn1RZu6uT0qCTeg==
+  dependencies:
+    "@sentry/hub" "5.30.0"
+    "@sentry/minimal" "5.30.0"
+    "@sentry/types" "5.30.0"
+    "@sentry/utils" "5.30.0"
+    tslib "^1.9.3"
+
+"@sentry/hub@5.30.0":
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.30.0.tgz#2453be9b9cb903404366e198bd30c7ca74cdc100"
+  integrity sha512-2tYrGnzb1gKz2EkMDQcfLrDTvmGcQPuWxLnJKXJvYTQDGLlEvi2tWz1VIHjunmOvJrB5aIQLhm+dcMRwFZDCqQ==
+  dependencies:
+    "@sentry/types" "5.30.0"
+    "@sentry/utils" "5.30.0"
+    tslib "^1.9.3"
+
+"@sentry/minimal@5.30.0":
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.30.0.tgz#ce3d3a6a273428e0084adcb800bc12e72d34637b"
+  integrity sha512-BwWb/owZKtkDX+Sc4zCSTNcvZUq7YcH3uAVlmh/gtR9rmUvbzAA3ewLuB3myi4wWRAMEtny6+J/FN/x+2wn9Xw==
+  dependencies:
+    "@sentry/hub" "5.30.0"
+    "@sentry/types" "5.30.0"
+    tslib "^1.9.3"
+
+"@sentry/types@5.30.0":
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.30.0.tgz#19709bbe12a1a0115bc790b8942917da5636f402"
+  integrity sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw==
+
+"@sentry/utils@5.30.0":
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.30.0.tgz#9a5bd7ccff85ccfe7856d493bffa64cabc41e980"
+  integrity sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==
+  dependencies:
+    "@sentry/types" "5.30.0"
+    tslib "^1.9.3"
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"