React server side rendering support
Grafana Cloud

React server side rendering support

Follow this guide to learn how to initialize your Faro instrumentation to support React Server Side Rendering (SSR) for:

  • React Router v6 without a data router
  • React Router v6 with a data router
  • React Router v5

React Router v6 without a data router

tsx
import { FaroErrorBoundary, setReactRouterV6SSRDependencies } from '@grafana/faro-react';
setReactRouterV6SSRDependencies({ Routes });

export function renderToString(...) {
  return reactRenderToString(
    <FaroErrorBoundary>
      <StaticRouter location={...}>
        <App />
      </StaticRouter>
    </FaroErrorBoundary>
  ),
}

React Router v6 with a data router

Wrap your data router with withFaroRouterInstrumentation(dataRouter) in your routes file.

// example

React Router v5

tsx
import { FaroErrorBoundary, setReactRouterV4V5SSRDependencies } from '@grafana/faro-react';
setReactRouterV4V5SSRDependencies({ Route, history });

export function renderToString(...) {
  return reactRenderToString(
    <FaroErrorBoundary>
      <StaticRouter location={...}>
        <App />
      </StaticRouter>
    </FaroErrorBoundary>
  ),
}