Tempo: Map error message about the time range limit to more human-readable format (#106626)

public/app/plugins/datasource/tempo/datasource.ts

@@ -61,7 +61,7 @@ import {
 } from './resultTransformer';
 import { doTempoMetricsStreaming, doTempoSearchStreaming } from './streaming';
 import { TempoJsonData, TempoQuery } from './types';
-import { getErrorMessage, migrateFromSearchToTraceQLSearch } from './utils';
+import { getErrorMessage, mapErrorMessage, migrateFromSearchToTraceQLSearch } from './utils';
 import { TempoVariableSupport } from './variables';
 
 export const DEFAULT_LIMIT = 20;
@@ -525,7 +525,14 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
       );
     }
 
-    return merge(...subQueries);
+    return merge(...subQueries).pipe(
+      map((response) => {
+        if (response.errors?.[0]?.message) {
+          response.errors[0].message = mapErrorMessage(response.errors?.[0]?.message);
+        }
+        return response;
+      })
+    );
   }
 
   applyTemplateVariables(query: TempoQuery, scopedVars: ScopedVars) {

public/app/plugins/datasource/tempo/utils.ts

@@ -5,10 +5,22 @@ import { generateId } from './SearchTraceQLEditor/TagsInput';
 import { TraceqlFilter, TraceqlSearchScope } from './dataquery.gen';
 import { TempoQuery } from './types';
 
+const LIMIT_MESSAGE = /.*range specified by start and end.*exceeds.*/;
+const LIMIT_MESSAGE_METRICS = /.*metrics query time range exceeds the maximum allowed duration of.*/;
+
+export function mapErrorMessage(errorMessage: string) {
+  if (errorMessage && (LIMIT_MESSAGE.test(errorMessage) || LIMIT_MESSAGE_METRICS.test(errorMessage))) {
+    return 'The selected time range exceeds the maximum allowed duration. Please select a shorter time range.';
+  } else {
+    return errorMessage;
+  }
+}
+
 export const getErrorMessage = (message: string | undefined, prefix?: string) => {
   const err = message ? ` (${message})` : '';
   let errPrefix = prefix ? prefix : 'Error';
-  return `${errPrefix}${err}. Please check the server logs for more details.`;
+  const msg = `${errPrefix}${err}. Please check the server logs for more details.`;
+  return mapErrorMessage(msg);
 };
 
 export async function getDS(uid?: string): Promise<DataSourceApi | undefined> {