Add sentry triggers to the errorCaptured hook

This adds sentry triggers to the errorCaptured
lifecycle hook for the new graph app

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

@@ -4,6 +4,7 @@ import axios from '~/lib/utils/axios_utils';
 import { dasherize } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
+import { reportToSentry } from './utils';
 
 /**
  * Renders either a cancel, retry or play icon button and handles the post request
@@ -50,6 +51,9 @@ export default {
       return `${actionIconDash} js-icon-${actionIconDash}`;
     },
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry('action_component', `error: ${err}, info: ${info}`);
+  },
   methods: {
     /**
      * The request should not be handled here.

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

@@ -3,6 +3,7 @@ import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue';
 import LinkedPipelinesColumn from './linked_pipelines_column.vue';
 import StageColumnComponent from './stage_column_component.vue';
 import { DOWNSTREAM, MAIN, UPSTREAM } from './constants';
+import { reportToSentry } from './utils';
 
 export default {
   name: 'PipelineGraph',
@@ -68,6 +69,9 @@ export default {
       return this.hasUpstreamPipelines ? this.pipeline.upstream : [];
     },
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
+  },
   methods: {
     setJob(jobName) {
       this.hoveredJobName = jobName;

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

@@ -5,6 +5,7 @@ import StageColumnComponentLegacy from './stage_column_component_legacy.vue';
 import LinkedPipelinesColumnLegacy from './linked_pipelines_column_legacy.vue';
 import GraphBundleMixin from '../../mixins/graph_pipeline_bundle_mixin';
 import { UPSTREAM, DOWNSTREAM, MAIN } from './constants';
+import { reportToSentry } from './utils';
 
 export default {
   name: 'PipelineGraphLegacy',
@@ -94,6 +95,9 @@ export default {
       return this.pipeline.project.id;
     },
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
+  },
   methods: {
     capitalizeStageName(name) {
       const escapedName = escape(name);

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

@@ -76,6 +76,9 @@ export default {
   mounted() {
     toggleQueryPollingByVisibility(this.$apollo.queries.pipeline);
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
+  },
   methods: {
     hideAlert() {
       this.showAlert = false;

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

@@ -2,6 +2,7 @@
 import { GlTooltipDirective } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import JobItem from './job_item.vue';
+import { reportToSentry } from './utils';
 
 /**
  * Renders the dropdown for the pipeline graph.
@@ -29,6 +30,9 @@ export default {
       return `${name} - ${status.label}`;
     },
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry('job_group_dropdown', `error: ${err}, info: ${info}`);
+  },
   methods: {
     pipelineActionRequestComplete() {
       this.$emit('pipelineActionRequestComplete');

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

@@ -6,6 +6,7 @@ import { sprintf } from '~/locale';
 import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
 import { accessValue } from './accessors';
 import { REST } from './constants';
+import { reportToSentry } from './utils';
 
 /**
  * Renders the badge for the pipeline graph and the job's dropdown.
@@ -130,6 +131,9 @@ export default {
         : this.cssClassJobName;
     },
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry('job_item', `error: ${err}, info: ${info}`);
+  },
   methods: {
     hideTooltips() {
       this.$root.$emit('bv::hide::tooltip');

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

@@ -4,6 +4,7 @@ import CiStatus from '~/vue_shared/components/ci_icon.vue';
 import { __, sprintf } from '~/locale';
 import { accessValue } from './accessors';
 import { DOWNSTREAM, REST, UPSTREAM } from './constants';
+import { reportToSentry } from './utils';
 
 export default {
   directives: {
@@ -114,6 +115,9 @@ export default {
       return this.isUpstream ? 'gl-left-0 gl-border-r-1!' : 'gl-right-0 gl-border-l-1!';
     },
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry('linked_pipeline', `error: ${err}, info: ${info}`);
+  },
   methods: {
     onClickLinkedPipeline() {
       this.hideTooltips();

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

 <script>
 import LinkedPipeline from './linked_pipeline.vue';
 import { UPSTREAM } from './constants';
+import { reportToSentry } from './utils';
 
 export default {
   components: {
@@ -42,6 +43,9 @@ export default {
       return this.type === UPSTREAM;
     },
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry('linked_pipelines_column_legacy', `error: ${err}, info: ${info}`);
+  },
   methods: {
     onPipelineClick(downstreamNode, pipeline, index) {
       this.$emit('linkedPipelineClick', pipeline, index, downstreamNode);

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

@@ -6,6 +6,7 @@ import JobGroupDropdown from './job_group_dropdown.vue';
 import ActionComponent from './action_component.vue';
 import { GRAPHQL } from './constants';
 import { accessValue } from './accessors';
+import { reportToSentry } from './utils';
 
 export default {
   components: {
@@ -54,6 +55,9 @@ export default {
       return !isEmpty(this.action);
     },
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry('stage_column_component', `error: ${err}, info: ${info}`);
+  },
   methods: {
     getGroupId(group) {
       return accessValue(GRAPHQL, 'groupId', group);

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

@@ -4,6 +4,7 @@ import stageColumnMixin from '../../mixins/stage_column_mixin';
 import JobItem from './job_item.vue';
 import JobGroupDropdown from './job_group_dropdown.vue';
 import ActionComponent from './action_component.vue';
+import { reportToSentry } from './utils';
 
 export default {
   components: {
@@ -52,6 +53,9 @@ export default {
       return !isEmpty(this.action);
     },
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry('stage_column_component_legacy', `error: ${err}, info: ${info}`);
+  },
   methods: {
     groupId(group) {
       return `ci-badge-${escape(group.name)}`;

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -10,6 +10,7 @@ import legacyPipelineHeader from './components/legacy_header_component.vue';
 import eventHub from './event_hub';
 import TestReports from './components/test_reports/test_reports.vue';
 import createTestReportsStore from './stores/test_reports';
+import { reportToSentry } from './components/graph/utils';
 
 Vue.use(Translate);
 
@@ -36,6 +37,9 @@ const createLegacyPipelinesDetailApp = (mediator) => {
         mediator,
       };
     },
+    errorCaptured(err, _vm, info) {
+      reportToSentry('pipeline_details_bundle_legacy_details', `error: ${err}, info: ${info}`);
+    },
     render(createElement) {
       return createElement('pipeline-graph-legacy', {
         props: {
@@ -78,6 +82,9 @@ const createLegacyPipelineHeaderApp = (mediator) => {
       eventHub.$off('headerPostAction', this.postAction);
       eventHub.$off('headerDeleteAction', this.deleteAction);
     },
+    errorCaptured(err, _vm, info) {
+      reportToSentry('pipeline_details_bundle_legacy', `error: ${err}, info: ${info}`);
+    },
     methods: {
       postAction(path) {
         this.mediator.service

app/assets/javascripts/pipelines/pipeline_details_graph.js

@@ -3,6 +3,7 @@ import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import PipelineGraphWrapper from './components/graph/graph_component_wrapper.vue';
 import { GRAPHQL } from './components/graph/constants';
+import { reportToSentry } from './components/graph/utils';
 
 Vue.use(VueApollo);
 
@@ -28,6 +29,9 @@ const createPipelinesDetailApp = (selector, pipelineProjectPath, pipelineIid) =>
       pipelineIid,
       dataMethod: GRAPHQL,
     },
+    errorCaptured(err, _vm, info) {
+      reportToSentry('pipeline_details_graph', `error: ${err}, info: ${info}`);
+    },
     render(createElement) {
       return createElement(PipelineGraphWrapper);
     },