[v10.1.x] Transforms: Catch errors while running transforms (#73527)

Transforms: Catch errors while running transforms (#73451)

(cherry picked from commit e605c686f8)

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

public/app/features/query/state/PanelQueryRunner.ts

@@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash';
 import { Observable, of, ReplaySubject, Unsubscribable } from 'rxjs';
-import { map, mergeMap } from 'rxjs/operators';
+import { map, mergeMap, catchError } from 'rxjs/operators';
 
 import {
   applyFieldOverrides,
@@ -210,7 +210,17 @@ export class PanelQueryRunner {
       interpolate: (v: string) => getTemplateSrv().replace(v, data?.request?.scopedVars),
     };
 
-    return transformDataFrame(transformations, data.series, ctx).pipe(map((series) => ({ ...data, series })));
+    return transformDataFrame(transformations, data.series, ctx).pipe(
+      map((series) => ({ ...data, series })),
+      catchError((err) => {
+        console.warn('Error running transformation:', err);
+        return of({
+          ...data,
+          state: LoadingState.Error,
+          error: toDataQueryError(err),
+        });
+      })
+    );
   }
 
   async run(options: QueryRunnerOptions) {