From 9502e234237b980f5789af013d7fb02e82ef5162 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Tue, 7 Oct 2025 11:58:14 +0200
Subject: [PATCH] ErrorBoundary: Report specific boundary type to Faro
 (#112071)

* Add error boundary type to faro reporting in ErrorBoundary

* Add error boundary name prop

* Add boundary name to ErrorBoundaryAlert
---
 .../ErrorBoundary/ErrorBoundary.tsx           | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx b/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx
index 8c50da47478..a1bdc9a945f 100644
--- a/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -14,6 +14,9 @@ export interface ErrorBoundaryApi {
 }
 
 interface Props {
+  /** Name of the error boundary. Used when reporting errors in Faro. */
+  boundaryName?: string;
+
   children: (r: ErrorBoundaryApi) => ReactNode;
   /** Will re-render children after error if recover values changes */
   dependencies?: unknown[];
@@ -37,10 +40,15 @@ export class ErrorBoundary extends PureComponent<Props, State> {
   };
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    const logger = this.props.errorLogger ?? faro?.api?.pushError;
-
-    if (logger) {
-      logger(error);
+    if (this.props.errorLogger) {
+      this.props.errorLogger(error);
+    } else {
+      faro?.api?.pushError(error, {
+        type: 'boundary',
+        context: {
+          source: this.props.boundaryName ?? 'unknown',
+        },
+      });
     }
 
     this.setState({ error, errorInfo });
@@ -85,6 +93,9 @@ export class ErrorBoundary extends PureComponent<Props, State> {
  * @public
  */
 export interface ErrorBoundaryAlertProps {
+  /** Name of the error boundary. Used when reporting errors in Faro. */
+  boundaryName?: string;
+
   /** Title for the error boundary alert */
   title?: string;
 
@@ -107,10 +118,10 @@ export class ErrorBoundaryAlert extends PureComponent<ErrorBoundaryAlertProps> {
   };
 
   render() {
-    const { title, children, style, dependencies, errorLogger } = this.props;
+    const { title, children, style, dependencies, errorLogger, boundaryName } = this.props;
 
     return (
-      <ErrorBoundary dependencies={dependencies} errorLogger={errorLogger}>
+      <ErrorBoundary dependencies={dependencies} errorLogger={errorLogger} boundaryName={boundaryName}>
         {({ error, errorInfo }) => {
           if (!errorInfo) {
             return children;