Communicate empty stack trace on error details page

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

@@ -106,6 +106,7 @@ export default {
       errorPollTimeout: 0,
       issueCreationInProgress: false,
       isAlertVisible: false,
+      isStacktraceEmptyAlertVisible: true,
       closedIssueId: null,
     };
   },
@@ -167,6 +168,9 @@ export default {
     resolveBtnLabel() {
       return this.errorStatus !== errorStatus.RESOLVED ? __('Resolve') : __('Unresolve');
     },
+    showEmptyStacktraceAlert() {
+      return !this.loadingStacktrace && !this.showStacktrace && this.isStacktraceEmptyAlertVisible;
+    },
   },
   watch: {
     error(val) {
@@ -254,6 +258,10 @@ export default {
         </gl-sprintf>
       </gl-alert>
 
+      <gl-alert v-if="showEmptyStacktraceAlert" @dismiss="isStacktraceEmptyAlertVisible = false">
+        {{ __('No stack trace for this error') }}
+      </gl-alert>
+
       <div class="error-details-header d-flex py-2 justify-content-between">
         <div
           v-if="!loadingStacktrace && stacktrace"

changelogs/unreleased/195712-empty-stacktrace-on-error-details-page.yml

+---
+title: Show notification about empty stacktrace
+merge_request: 34517
+author:
+type: added

locale/gitlab.pot

@@ -14972,6 +14972,9 @@ msgstr ""
 msgid "No schedules"
 msgstr ""
 
+msgid "No stack trace for this error"
+msgstr ""
+
 msgid "No starrers matched your search"
 msgstr ""
 

spec/frontend/error_tracking/components/error_details_spec.js

@@ -48,6 +48,7 @@ describe('ErrorDetails', () => {
   const findUpdateResolveStatusButton = () =>
     wrapper.find('[data-testid="update-resolve-status-btn"]');
   const findExternalUrl = () => wrapper.find('[data-testid="external-url-link"]');
+  const findAlert = () => wrapper.find(GlAlert);
 
   function mountComponent() {
     wrapper = shallowMount(ErrorDetails, {
@@ -278,15 +279,17 @@ describe('ErrorDetails', () => {
         return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
           expect(wrapper.find(Stacktrace).exists()).toBe(true);
+          expect(findAlert().exists()).toBe(false);
         });
       });
 
-      it('should NOT show stacktrace if no entries', () => {
+      it('should NOT show stacktrace if no entries and show Alert message', () => {
         store.state.details.loadingStacktrace = false;
         store.getters = { 'details/sentryUrl': () => 'sentry.io', 'details/stacktrace': () => [] };
         return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
           expect(wrapper.find(Stacktrace).exists()).toBe(false);
+          expect(findAlert().text()).toBe('No stack trace for this error');
         });
       });
     });
@@ -404,7 +407,6 @@ describe('ErrorDetails', () => {
         });
 
         it('should show alert with closed issueId', () => {
-          const findAlert = () => wrapper.find(GlAlert);
           const closedIssueId = 123;
           wrapper.setData({
             isAlertVisible: true,