React plugin

The LogRocket React plugin allows you to search for sessions where the user clicks a specific component in your app:

Install the LogRocket React package and babel plugin:

npm i --save babel-plugin-add-react-displayname

// If using React 16.10
npm i --save logrocket-react@4

// If using React 16.5
npm i --save logrocket-react@3

// If using React 16.4
npm i --save logrocket-react@2

// If using React <16.4+
npm i --save logrocket-react@1

// If using React 0.14.0 or React 15:
npm i --save logrocket-react@^0.0.5

Add the add-react-displayname plugin to your babel config. This ensures that component names are not minified in production.

npm i --save babel-plugin-add-react-displayname

{
  presets: [ ... ],
  plugins: ["add-react-displayname"],
}

Call LogRocket with the logrocket-react package:

import LogRocket from 'logrocket';
import setupLogRocketReact from 'logrocket-react';


setupLogRocketReact(LogRocket);

That's it! You can now search for sessions which contain clicks on specific React components. See Understanding User Flows for more information on using LogRocket to understand your customer experience.

Compatibility

LogRocket React does not support Next.JS