logrocket-react

import LogRocketReact from 'logrocket-react';

import { setupLogRocketReact } from 'logrocket-react';

import LogRocket from 'logrocket';

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