Add set_vue_error_handler helper to unify Vue.js 2 and 3

* replace existing Vue.config.errorHandler

.eslintrc.yml

@@ -155,6 +155,8 @@ overrides:
           message: 'Migrate to GlSkeletonLoader, or import GlDeprecatedSkeletonLoading.'
         - selector: CallExpression[arguments.length=1][arguments.0.type='Literal'] CallExpression[callee.property.name='toBe'] CallExpression[callee.property.name='attributes'][arguments.length=1][arguments.0.value='disabled']
           message: Avoid asserting disabled attribute exact value, because Vue.js 2 and Vue.js 3 renders it differently. Use toBeDefined / toBeUndefined instead
+        - selector: MemberExpression[object.object.name='Vue'][object.property.name='config'][property.name='errorHandler']
+          message: 'Use setErrorHandler/resetVueErrorHandler from helpers/set_vue_error_handler.js instead.'
       no-unsanitized/method: off
       no-unsanitized/property: off
   - files:

spec/frontend/__helpers__/set_vue_error_handler.js

+import Vue from 'vue';
+
+const modifiedInstances = [];
+
+export function setVueErrorHandler({ instance, handler }) {
+  if (Vue.version.startsWith('2')) {
+    // only global handlers are supported
+    const { config } = Vue;
+    config.errorHandler = handler;
+    return;
+  }
+
+  // eslint-disable-next-line no-param-reassign
+  instance.$.appContext.config.errorHandler = handler;
+  modifiedInstances.push(instance);
+}
+
+export function resetVueErrorHandler() {
+  if (Vue.version.startsWith('2')) {
+    const { config } = Vue;
+    config.errorHandler = null;
+    return;
+  }
+
+  modifiedInstances.forEach((instance) => {
+    // eslint-disable-next-line no-param-reassign
+    instance.$.appContext.config.errorHandler = null;
+  });
+  modifiedInstances.length = 0;
+}

spec/frontend/pages/admin/jobs/components/cancel_jobs_modal_spec.js

-import Vue, { nextTick } from 'vue';
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { GlModal } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
 import CancelJobsModal from '~/pages/admin/jobs/components/cancel_jobs_modal.vue';
+import { setVueErrorHandler } from '../../../../__helpers__/set_vue_error_handler';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   ...jest.requireActual('~/lib/utils/url_utility'),
@@ -45,8 +46,6 @@ describe('Cancel jobs modal', () => {
     });
 
     it('displays error if canceling jobs failed', async () => {
-      Vue.config.errorHandler = () => {}; // silencing thrown error
-
       const dummyError = new Error('canceling jobs failed');
       // TODO: We can't use axios-mock-adapter because our current version
       // does not support responseURL
@@ -57,6 +56,7 @@ describe('Cancel jobs modal', () => {
         return Promise.reject(dummyError);
       });
 
+      setVueErrorHandler({ instance: wrapper.vm, handler: () => {} }); // silencing thrown error
       wrapper.findComponent(GlModal).vm.$emit('primary');
       await nextTick();
 

spec/frontend/profile/account/components/update_username_spec.js

 import { GlModal } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
-import Vue, { nextTick } from 'vue';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import { TEST_HOST } from 'helpers/test_constants';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -8,6 +8,7 @@ import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import UpdateUsername from '~/profile/account/components/update_username.vue';
+import { setVueErrorHandler, resetVueErrorHandler } from 'helpers/set_vue_error_handler';
 
 jest.mock('~/alert');
 
@@ -43,7 +44,7 @@ describe('UpdateUsername component', () => {
 
   afterEach(() => {
     axiosMock.restore();
-    Vue.config.errorHandler = null;
+    resetVueErrorHandler();
   });
 
   const findElements = () => {
@@ -60,7 +61,7 @@ describe('UpdateUsername component', () => {
   };
 
   const clickModalWithErrorResponse = () => {
-    Vue.config.errorHandler = jest.fn(); // silence thrown error
+    setVueErrorHandler({ instance: wrapper.vm, handler: jest.fn() }); // silence thrown error
     const { modal } = findElements();
     modal.vm.$emit('primary');
     return waitForPromises();