Registry / observability / logrocket-react

logrocket-react

library7.0.0jsnpmunverified

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.

observability web-framework

npm install logrocket-react

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · LOGROCKET-REACT

logrocket-react

observabilityjavascriptv7.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

LogRocketReact

✓ import LogRocketReact from 'logrocket-react';

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

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

setupLogRocketReact

✓ import { setupLogRocketReact } from 'logrocket-react';

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

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

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> );

Debug

Known issues

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

affects: >=1.0

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

affects: >=1.0

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

affects: >=1.0 <7.0

Errors

Common errors & fixes

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

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

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.

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.

Upgrade

Version history

7.0.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for the React integration to function. Specific major versions of logrocket-react are tied to specific major versions of React.

logrocketrequiredPeer dependency; this package extends the core LogRocket library and requires it for initialization and functionality.

Agent activity

15 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/LogRocket/logrocket-react ↗

packagehttps://www.npmjs.com/package/logrocket-react ↗

homepagehttps://logrocket.com ↗