Move Sentry to vue clusters_list store

Create central Sentry report method
for clusters_list/components/clusters.vue.
Update associated tests.

app/assets/javascripts/clusters_list/components/clusters.vue

 <script>
-import * as Sentry from '@sentry/browser';
 import { mapState, mapActions } from 'vuex';
 import {
   GlDeprecatedBadge as GlBadge,
@@ -88,7 +87,7 @@ export default {
     this.fetchClusters();
   },
   methods: {
-    ...mapActions(['fetchClusters', 'setPage']),
+    ...mapActions(['fetchClusters', 'reportSentryError', 'setPage']),
     k8sQuantityToGb(quantity) {
       if (!quantity) {
         return 0;
@@ -150,7 +149,7 @@ export default {
           };
         }
       } catch (error) {
-        Sentry.captureException(error);
+        this.reportSentryError({ error, tag: 'totalMemoryAndUsageError' });
       }
 
       return { totalMemory: null, freeSpacePercentage: null };
@@ -183,7 +182,7 @@ export default {
           };
         }
       } catch (error) {
-        Sentry.captureException(error);
+        this.reportSentryError({ error, tag: 'totalCpuAndUsageError' });
       }
 
       return { totalCpu: null, freeSpacePercentage: null };

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

@@ -16,7 +16,14 @@ const allNodesPresent = (clusters, retryCount) => {
   return retryCount > MAX_REQUESTS || clusters.every(cluster => cluster.nodes != null);
 };
 
-export const fetchClusters = ({ state, commit }) => {
+export const reportSentryError = (_store, { error, tag }) => {
+  Sentry.withScope(scope => {
+    scope.setTag('javascript_clusters_list', tag);
+    Sentry.captureException(error);
+  });
+};
+
+export const fetchClusters = ({ state, commit, dispatch }) => {
   let retryCount = 0;
 
   commit(types.SET_LOADING_NODES, true);
@@ -49,10 +56,7 @@ export const fetchClusters = ({ state, commit }) => {
         commit(types.SET_LOADING_CLUSTERS, false);
         commit(types.SET_LOADING_NODES, false);
 
-        Sentry.withScope(scope => {
-          scope.setTag('javascript_clusters_list', 'fetchClustersSuccessCallback');
-          Sentry.captureException(error);
-        });
+        dispatch('reportSentryError', { error, tag: 'fetchClustersSuccessCallback' });
       }
     },
     errorCallback: response => {
@@ -62,10 +66,7 @@ export const fetchClusters = ({ state, commit }) => {
       commit(types.SET_LOADING_NODES, false);
       flash(__('Clusters|An error occurred while loading clusters'));
 
-      Sentry.withScope(scope => {
-        scope.setTag('javascript_clusters_list', 'fetchClustersErrorCallback');
-        Sentry.captureException(response);
-      });
+      dispatch('reportSentryError', { error: response, tag: 'fetchClustersErrorCallback' });
     },
   });
 

spec/frontend/clusters_list/store/actions_spec.js

@@ -13,6 +13,28 @@ import * as Sentry from '@sentry/browser';
 jest.mock('~/flash.js');
 
 describe('Clusters store actions', () => {
+  let captureException;
+
+  describe('reportSentryError', () => {
+    beforeEach(() => {
+      captureException = jest.spyOn(Sentry, 'captureException');
+    });
+
+    afterEach(() => {
+      captureException.mockRestore();
+    });
+
+    it('should report sentry error', done => {
+      const sentryError = new Error('New Sentry Error');
+      const tag = 'sentryErrorTag';
+
+      testAction(actions.reportSentryError, { error: sentryError, tag }, {}, [], [], () => {
+        expect(captureException).toHaveBeenCalledWith(sentryError);
+        done();
+      });
+    });
+  });
+
   describe('fetchClusters', () => {
     let mock;
 
@@ -69,7 +91,15 @@ describe('Clusters store actions', () => {
           { type: types.SET_LOADING_CLUSTERS, payload: false },
           { type: types.SET_LOADING_NODES, payload: false },
         ],
-        [],
+        [
+          {
+            type: 'reportSentryError',
+            payload: {
+              error: new Error('Request failed with status code 400'),
+              tag: 'fetchClustersErrorCallback',
+            },
+          },
+        ],
         () => {
           expect(flashError).toHaveBeenCalledWith(expect.stringMatching('error'));
           done();
@@ -78,7 +108,6 @@ describe('Clusters store actions', () => {
     });
 
     describe('multiple api requests', () => {
-      let captureException;
       let pollRequest;
       let pollStop;
 
@@ -86,7 +115,6 @@ describe('Clusters store actions', () => {
       const pollHeaders = { 'poll-interval': pollInterval, ...headers };
 
       beforeEach(() => {
-        captureException = jest.spyOn(Sentry, 'captureException');
         pollRequest = jest.spyOn(Poll.prototype, 'makeRequest');
         pollStop = jest.spyOn(Poll.prototype, 'stop');
 
@@ -94,7 +122,6 @@ describe('Clusters store actions', () => {
       });
 
       afterEach(() => {
-        captureException.mockRestore();
         pollRequest.mockRestore();
         pollStop.mockRestore();
       });
@@ -164,11 +191,18 @@ describe('Clusters store actions', () => {
             { type: types.SET_LOADING_CLUSTERS, payload: false },
             { type: types.SET_LOADING_NODES, payload: false },
           ],
-          [],
+          [
+            {
+              type: 'reportSentryError',
+              payload: {
+                error: new Error('clusters.every is not a function'),
+                tag: 'fetchClustersSuccessCallback',
+              },
+            },
+          ],
           () => {
             expect(pollRequest).toHaveBeenCalledTimes(1);
             expect(pollStop).toHaveBeenCalledTimes(1);
-            expect(captureException).toHaveBeenCalledTimes(1);
             done();
           },
         );