diff --git a/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx b/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx
index 04c51797a3d..3021c8a1e83 100644
--- a/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx
@@ -15,8 +15,8 @@ const fields: string[] = ['type', 'dataSourceName', 'condition', 'queries', 'exp
 export function PreviewRule(): React.ReactElement | null {
   const styles = useStyles2(getStyles);
   const [preview, onPreview] = usePreview();
-  const { getValues } = useFormContext();
-  const [type] = getValues(fields);
+  const { watch } = useFormContext();
+  const [type, condition] = watch(['type', 'condition']);
 
   if (type === RuleFormType.cloudRecording || type === RuleFormType.cloudAlerting) {
     return null;
@@ -25,7 +25,7 @@ export function PreviewRule(): React.ReactElement | null {
   return (
     <div className={styles.container}>
       <HorizontalGroup>
-        <Button type="button" variant="primary" onClick={onPreview}>
+        <Button disabled={!condition} type="button" variant="primary" onClick={onPreview}>
           Preview alerts
         </Button>
       </HorizontalGroup>
diff --git a/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx b/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx
index d50eb5414e8..492b208703d 100644
--- a/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx
@@ -6,6 +6,7 @@ import { PanelRenderer } from '@grafana/runtime';
 import { GrafanaTheme2, LoadingState } from '@grafana/data';
 import { PreviewRuleResponse } from '../../types/preview';
 import { RuleFormType } from '../../types/rule-form';
+import { messageFromError } from '../../utils/redux';
 
 type Props = {
   preview: PreviewRuleResponse | undefined;
@@ -30,7 +31,11 @@ export function PreviewRuleResult(props: Props): React.ReactElement | null {
   }
 
   if (data.state === LoadingState.Error) {
-    return <div className={styles.container}>{data.error ?? 'Failed to preview alert rule'}</div>;
+    return (
+      <div className={styles.container}>
+        {data.error ? messageFromError(data.error) : 'Failed to preview alert rule'}
+      </div>
+    );
   }
 
   return (
diff --git a/public/app/features/alerting/unified/utils/redux.ts b/public/app/features/alerting/unified/utils/redux.ts
index 868bc9fa863..068c3c4f920 100644
--- a/public/app/features/alerting/unified/utils/redux.ts
+++ b/public/app/features/alerting/unified/utils/redux.ts
@@ -137,7 +137,7 @@ export function isFetchError(e: unknown): e is FetchError {
   return typeof e === 'object' && e !== null && 'status' in e && 'data' in e;
 }
 
-function messageFromError(e: Error | FetchError | SerializedError): string {
+export function messageFromError(e: Error | FetchError | SerializedError): string {
   if (isFetchError(e)) {
     if (e.data?.message) {
       let msg = e.data?.message;