Display fn, line num and column in stacktrace entry caption

Add caption for all entries

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

 <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>
 

changelogs/unreleased/38130-update-header-for-all-stacktrace-entries.yml

+---
+title: Display fn, line num and column in stacktrace entry caption
+merge_request: 22905
+author:
+type: added

locale/gitlab.pot

@@ -373,6 +373,12 @@ msgstr ""
 msgid "%{spammable_titlecase} was submitted to Akismet successfully."
 msgstr ""
 
+msgid "%{spanStart}at line%{spanEnd} %{errorLine}%{errorColumn}"
+msgstr ""
+
+msgid "%{spanStart}in%{spanEnd} %{errorFn}"
+msgstr ""
+
 msgid "%{start} to %{end}"
 msgstr ""
 
@@ -21522,9 +21528,6 @@ msgstr ""
 msgid "assign yourself"
 msgstr ""
 
-msgid "at line %{errorLine}%{errorColumn}"
-msgstr ""
-
 msgid "attach a new file"
 msgstr ""
 
@@ -21997,9 +22000,6 @@ msgstr ""
 msgid "importing"
 msgstr ""
 
-msgid "in %{errorFn} "
-msgstr ""
-
 msgid "in group %{link_to_group}"
 msgstr ""
 

spec/frontend/error_tracking/components/stacktrace_entry_spec.js

@@ -46,8 +46,8 @@ describe('Stacktrace Entry', () => {
     expect(wrapper.findAll('.line_content.old').length).toBe(1);
   });
 
-  describe('no code block', () => {
-    const findFileHeaderContent = () => wrapper.find('.file-header-content').html();
+  describe('entry caption', () => {
+    const findFileHeaderContent = () => wrapper.find('.file-header-content').text();
 
     it('should hide collapse icon and render error fn name and error line when there is no code block', () => {
       const extraInfo = { errorLine: 34, errorFn: 'errorFn', errorColumn: 77 };