{"id":11251,"library":"logrocket","title":"LogRocket JavaScript SDK","description":"LogRocket's JavaScript SDK, currently at version 12.1.0, provides a comprehensive solution for front-end monitoring, session replay, and product analytics. It allows development and product teams to reproduce user issues by replaying sessions pixel-perfectly, alongside integrated technical context such as console logs, network requests, and Redux state changes. This SDK differentiates itself by its strong focus on engineering-grade debugging, offering detailed diagnostic insights into client-side errors and performance issues. While a fixed release cadence isn't explicitly published, the package undergoes regular updates with new features and improvements. A key feature is its ability to automatically detect user frustration signals like rage clicks and dead clicks, and its robust data privacy features include default obfuscation of sensitive information, with configurable options for granular control over what data is collected and sent to the servers. It integrates with various tools like Sentry, Jira, and Google Analytics to streamline developer workflows and provide a holistic view of user experience.","status":"active","version":"12.1.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","redux","reducer","state","logging","exceptions","replay","record","typescript"],"install":[{"cmd":"npm install logrocket","lang":"bash","label":"npm"},{"cmd":"yarn add logrocket","lang":"bash","label":"yarn"},{"cmd":"pnpm add logrocket","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Optional integration for capturing Redux state and actions.","package":"@logrocket/redux","optional":true},{"reason":"Optional integration for React-specific features and error boundaries.","package":"@logrocket/react","optional":true},{"reason":"Required for React Native applications.","package":"@logrocket/react-native","optional":true}],"imports":[{"note":"LogRocket is typically imported as a default export. While CommonJS `require` works in some environments, ESM `import` is the standard for modern frontend applications.","wrong":"const LogRocket = require('logrocket');","symbol":"LogRocket","correct":"import LogRocket from 'logrocket';"},{"note":"The `init` method is accessed directly from the default `LogRocket` export, not as a named export.","wrong":"import { init } from 'logrocket'; init('YOUR_APP_ID');","symbol":"init","correct":"import LogRocket from 'logrocket';\nLogRocket.init('YOUR_APP_ID');"},{"note":"`identify` is a method of the default `LogRocket` export. It should be called after `LogRocket.init()`.","wrong":"import { identify } from 'logrocket'; identify('user-id', { ... });","symbol":"identify","correct":"import LogRocket from 'logrocket';\nLogRocket.identify('user-id', { name: 'John Doe', email: 'john.doe@example.com' });"},{"note":"The Redux middleware is provided by the `@logrocket/redux` package, not the main `logrocket` package. It's a named export from that specific plugin. Ensure it's the *last* middleware applied to capture all state changes.","wrong":"import { reduxMiddleware } from 'logrocket';\n// ...or...\nimport LogRocket from 'logrocket';\nconst store = createStore(rootReducer, applyMiddleware(reduxMiddleware));","symbol":"reduxMiddleware","correct":"import LogRocket from 'logrocket';\nimport { createStore, applyMiddleware } from 'redux';\nimport { reduxMiddleware } from '@logrocket/redux';\n\nconst store = createStore(rootReducer, applyMiddleware(LogRocket.reduxMiddleware));"}],"quickstart":{"code":"import LogRocket from 'logrocket';\nimport { reduxMiddleware } from '@logrocket/redux';\nimport { createStore, applyMiddleware, combineReducers } from 'redux';\n\ninterface AppState {\n  counter: number;\n  message: string;\n}\n\nconst counterReducer = (state = 0, action: { type: string }) => {\n  switch (action.type) {\n    case 'INCREMENT': return state + 1;\n    case 'DECREMENT': return state - 1;\n    default: return state;\n  }\n};\n\nconst messageReducer = (state = '', action: { type: string, payload?: string }) => {\n  switch (action.type) {\n    case 'SET_MESSAGE': return action.payload || '';\n    default: return state;\n  }\n};\n\nconst rootReducer = combineReducers<AppState>({\n  counter: counterReducer,\n  message: messageReducer\n});\n\n// Replace with your actual LogRocket App ID\nconst LOGROCKET_APP_ID = process.env.LOGROCKET_APP_ID || 'your/app-id';\n\n// Initialize LogRocket\nLogRocket.init(LOGROCKET_APP_ID, {\n  // Optional: Configure specific options\n  console: {\n    isEnabled: true,\n    shouldAggregateConsoleErrors: true,\n  },\n  network: {\n    isEnabled: true,\n    requestSanitizer: (request) => {\n      // Redact sensitive headers, e.g., Authorization\n      if (request.headers?.Authorization) {\n        request.headers.Authorization = 'Bearer [Redacted]';\n      }\n      return request;\n    },\n  },\n  dom: {\n    // Optional: Redact elements containing sensitive data\n    // For example, an element with data-lr-hide will not be recorded\n    baseHref: '/', // Specify if your app uses a base href\n  }\n});\n\n// Identify the user after initialization\nLogRocket.identify('unique-user-id-123', {\n  name: 'Jane Doe',\n  email: 'jane.doe@example.com',\n  subscriptionType: 'premium',\n  // Custom user traits for filtering sessions\n  'user-type': 'admin'\n});\n\n// Integrate Redux middleware (must be after LogRocket.init)\nconst store = createStore(rootReducer, applyMiddleware(reduxMiddleware));\n\n// Simulate some actions\nstore.dispatch({ type: 'INCREMENT' });\nstore.dispatch({ type: 'INCREMENT' });\nstore.dispatch({ type: 'SET_MESSAGE', payload: 'User clicked increment twice' });\n\ntry {\n  throw new Error('This is a test error to see in LogRocket!');\n} catch (error) {\n  LogRocket.error(error);\n}\n\nconsole.log('LogRocket initialized and user identified. Check your dashboard for the session.');\n\n// Example of sending a custom event\nLogRocket.track('Product View', { productId: 'ABC-123', category: 'Electronics' });\n\n// This is client-side code, typically run in a browser environment.\n// Ensure to include your actual LogRocket App ID from your project settings.\n","lang":"typescript","description":"This quickstart demonstrates how to initialize LogRocket, identify a user with custom traits, integrate the Redux middleware, and manually log errors and track custom events. It highlights privacy configuration for network requests."},"warnings":[{"fix":"Ensure `LogRocket.init()` is wrapped in a client-side check or only executed in browser-specific bundles. For frameworks like Next.js or Nuxt.js, ensure it's called within `useEffect` or client-only components.","message":"LogRocket.init() must always be called client-side (in the browser). Attempting to call it in a server-side (Node.js) environment will result in errors and prevent sessions from being recorded.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Utilize `LogRocket.init` options like `dom.private` or `dom.inputSanitizer` for visual data, and `network.requestSanitizer` or `network.responseSanitizer` for network data. Use `data-lr-hide` HTML attributes on sensitive elements. Regularly audit recorded sessions to ensure no unintended data leaks occur.","message":"Sensitive data (e.g., passwords, credit card numbers, PII) may be captured by default if not explicitly redacted. While LogRocket obfuscates some text by default, it is crucial to review and configure privacy settings for visual data and network requests.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"When calling `applyMiddleware`, pass `LogRocket.reduxMiddleware` as the final argument: `applyMiddleware(otherMiddleware, LogRocket.reduxMiddleware)`.","message":"When using LogRocket with Redux, ensure the `reduxMiddleware` is the *last* middleware applied in your Redux store setup. If placed earlier, it may not accurately capture the final state or actions after subsequent middleware have processed them.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always consult the official LogRocket changelog and upgrade guides before performing major version upgrades. Test thoroughly in development and staging environments. Be particularly cautious with mobile SDKs if your project uses them.","message":"While the core LogRocket web SDK generally maintains strong backward compatibility, major version upgrades (e.g., v1.x to v2.x, or similar future changes) may introduce breaking changes, especially around configuration options, API signatures, or integration plugins. Mobile SDKs (e.g., React Native) have had specific breaking changes related to view capture and redaction in their 1.x and 2.x lines.","severity":"breaking","affected_versions":"Check release notes for major version updates"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `LogRocket.init()` and related calls are executed only in the browser environment. For React, this typically means inside a `useEffect` hook or using dynamic imports with `ssr: false`. Example: `if (typeof window !== 'undefined') { LogRocket.init(...); }`","cause":"Attempting to initialize LogRocket or use its methods in a server-side rendering (SSR) environment without a client-side check.","error":"ReferenceError: navigator is not defined"},{"fix":"Verify the App ID passed to `LogRocket.init()`. Check browser console for any errors or blocked network requests related to LogRocket. Review your Content Security Policy to ensure `cdn.logr-in.com` is allowed. Temporarily disable strict privacy configurations to isolate the issue. Ensure `LogRocket.init()` is called only once and early in your application lifecycle.","cause":"Common causes include incorrect App ID, network requests blocked by ad-blockers or content security policies (CSPs), LogRocket not initialized, or excessive privacy/redaction settings.","error":"Sessions not appearing in LogRocket dashboard / No data being recorded."},{"fix":"Install `@logrocket/redux` (`npm install @logrocket/redux`). Ensure `reduxMiddleware` is imported and added as the *last* middleware in `applyMiddleware` when creating your Redux store. Check LogRocket's configuration for any limits on action size or frequency.","cause":"The `@logrocket/redux` middleware is either not installed, not applied, or applied in the wrong order (not as the last middleware) in your Redux store configuration. Very large Redux actions can also be automatically disabled to prevent performance issues.","error":"Redux actions or state are not being captured/displayed in session replays."}],"ecosystem":"npm"}