Adjust util for all err types

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

@@ -7,7 +7,7 @@ import PipelineGraph from './graph_component.vue';
 import {
   getQueryHeaders,
   reportToSentry,
-  serializeGqlErr,
+  serializeLoadErrors,
   toggleQueryPollingByVisibility,
   unwrapPipelineData,
 } from './utils';
@@ -61,8 +61,8 @@ export default {
       update(data) {
         return unwrapPipelineData(this.pipelineProjectPath, data);
       },
-      error({ gqlError }) {
-        this.reportFailure(LOAD_FAILURE, serializeGqlErr(gqlError));
+      error(err) {
+        this.reportFailure(LOAD_FAILURE, serializeLoadErrors(err));
       },
     },
   },

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

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

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

@@ -32,10 +32,6 @@ const reportToSentry = (component, failureType) => {
 };
 
 const serializeGqlErr = (gqlError) => {
-  if (!gqlError) {
-    return 'gqlError data not available.';
-  }
-
   const { locations, message, path } = gqlError;
 
   return `
@@ -48,6 +44,24 @@ const serializeGqlErr = (gqlError) => {
   `;
 };
 
+const serializeLoadErrors = (errors) => {
+  const { gqlError, graphQLErrors, networkError, message } = errors;
+
+  if (graphQLErrors) {
+    return graphQLErrors.map((err) => serializeGqlErr(err)).join('; ');
+  }
+
+  if (gqlError) {
+    return serializeGqlErr(gqlError);
+  }
+
+  if (networkError) {
+    return `Network error: ${networkError.message}`;
+  }
+
+  return message;
+};
+
 /* eslint-enable @gitlab/require-i18n-strings */
 
 const toggleQueryPollingByVisibility = (queryRef, interval = 10000) => {
@@ -101,6 +115,7 @@ export {
   getQueryHeaders,
   reportToSentry,
   serializeGqlErr,
+  serializeLoadErrors,
   toggleQueryPollingByVisibility,
   unwrapPipelineData,
   validateConfigPaths,