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 {
/** 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;