Add Sentry to graph_component_wrapper

app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue

@@ -4,7 +4,7 @@ import { __ } from '~/locale';
 import { DEFAULT, LOAD_FAILURE } from '../../constants';
 import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query.graphql';
 import PipelineGraph from './graph_component.vue';
-import { unwrapPipelineData, toggleQueryPollingByVisibility } from './utils';
+import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils';
 
 export default {
   name: 'PipelineGraphWrapper',
@@ -86,6 +86,7 @@ export default {
     reportFailure(type) {
       this.showAlert = true;
       this.failureType = type;
+      reportToSentry(this.$options.name, this.failureType);
     },
   },
 };

app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue

@@ -3,7 +3,7 @@ import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query
 import LinkedPipeline from './linked_pipeline.vue';
 import { LOAD_FAILURE } from '../../constants';
 import { UPSTREAM } from './constants';
-import { unwrapPipelineData, toggleQueryPollingByVisibility } from './utils';
+import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils';
 
 export default {
   components: {
@@ -80,8 +80,13 @@ export default {
         result() {
           this.loadingPipelineId = null;
         },
-        error() {
+        error(err, _vm, _key, type) {
           this.$emit('error', LOAD_FAILURE);
+
+          reportToSentry(
+            'linked_pipelines_column',
+            `error type: ${LOAD_FAILURE}, error: ${err}, apollo error type: ${type}`,
+          );
         },
       });
 

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

 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) => {
@@ -55,3 +56,10 @@ const toggleQueryPollingByVisibility = (queryRef, interval = 10000) => {
 };
 
 export { unwrapPipelineData, toggleQueryPollingByVisibility };
+
+export const reportToSentry = (component, failureType) => {
+  Sentry.withScope((scope) => {
+    scope.setTag('component', component);
+    Sentry.captureException(failureType);
+  });
+};