1 files changed, 29 insertions, 10 deletions
diff --git a/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue b/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue
index 62fd379aa4c..4e63e167260 100644
--- a/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue
+++ b/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue
@@ -1,4 +1,5 @@
 <script>
+import _ from 'underscore';
 import { GlTooltip } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -56,17 +57,36 @@ export default {
     collapseIcon() {
       return this.isExpanded ? 'chevron-down' : 'chevron-right';
     },
-    noCodeFn() {
-      return this.errorFn ? sprintf(__('in %{errorFn} '), { errorFn: this.errorFn }) : '';
+    errorFnText() {
+      return this.errorFn
+        ? sprintf(
+            __(`%{spanStart}in%{spanEnd} %{errorFn}`),
+            {
+              errorFn: `<strong>${_.escape(this.errorFn)}</strong>`,
+              spanStart: `<span class="text-tertiary">`,
+              spanEnd: `</span>`,
+            },
+            false,
+          )
+        : '';
     },
-    noCodeLine() {
+    errorPositionText() {
       return this.errorLine
-        ? sprintf(__('at line %{errorLine}%{errorColumn}'), {
-            errorLine: this.errorLine,
-            errorColumn: this.errorColumn ? `:${this.errorColumn}` : '',
-          })
+        ? sprintf(
+            __(`%{spanStart}at line%{spanEnd} %{errorLine}%{errorColumn}`),
+            {
+              errorLine: `<strong>${this.errorLine}</strong>`,
+              errorColumn: this.errorColumn ? `:<strong>${this.errorColumn}</strong>` : ``,
+              spanStart: `<span class="text-tertiary">`,
+              spanEnd: `</span>`,
+            },
+            false,
+          )
         : '';
     },
+    errorInfo() {
+      return `${this.errorFnText} ${this.errorPositionText}`;
+    },
   },
   methods: {
     isHighlighted(lineNum) {
@@ -102,8 +122,7 @@ export default {
         <strong
           v-gl-tooltip
           :title="filePath"
-          class="file-title-name d-inline-block overflow-hidden text-truncate"
-          :class="{ 'limited-width': !hasCode }"
+          class="file-title-name d-inline-block overflow-hidden text-truncate limited-width"
           data-container="body"
         >
           {{ filePath }}
@@ -113,7 +132,7 @@ export default {
           :text="filePath"
           css-class="btn-default btn-transparent btn-clipboard position-static"
         />
-        <span v-if="!hasCode" class="text-tertiary">{{ noCodeFn }}{{ noCodeLine }}</span>
+        <span v-html="errorInfo"></span>
       </div>
     </div>