Update error handing in links components

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

@@ -2,7 +2,7 @@
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import { __ } from '~/locale';
-import { DEFAULT, LOAD_FAILURE } from '../../constants';
+import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants';
 import PipelineGraph from './graph_component.vue';
 import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils';
 
@@ -29,6 +29,7 @@ export default {
     };
   },
   errorTexts: {
+    [DRAW_FAILURE]: __('An error ocurred while drawing job relationship links.'),
     [LOAD_FAILURE]: __('We are currently unable to fetch data for this pipeline.'),
     [DEFAULT]: __('An unknown error occurred while loading this graph.'),
   },
@@ -53,6 +54,11 @@ export default {
   computed: {
     alert() {
       switch (this.alertType) {
+        case DRAW_FAILURE:
+          return {
+            text: this.$options.errorTexts[DRAW_FAILURE],
+            variant: 'danger',
+          };
         case LOAD_FAILURE:
           return {
             text: this.$options.errorTexts[LOAD_FAILURE],
@@ -88,8 +94,8 @@ export default {
     },
     reportFailure(type) {
       this.showAlert = true;
-      this.failureType = type;
-      reportToSentry(this.$options.name, this.failureType);
+      this.alertType = type;
+      reportToSentry(this.$options.name, this.alertType);
     },
   },
 };

app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue

@@ -2,6 +2,7 @@
 import { isEmpty } from 'lodash';
 import { DRAW_FAILURE } from '../../constants';
 import { createJobsHash, generateJobNeedsDict } from '../../utils';
+import { reportToSentry } from '../graph/utils';
 import { parseData } from '../parsing_utils';
 import { generateLinksData } from './drawing_utils';
 
@@ -87,6 +88,9 @@ export default {
       this.$emit('highlightedJobsChange', jobs);
     },
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
+  },
   mounted() {
     if (!isEmpty(this.pipelineData)) {
       this.prepareLinkData();
@@ -101,8 +105,9 @@ export default {
         const arrayOfJobs = this.pipelineData.flatMap(({ groups }) => groups);
         const parsedData = parseData(arrayOfJobs);
         this.links = generateLinksData(parsedData, this.containerId, `-${this.pipelineId}`);
-      } catch {
+      } catch (err) {
         this.$emit('error', DRAW_FAILURE);
+        reportToSentry(this.$options.name, err);
       }
     },
     getLinkClasses(link) {

app/assets/javascripts/pipelines/components/graph_shared/links_layer.vue

 <script>
 import { GlAlert } from '@gitlab/ui';
 import { __ } from '~/locale';
+import { reportToSentry } from '../graph/utils';
 import LinksInner from './links_inner.vue';
 
 export default {
@@ -50,6 +51,9 @@ export default {
       );
     },
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
+  },
   methods: {
     dismissAlert() {
       this.alertDismissed = true;

locale/gitlab.pot

@@ -3517,6 +3517,9 @@ msgstr ""
 msgid "An error occurred. Please try again."
 msgstr ""
 
+msgid "An error ocurred while drawing job relationship links."
+msgstr ""
+
 msgid "An error ocurred while loading your content. Please try again."
 msgstr ""