Menu
DocumentationGrafana CloudMonitor applicationsFrontend ObservabilityInstrumentReactErrorBoundary support
Grafana Cloud
React ErrorBoundary support
In React error boundaries are components that allow you to render a fallback UI in case an error occurs in the respective React component tree.
Faro provides its own error boundary component which enhances the standard React error boundary with Faro specific functionality.
In case of an error it sends a Faro error event which contains the error message, the React component stack of the component which contains the exception, and the name of name of the error boundary if configured.
ts
import { getWebInstrumentations, initializeFaro, ReactIntegration } from '@grafana/faro-react';
initializeFaro({
// ...
instrumentations: [
// Load the default Web instrumentations
...getWebInstrumentations(),
// minimum setup to get the FaroErrorBoundary support
new ReactIntegration(),
],
});
tsx
import { FaroErrorBoundary } from '@grafana/faro-react';
// during render
<FaroErrorBoundary>
<App />
</FaroErrorBoundary>;
or
tsx
import { withErrorBoundary } from '@grafana/faro-react';
export default withErrorBoundary(App);
FaroErrorBoundary properties
Configuration options:
fallback
: The fallback UI to render instead, either:- a
ReactElement
FaroErrorBoundaryFallbackRender
function that passes the Error object and a callback function to reset the error boundary to it’s initial state when called
- a
pushErrorOptions
: Options passed to thepushError
API, for example additional context to an error
Lifecycle callbacks:
beforeCapture
: Executed before the FaropushError
API call, with the Error object as a parameteronError
: Executed when an error occurs, with the Error object as a parameteronMount
: Executed when React calls thecomponentDidMount
lifecycle hookonUnmount
: Executed when React calls thecomponentWillUnmount
lifecycle hook, with the Error object as a parameteronReset
: Executed when React callsresetErrorBoundary
, with the Error object as a parameter
tsx
import { FaroErrorBoundary, PushErrorOptions } from '@grafana/faro-react';
const pushErrorOptions: PushErrorOptions = {
type: "Custom Error Type"
context: {
foo: "bar",
baz: "abc"
},
};
// during render
<FaroErrorBoundary
beforeCapture={(error) => handleBeforeCapture(error)}
onError={(error) => handleError(error)}
onMount={() => handleOnMount()}
onUnmount={(error) => handleUnmount(error)}
onReset={(error) => handleReset(error)}
pushErrorOptions={pushErrorOptions}
fallback={(error, resetBoundary) => {
return errorBoundaryFallbackRenderer(error, resetBoundary) }}
>
<App />
</FaroErrorBoundary>;
Was this page helpful?
Related documentation
Related resources from Grafana Labs
Additional helpful documentation, links, and articles:
Video
Getting started with the Grafana LGTM Stack
In this webinar, we’ll demo how to get started using the LGTM Stack: Loki for logs, Grafana for visualization, Tempo for traces, and Mimir for metrics.
Video
Intro to Kubernetes monitoring in Grafana Cloud
In this webinar you’ll learn how Grafana offers developers and SREs a simple and quick-to-value solution for monitoring their Kubernetes infrastructure.
Video
Building advanced Grafana dashboards
In this webinar, we’ll demo how to build and format Grafana dashboards.