Refine Sentry reporting

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

@@ -106,8 +106,8 @@ export default {
         height: this.$refs[this.containerId].scrollHeight,
       };
     },
-    onError(errorType) {
-      this.$emit('error', errorType);
+    onError(payload) {
+      this.$emit('error', payload);
     },
     setJob(jobName) {
       this.hoveredJobName = jobName;

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

@@ -73,7 +73,11 @@ export default {
         return unwrapPipelineData(this.pipelineProjectPath, data);
       },
       error(err) {
-        this.reportFailure(LOAD_FAILURE, serializeLoadErrors(err));
+        this.reportFailure({ type: LOAD_FAILURE, skipSentry: true });
+        reportToSentry(
+          this.$options.name,
+          `type: ${LOAD_FAILURE}, info: ${serializeLoadErrors(err)}`,
+        );
       },
       result({ error }) {
         /*
@@ -134,11 +138,15 @@ export default {
     refreshPipelineGraph() {
       this.$apollo.queries.pipeline.refetch();
     },
-    reportFailure(type, err = '') {
+    /* eslint-disable @gitlab/require-i18n-strings */
+    reportFailure({ type, err = 'No error string passed.', skipSentry = false }) {
       this.showAlert = true;
       this.alertType = type;
-      reportToSentry(this.$options.name, `type: ${this.alertType}, info: ${err}`);
+      if (!skipSentry) {
+        reportToSentry(this.$options.name, `type: ${type}, info: ${err}`);
+      }
     },
+    /* eslint-enable @gitlab/require-i18n-strings */
   },
 };
 </script>

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

@@ -111,14 +111,12 @@ export default {
           this.loadingPipelineId = null;
           this.$emit('scrollContainer');
         },
-        error(err, _vm, _key, type) {
-          this.$emit('error', LOAD_FAILURE);
+        error(err) {
+          this.$emit('error', { type: LOAD_FAILURE, skipSentry: true });
 
           reportToSentry(
             'linked_pipelines_column',
-            `error type: ${LOAD_FAILURE}, error: ${serializeLoadErrors(
-              err,
-            )}, apollo error type: ${type}`,
+            `error type: ${LOAD_FAILURE}, error: ${serializeLoadErrors(err)}`,
           );
         },
       });

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

@@ -170,7 +170,7 @@ export default {
         const parsedData = parseData(arrayOfJobs);
         this.links = generateLinksData(parsedData, this.containerId, `-${this.pipelineId}`);
       } catch (err) {
-        this.$emit('error', DRAW_FAILURE);
+        this.$emit('error', { type: DRAW_FAILURE, reportToSentry: false });
         reportToSentry(this.$options.name, err);
       }
       this.finishPerfMeasureAndSend();

spec/frontend/pipelines/graph/linked_pipelines_column_spec.js

@@ -116,7 +116,7 @@ describe('Linked Pipelines Column', () => {
 
         it('emits the error', async () => {
           await clickExpandButton();
-          expect(wrapper.emitted().error).toEqual([[LOAD_FAILURE]]);
+          expect(wrapper.emitted().error).toEqual([[{ type: LOAD_FAILURE, skipSentry: true }]]);
         });
 
         it('does not show the pipeline', async () => {
@@ -167,7 +167,7 @@ describe('Linked Pipelines Column', () => {
 
         it('emits the error', async () => {
           await clickExpandButton();
-          expect(wrapper.emitted().error).toEqual([[LOAD_FAILURE]]);
+          expect(wrapper.emitted().error).toEqual([[{ type: LOAD_FAILURE, skipSentry: true }]]);
         });
 
         it('does not show the pipeline', async () => {