@grafana/agent-integration-react
DEPRECATED Project has been moved to @grafana/faro-react
Grafana JavaScript Agent package that enables easier integration in projects built with React.
Warning: currently pre-release and subject to frequent breaking changes. Use at your own risk.
Out of the box, the package provides you the following features:
- Error Boundary - Provides additional stacktrace for errors
- Component Profiler - Capture every re-render of a component, the un/mounting time etc.
- Router (v4-v6) integration - Send events for all route changes
- SSR support
Installation
import { createRoutesFromChildren, matchRoutes, Routes, useLocation, useNavigationType } from 'react-router-dom';
import {
getWebInstrumentations,
initializeGrafanaAgent,
ReactIntegration,
ReactRouterVersion,
} from '@grafana/agent-integration-react';
import { TracingInstrumentation } from '@grafana/agent-tracing-web';
initializeGrafanaAgent({
// ...
instrumentations: [
// Load the default Web instrumentations
...getWebInstrumentations(),
// Tracing Instrumentation is needed if you want to use the React Profiler
new TracingInstrumentation(),
new ReactIntegration({
// Only needed if you want to use the React Router instrumentation
router: {
version: ReactRouterVersion.V6,
dependencies: {
createRoutesFromChildren,
matchRoutes,
Routes,
useLocation,
useNavigationType,
},
},
// Or if you use react-router v4/v5
router2: {
version: ReactRouterVersion.V5, // or ReactRouterVersion.V4,
dependencies: {
history, // the history object used by react-router
Route, // Route component imported from react-router package
},
},
}),
],
});
Usage
Error Boundary
import { GrafanaAgentErrorBoundary } from '@grafana/agent-integration-react';
// during render
<GrafanaAgentErrorBoundary>
<App />
</GrafanaAgentErrorBoundary>;
or
import { withErrorBoundary } from '@grafana/agent-integration-react';
export default withErrorBoundary(App);
Router
V6
import { GrafanaAgentRoutes } from '@grafana/agent-integration-react';
// during render
<GrafanaAgentRoutes>
<Route path="/" element={<Home />} />
{/* ... */}
</GrafanaAgentRoutes>;
V4/v5
import { GrafanaAgentRoute } from '@grafana/agent-integration-react';
// during render
<Switch>
<GrafanaAgentRoute path="/">
<Home />
</GrafanaAgentRoute>
{/* ... */}
</Switch>;
Profiler
import { withGrafanaAgentProfiler } from '@grafana/agent-integration-react';
export default withGrafanaAgentProfiler(App);