{"id":15135,"library":"logrocket-react","title":"LogRocket React Plugin","description":"LogRocket React Plugin (`logrocket-react`) is an optional add-on package designed to integrate LogRocket's session replay and monitoring capabilities specifically with React applications. It allows developers to search for user sessions based on interactions with specific React components within their app. The package is currently at version 7.0.0, supporting React 19. It maintains a distinct versioning scheme tied directly to major React versions, requiring users to install a specific `logrocket-react` version corresponding to their React installation (e.g., `v7` for React 19, `v6` for React 18). This tight coupling dictates its release cadence, typically aligning with new React major releases. A key differentiator is its reliance on the `displayName` property of React components for reporting component names, which often requires specific build tooling or manual intervention.","status":"active","version":"7.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/LogRocket/logrocket-react","tags":["javascript","typescript"],"install":[{"cmd":"npm install logrocket-react","lang":"bash","label":"npm"},{"cmd":"yarn add logrocket-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add logrocket-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the React integration to function. Specific major versions of logrocket-react are tied to specific major versions of React.","package":"react","optional":false},{"reason":"Peer dependency; this package extends the core LogRocket library and requires it for initialization and functionality.","package":"logrocket","optional":false}],"imports":[{"note":"Main export for initializing the React plugin. The package primarily uses ES modules. Ensure LogRocket (core) is imported and initialized first.","wrong":"const LogRocketReact = require('logrocket-react');","symbol":"LogRocketReact","correct":"import LogRocketReact from 'logrocket-react';"},{"note":"An alternative or older named export for initialization, though `LogRocketReact.init(LogRocket)` is the current recommended pattern for v7. Use this only if specifically documented for a legacy setup.","wrong":"import LogRocketReact from 'logrocket-react'; LogRocketReact.setup(LogRocket);","symbol":"setupLogRocketReact","correct":"import { setupLogRocketReact } from 'logrocket-react';"},{"note":"While not from `logrocket-react` directly, `LogRocket` from the core `logrocket` package is an essential dependency that must be imported and initialized *before* `logrocket-react`.","symbol":"LogRocket","correct":"import LogRocket from 'logrocket';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport LogRocket from 'logrocket';\nimport LogRocketReact from 'logrocket-react';\n\n// Initialize LogRocket core first\nLogRocket.init(process.env.LOGROCKET_APP_ID ?? 'YOUR_APP_ID/YOUR_PROJECT_ID');\n\n// Then initialize the React plugin\nLogRocketReact.init(LogRocket);\n\ninterface ButtonProps {\n  onClick: () => void;\n  children: React.ReactNode;\n}\n\n// Ensure displayName is set for LogRocket to identify components\nconst MyButton = ({ onClick, children }: ButtonProps) => {\n  return (\n    <button onClick={onClick} style={{ padding: '10px 20px', cursor: 'pointer' }}>\n      {children}\n    </button>\n  );\n};\nMyButton.displayName = 'MyInteractiveButton'; // Critical for LogRocket component tracking\n\nconst App = () => {\n  const handleClick = () => {\n    console.log('Button clicked!');\n    LogRocket.track('UserClickedMyButton', { buttonName: 'MyInteractiveButton' });\n  };\n\n  return (\n    <div>\n      <h1>LogRocket React Integration</h1>\n      <p>This button interaction will be tracked by LogRocket.</p>\n      <MyButton onClick={handleClick}>Click Me</MyButton>\n    </div>\n  );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);","lang":"typescript","description":"This quickstart demonstrates how to initialize LogRocket and its React plugin, then render a simple React component that explicitly sets its `displayName` property, which is crucial for LogRocket's component tracking feature. It also shows how to manually track an event."},"warnings":[{"fix":"Consult the package's README or documentation for the correct `logrocket-react` version for your React installation. E.g., `npm i --save logrocket-react@7` for React 19, `logrocket-react@6` for React 18, etc.","message":"Major versions of `logrocket-react` are tightly coupled to specific major versions of React. Installing the wrong version will lead to runtime errors or unexpected behavior.","severity":"breaking","affected_versions":">=1.0"},{"fix":"Manually add `Component.displayName = 'ComponentName';` to your functional components or class components, or ensure your Babel/Webpack configuration includes a plugin that sets `displayName` (e.g., `@babel/plugin-transform-react-jsx-self`).","message":"Component names are not reported to LogRocket unless the `displayName` property is explicitly set on your React components, or your build tooling (e.g., Babel plugins) automatically adds it.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"For `logrocket-react@7` and newer, use `import LogRocketReact from 'logrocket-react'; LogRocketReact.init(LogRocket);`. Review the specific version's documentation for exact usage.","message":"The `init` function signature and export pattern have changed across major versions. Older versions might have used named exports like `setupLogRocketReact` or different parameters.","severity":"breaking","affected_versions":">=1.0 <7.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure both `LogRocket` from `logrocket` and `LogRocketReact` from `logrocket-react` are imported. Call `LogRocket.init()` before `LogRocketReact.init(LogRocket)`.","cause":"`LogRocketReact` was not correctly imported, or `LogRocket` (core) was not imported/initialized before attempting to initialize `LogRocketReact`.","error":"TypeError: Cannot read properties of undefined (reading 'init')"},{"fix":"Ensure all React hooks are called only from functional components or other custom hooks. This is a general React rule, but misinterpreting LogRocket's integration points could lead to it.","cause":"Using a LogRocket-related hook (if any were exposed, or if custom hooks within a LogRocket context were mis-used) outside of a functional component or another custom hook.","error":"React Hook 'useContext' cannot be called inside a callback."},{"fix":"Upgrade all related packages, especially `react` and `logrocket-react`, to their latest compatible versions. Ensure `prop-types` is used for explicit type checking if needed for custom components.","cause":"Using older versions of React or LogRocket-react that might still rely on `React.PropTypes` directly, particularly if your build environment is configured for an older React version with a newer logrocket-react version.","error":"Warning: Accessing PropTypes via the main 'react' package is deprecated. Use the 'prop-types' package instead."}],"ecosystem":"npm"}