Modify sentry for big pipeline graph

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

@@ -7,7 +7,7 @@ import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants';
 import DismissPipelineGraphCallout from '../../graphql/mutations/dismiss_pipeline_notification.graphql';
 import getUserCallouts from '../../graphql/queries/get_user_callouts.query.graphql';
-import { reportToSentry } from '../../utils';
+import { reportToSentry, reportMessageToSentry } from '../../utils';
 import { listByLayers } from '../parsing_utils';
 import { IID_FAILURE, LAYER_VIEW, STAGE_VIEW, VIEW_TYPE_KEY } from './constants';
 import PipelineGraph from './graph_component.vue';
@@ -109,14 +109,16 @@ export default {
       },
       error(err) {
         this.reportFailure({ type: LOAD_FAILURE, skipSentry: true });
-        reportToSentry(
+
+        reportMessageToSentry(
           this.$options.name,
-          `| type: ${LOAD_FAILURE} |  
-          | rawError: ${JSON.stringify(err)} | 
-          | info: ${serializeLoadErrors(err)} | 
-          | graphqlResourceEtag: ${this.graphqlResourceEtag} | 
-          | projectPath: ${this.projectPath} | 
-          | iid: ${this.pipelineIid} |`,
+          `| type: ${LOAD_FAILURE} , info: ${serializeLoadErrors(err)}`,
+          {
+            projectPath: this.projectPath,
+            pipelineIid: this.pipelineIid,
+            pipelineStages: this.pipeline?.stages?.length || 0,
+            nbOfDownstreams: this.pipeline?.downstream?.length || 0,
+          },
         );
       },
       result({ error }) {

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

+import { isEmpty } from 'lodash';
 import Visibility from 'visibilityjs';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { unwrapStagesWithNeedsAndLookup } from '../unwrapping_utils';
@@ -39,15 +40,15 @@ const serializeGqlErr = (gqlError) => {
 const serializeLoadErrors = (errors) => {
   const { gqlError, graphQLErrors, networkError, message } = errors;
 
-  if (graphQLErrors) {
+  if (!isEmpty(graphQLErrors)) {
     return graphQLErrors.map((err) => serializeGqlErr(err)).join('; ');
   }
 
-  if (gqlError) {
+  if (!isEmpty(gqlError)) {
     return serializeGqlErr(gqlError);
   }
 
-  if (networkError) {
+  if (!isEmpty(networkError)) {
     return `Network error: ${networkError.message}`;
   }
 

app/assets/javascripts/pipelines/utils.js

@@ -73,3 +73,12 @@ export const reportToSentry = (component, failureType) => {
     Sentry.captureException(failureType);
   });
 };
+
+export const reportMessageToSentry = (component, message, context) => {
+  Sentry.withScope((scope) => {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    scope.setContext('Vue data', context);
+    scope.setTag('component', component);
+    Sentry.captureMessage(message);
+  });
+};