mirror of https://github.com/grafana/grafana.git
				
				
				
			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:
		
							parent
							
								
									792853df91
								
							
						
					
					
						commit
						9502e23423
					
				|  | @ -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; | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue