Indicate Sentry error level in GitLab

app/assets/javascripts/error_tracking/components/constants.js

+export const severityLevel = {
+  FATAL: 'fatal',
+  ERROR: 'error',
+  WARNING: 'warning',
+  INFO: 'info',
+  DEBUG: 'debug',
+};
+
+export const severityLevelVariant = {
+  [severityLevel.FATAL]: 'danger',
+  [severityLevel.ERROR]: 'dark',
+  [severityLevel.WARNING]: 'warning',
+  [severityLevel.INFO]: 'info',
+  [severityLevel.DEBUG]: 'light',
+};

app/assets/javascripts/error_tracking/components/error_details.vue

@@ -11,6 +11,7 @@ import Stacktrace from './stacktrace.vue';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { trackClickErrorLinkToSentryOptions } from '../utils';
+import { severityLevel, severityLevelVariant } from './constants';
 
 import query from '../queries/details.query.graphql';
 
@@ -147,6 +148,11 @@ export default {
     errorLevel() {
       return sprintf(__('level: %{level}'), { level: this.error.tags.level });
     },
+    errorSeverityVariant() {
+      return (
+        severityLevelVariant[this.error.tags.level] || severityLevelVariant[severityLevel.ERROR]
+      );
+    },
   },
   mounted() {
     this.startPollingDetails(this.issueDetailsPath);
@@ -228,8 +234,12 @@ export default {
           <h2 class="text-truncate">{{ GQLerror.title }}</h2>
         </tooltip-on-truncate>
         <template v-if="error.tags">
-          <gl-badge v-if="error.tags.level" variant="danger" class="rounded-pill mr-2"
-            >{{ errorLevel }}
+          <gl-badge
+            v-if="error.tags.level"
+            :variant="errorSeverityVariant"
+            class="rounded-pill mr-2"
+          >
+            {{ errorLevel }}
           </gl-badge>
           <gl-badge v-if="error.tags.logger" variant="light" class="rounded-pill"
             >{{ error.tags.logger }}

changelogs/unreleased/39075-error-level-color.yml

+---
+title: Indicate Sentry error severity in GitLab
+merge_request: 23346
+author:
+type: added

spec/frontend/error_tracking/components/error_details_spec.js

@@ -4,6 +4,7 @@ import { GlLoadingIcon, GlLink, GlBadge, GlFormInput } from '@gitlab/ui';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import Stacktrace from '~/error_tracking/components/stacktrace.vue';
 import ErrorDetails from '~/error_tracking/components/error_details.vue';
+import { severityLevel, severityLevelVariant } from '~/error_tracking/components/constants';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -144,6 +145,29 @@ describe('ErrorDetails', () => {
           expect(wrapper.findAll(GlBadge).length).toBe(1);
         });
       });
+
+      it.each(Object.keys(severityLevel))(
+        'should set correct severity level variant for %s badge',
+        level => {
+          store.state.details.error.tags = { level: severityLevel[level] };
+          mountComponent();
+          return wrapper.vm.$nextTick().then(() => {
+            expect(wrapper.find(GlBadge).attributes('variant')).toEqual(
+              severityLevelVariant[severityLevel[level]],
+            );
+          });
+        },
+      );
+
+      it('should fallback for ERROR severityLevelVariant when severityLevel is unknown', () => {
+        store.state.details.error.tags = { level: 'someNewErrorLevel' };
+        mountComponent();
+        return wrapper.vm.$nextTick().then(() => {
+          expect(wrapper.find(GlBadge).attributes('variant')).toEqual(
+            severityLevelVariant[severityLevel.ERROR],
+          );
+        });
+      });
     });
 
     describe('Stacktrace', () => {