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 { }; 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 { * @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 { }; render() { - const { title, children, style, dependencies, errorLogger } = this.props; + const { title, children, style, dependencies, errorLogger, boundaryName } = this.props; return ( - + {({ error, errorInfo }) => { if (!errorInfo) { return children;