From 70fc603d26d2ae585d9112b2a89af0ab66a25cba Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Mon, 12 Feb 2024 12:17:19 +0100
Subject: [PATCH] Alerting: Improve 404 and other HTTP request error handling
 (#82249)

---
 .../features/alerting/unified/RuleViewer.tsx    | 17 +++++++++++++++--
 .../app/features/alerting/unified/utils/misc.ts |  7 ++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/public/app/features/alerting/unified/RuleViewer.tsx b/public/app/features/alerting/unified/RuleViewer.tsx
index da62e5d4c3e..3a57a2088ee 100644
--- a/public/app/features/alerting/unified/RuleViewer.tsx
+++ b/public/app/features/alerting/unified/RuleViewer.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
 import { NavModelItem } from '@grafana/data';
-import { config } from '@grafana/runtime';
+import { config, isFetchError } from '@grafana/runtime';
 import { Alert, withErrorBoundary } from '@grafana/ui';
 import { SafeDynamicImport } from 'app/core/components/DynamicImports/SafeDynamicImport';
+import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 
 import { AlertingPageWrapper } from './components/AlertingPageWrapper';
@@ -52,7 +53,7 @@ const RuleViewerV2Wrapper = (props: RuleViewerProps) => {
   if (error) {
     return (
       <AlertingPageWrapper pageNav={defaultPageNav} navId="alert-list">
-        <Alert title={'Something went wrong loading the rule'}>{stringifyErrorLike(error)}</Alert>
+        <ErrorMessage error={error} />
       </AlertingPageWrapper>
     );
   }
@@ -76,4 +77,16 @@ const RuleViewerV2Wrapper = (props: RuleViewerProps) => {
   return null;
 };
 
+interface ErrorMessageProps {
+  error: unknown;
+}
+
+function ErrorMessage({ error }: ErrorMessageProps) {
+  if (isFetchError(error) && error.status === 404) {
+    return <EntityNotFound entity="Rule" />;
+  }
+
+  return <Alert title={'Something went wrong loading the rule'}>{stringifyErrorLike(error)}</Alert>;
+}
+
 export default withErrorBoundary(RuleViewer, { style: 'page' });
diff --git a/public/app/features/alerting/unified/utils/misc.ts b/public/app/features/alerting/unified/utils/misc.ts
index 21115d42ec7..e8e1a7e8dcb 100644
--- a/public/app/features/alerting/unified/utils/misc.ts
+++ b/public/app/features/alerting/unified/utils/misc.ts
@@ -2,7 +2,7 @@ import { sortBy } from 'lodash';
 
 import { UrlQueryMap, Labels } from '@grafana/data';
 import { GrafanaEdition } from '@grafana/data/src/types/config';
-import { config } from '@grafana/runtime';
+import { config, isFetchError } from '@grafana/runtime';
 import { DataSourceRef } from '@grafana/schema';
 import { escapePathSeparators } from 'app/features/alerting/unified/utils/rule-id';
 import { alertInstanceKey } from 'app/features/alerting/unified/utils/rules';
@@ -231,5 +231,10 @@ export function isErrorLike(error: unknown): error is Error {
 }
 
 export function stringifyErrorLike(error: unknown): string {
+  const fetchError = isFetchError(error);
+  if (fetchError) {
+    return error.data.message;
+  }
+
   return isErrorLike(error) ? error.message : String(error);
 }