React Production Performance Monitoring
We want our React applications to be fast and responsive. Often times, it's only when a customer or user has complained that we learn about a potential performance issue in our production react application. This is where real user monitoring comes in.
Polaris provides real user monitoring for your react apps with real-time indicators of runtime performance and reliability.
Prerequisites
Configuring React Profiler
By default, React's Profiler component is only available in development mode.
The reason is that the profiler adds some overhead to your application, which can impact performance.
We recommend:
- Create two separate builds for your application: one build with the profiler and one without.
- Serve the build with the profiler to a small segment of your users to measure the performance of your components.
The React team provided some guidance on how to configure the Profiler in production.
We'll borrow from their instructions to configure the Profiler in production for builds using Webpack.
Webpack Configuration
If you are using Webpack to bundle your application, add the following configuration to the webpack.config.js file:
module.exports = {
// ...
resolve: {
alias: {
'react-dom$': 'react-dom/profiling',
},
},
};
Vite Configuration
If you are using Vite to bundle your application, add the following configuration to the vite.config.js file:
import { defineConfig } from 'vite';
export default defineConfig({
resolve: {
alias: {
'react-dom/client': 'react-dom/profiling',
},
},
});
PolarisProfiler
Polaris provides a wrapper around React's Profiler component that sends measurements to Polaris.
To use the PolarisProfiler component, wrap the component you want to measure with the PolarisProfiler component.
import { PolarisProfiler } from '@getpolaris.ai/sdk-react';
export function App() {
return (
<PolarisProfiler id="nav">
<Navigation />
</PolarisProfiler>
);
}