Merge branch '429670-adds-explicit-error-logging' into 'master'

Adds explicit error logging for pipelines Usage Quotas

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/137178



Merged-by: Miguel Rincon <mrincon@gitlab.com>
Approved-by: Miguel Rincon <mrincon@gitlab.com>
Reviewed-by: Kos Palchyk <kpalchyk@gitlab.com>
Co-authored-by: Kos Palchyk <kpalchyk@gitlab.com>

ee/app/assets/javascripts/usage_quotas/pipelines/components/app.stories.js

@@ -96,9 +96,10 @@ export const Loading = {
 
 export const LoadingError = {
   render: (...args) => {
+    const handlerWithAnError = () => Promise.reject(new Error('500 Internal Server Error'));
     const apolloProvider = createMockApollo([
-      [getGroupCiMinutesUsage, () => Promise.reject()],
-      [getGroupProjectsCiMinutesUsage, () => Promise.reject()],
+      [getGroupCiMinutesUsage, handlerWithAnError],
+      [getGroupProjectsCiMinutesUsage, handlerWithAnError],
     ]);
 
     return createTemplate({

ee/app/assets/javascripts/usage_quotas/pipelines/components/app.vue

@@ -16,6 +16,7 @@ import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { captureException } from '~/ci/runner/sentry_utils';
 import { pushEECproductAddToCartEvent } from 'ee/google_tag_manager';
 import { LIMITED_ACCESS_KEYS } from 'ee/usage_quotas/components/constants';
+import { logError } from '~/lib/logger';
 import getCiMinutesUsageNamespace from '../graphql/queries/ci_minutes.query.graphql';
 import getCiMinutesUsageNamespaceProjects from '../graphql/queries/ci_minutes_projects.query.graphql';
 import {
@@ -108,6 +109,7 @@ export default {
       error(error) {
         this.error = ERROR_MESSAGE;
         captureException({ error, component: this.$options.name });
+        logError('PipelineUsageApp: error fetching ciMinutesUsage query.', error);
       },
     },
     projectsCiMinutesUsage: {
@@ -129,6 +131,7 @@ export default {
       error(error) {
         this.error = ERROR_MESSAGE;
         captureException({ error, component: this.$options.name });
+        logError('PipelineUsageApp: error fetching projectsCiMinutesUsage query.', error);
       },
     },
     subscriptionPermissions: {

ee/spec/frontend/usage_quotas/pipelines/components/app_spec.js

@@ -30,6 +30,7 @@ import { TYPENAME_GROUP } from '~/graphql_shared/constants';
 import LimitedAccessModal from 'ee/usage_quotas/components/limited_access_modal.vue';
 import { getSubscriptionPermissionsData } from 'ee/fulfillment/shared_queries/subscription_actions_reason.customer.query.graphql';
 import { captureException } from '~/ci/runner/sentry_utils';
+import { logError } from '~/lib/logger';
 import {
   defaultProvide,
   mockGetCiMinutesUsageNamespace,
@@ -41,9 +42,10 @@ import {
 Vue.use(VueApollo);
 jest.mock('ee/google_tag_manager');
 jest.mock('~/ci/runner/sentry_utils');
+jest.mock('~/lib/logger');
 
 describe('PipelineUsageApp', () => {
-  /** @type { Wrapper } */
+  /** @type {import('helpers/vue_test_utils_helper').ExtendedWrapper} */
   let wrapper;
 
   const findAlert = () => wrapper.findComponent(GlAlert);
@@ -272,8 +274,8 @@ describe('PipelineUsageApp', () => {
 
   describe('with apollo loading', () => {
     beforeEach(() => {
-      ciMinutesHandler.mockResolvedValue(null);
-      ciMinutesProjectsHandler.mockResolvedValue(null);
+      ciMinutesHandler.mockReturnValue(new Promise(() => {}));
+      ciMinutesProjectsHandler.mockReturnValue(new Promise(() => {}));
       createComponent();
     });
 
@@ -293,17 +295,23 @@ describe('PipelineUsageApp', () => {
   describe('with apollo fetching error', () => {
     beforeEach(() => {
       ciMinutesHandler.mockRejectedValue(gqlRejectResponse);
+      ciMinutesProjectsHandler.mockRejectedValue(gqlRejectResponse);
       createComponent();
       return waitForPromises();
     });
 
+    it('logs the error message', () => {
+      expect(logError).toHaveBeenCalledTimes(2);
+      expect(logError).toHaveBeenCalledWith(expect.any(String), gqlRejectResponse);
+    });
+
     it('renders failed request error message', () => {
       expect(findAlert().text()).toBe(ERROR_MESSAGE);
     });
 
     it('captures the exception in Sentry', async () => {
       await Vue.nextTick();
-      expect(captureException).toHaveBeenCalledTimes(1);
+      expect(captureException).toHaveBeenCalledTimes(2);
     });
   });