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
This commit is contained in:
Tobias Skarhed 2025-10-07 11:58:14 +02:00 committed by GitHub
parent 792853df91
commit 9502e23423
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 6 deletions

View File

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