Add gql error serializer

Add util and update two query calls

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

@@ -7,6 +7,7 @@ import PipelineGraph from './graph_component.vue';
 import {
   getQueryHeaders,
   reportToSentry,
+  serializeGqlErr,
   toggleQueryPollingByVisibility,
   unwrapPipelineData,
 } from './utils';
@@ -60,8 +61,8 @@ export default {
       update(data) {
         return unwrapPipelineData(this.pipelineProjectPath, data);
       },
-      error() {
-        this.reportFailure(LOAD_FAILURE);
+      error({ gqlError }) {
+        this.reportFailure(LOAD_FAILURE, serializeGqlErr(gqlError));
       },
     },
   },
@@ -112,10 +113,10 @@ export default {
     refreshPipelineGraph() {
       this.$apollo.queries.pipeline.refetch();
     },
-    reportFailure(type) {
+    reportFailure(type, err = '') {
       this.showAlert = true;
       this.alertType = type;
-      reportToSentry(this.$options.name, this.alertType);
+      reportToSentry(this.$options.name, `type: ${this.alertType}, info: ${err}`);
     },
   },
 };

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

@@ -6,6 +6,7 @@ import LinkedPipeline from './linked_pipeline.vue';
 import {
   getQueryHeaders,
   reportToSentry,
+  serializeGqlErr,
   toggleQueryPollingByVisibility,
   unwrapPipelineData,
   validateConfigPaths,
@@ -99,12 +100,14 @@ export default {
           this.loadingPipelineId = null;
           this.$emit('scrollContainer');
         },
-        error(err, _vm, _key, type) {
+        error({ gqlError }, _vm, _key, type) {
           this.$emit('error', LOAD_FAILURE);
 
           reportToSentry(
             'linked_pipelines_column',
-            `error type: ${LOAD_FAILURE}, error: ${err}, apollo error type: ${type}`,
+            `error type: ${LOAD_FAILURE}, error: ${serializeGqlErr(
+              gqlError,
+            )}, apollo error type: ${type}`,
           );
         },
       });

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

@@ -23,7 +23,6 @@ const getQueryHeaders = (etagResource) => {
     },
   };
 };
-/* eslint-enable @gitlab/require-i18n-strings */
 
 const reportToSentry = (component, failureType) => {
   Sentry.withScope((scope) => {
@@ -32,6 +31,25 @@ const reportToSentry = (component, failureType) => {
   });
 };
 
+const serializeGqlErr = (gqlError) => {
+  if (!gqlError) {
+    return 'gqlError data not available.';
+  }
+
+  const { locations, message, path } = gqlError;
+
+  return `
+    ${message}.
+    Locations: ${locations
+      .flatMap((loc) => Object.entries(loc))
+      .flat(2)
+      .join(' ')}.
+    Path: ${path.join(', ')}.
+  `;
+};
+
+/* eslint-enable @gitlab/require-i18n-strings */
+
 const toggleQueryPollingByVisibility = (queryRef, interval = 10000) => {
   const stopStartQuery = (query) => {
     if (!Visibility.hidden()) {
@@ -82,6 +100,7 @@ const validateConfigPaths = (value) => value.graphqlResourceEtag?.length > 0;
 export {
   getQueryHeaders,
   reportToSentry,
+  serializeGqlErr,
   toggleQueryPollingByVisibility,
   unwrapPipelineData,
   validateConfigPaths,