LogRocket React Plugin

Common errors

• TypeError: Cannot read properties of undefined (reading 'init')

  cause `LogRocketReact` was not correctly imported, or `LogRocket` (core) was not imported/initialized before attempting to initialize `LogRocketReact`.
  fix Ensure both `LogRocket` from `logrocket` and `LogRocketReact` from `logrocket-react` are imported. Call `LogRocket.init()` before `LogRocketReact.init(LogRocket)`.

• React Hook 'useContext' cannot be called inside a callback.

  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.
  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.

• Warning: Accessing PropTypes via the main 'react' package is deprecated. Use the 'prop-types' package instead.

  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.
  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.

Warnings

• breaking 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.
  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.
• gotcha 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.
  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`).
• breaking The `init` function signature and export pattern have changed across major versions. Older versions might have used named exports like `setupLogRocketReact` or different parameters.
  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.

Install

• npm install logrocket-react npm
• yarn add logrocket-react yarn
• pnpm add logrocket-react pnpm

Imports

• LogRocketReact
  wrong:

  const LogRocketReact = require('logrocket-react');

  correct:

  import LogRocketReact from 'logrocket-react';

  Main export for initializing the React plugin. The package primarily uses ES modules. Ensure LogRocket (core) is imported and initialized first.
• setupLogRocketReact
  wrong:

  import LogRocketReact from 'logrocket-react'; LogRocketReact.setup(LogRocket);

  correct:

  import { setupLogRocketReact } from 'logrocket-react';

  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.
• LogRocket

  import LogRocket from 'logrocket';

  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`.

Quickstart

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.

import React from 'react';
import ReactDOM from 'react-dom/client';
import LogRocket from 'logrocket';
import LogRocketReact from 'logrocket-react';

// Initialize LogRocket core first
LogRocket.init(process.env.LOGROCKET_APP_ID ?? 'YOUR_APP_ID/YOUR_PROJECT_ID');

// Then initialize the React plugin
LogRocketReact.init(LogRocket);

interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}

// Ensure displayName is set for LogRocket to identify components
const MyButton = ({ onClick, children }: ButtonProps) => {
  return (
    <button onClick={onClick} style={{ padding: '10px 20px', cursor: 'pointer' }}>
      {children}
    </button>
  );
};
MyButton.displayName = 'MyInteractiveButton'; // Critical for LogRocket component tracking

const App = () => {
  const handleClick = () => {
    console.log('Button clicked!');
    LogRocket.track('UserClickedMyButton', { buttonName: 'MyInteractiveButton' });
  };

  return (
    <div>
      <h1>LogRocket React Integration</h1>
      <p>This button interaction will be tracked by LogRocket.</p>
      <MyButton onClick={handleClick}>Click Me</MyButton>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);