LogRocket

The logrocket Developer Hub

Welcome to the logrocket developer hub. You'll find comprehensive guides and documentation to help you start working with logrocket as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    
Suggest Edits

init()

Set an appID and start a recording a session.

 

Call init to configure and start LogRocket.

If you followed the quickstart guide at https://app.logrocket.com, you should already have a call to this function on your page.

LogRocket.init(YOUR_APP_ID);

Configuration

  • You must pass your appID to init. You can find yours on https://app.logrocket.com.
  • An optional configuration object can be passed as a second argument. The options are described in detail below.

Call init as early on the page as possible. Some recording data may be lost if it is called too late.

Suggest Edits

release

optional - String

 

Track the version of your application in LogRocket. Can be a Git hash, version string, or any unique identifier for your application.

This release hash will appear in every LogRocket recording, making it easier to determine the code that was running at the time of recording.

LogRocket.init(YOUR_APP_ID, {
   release: '0.1.0',
});
Suggest Edits

console

optional

 

By default, LogRocket logs the following methods of the console API:

  • console.log
  • console.info
  • console.debug
  • console.warn
  • console.error

isEnabled
optional - boolean

Disable this boolean to prevent logging of console data to LogRocket.

LogRocket.init(YOUR_APP_ID, {
  console: {
    isEnabled: false,
  },
});

isEnabled.[log|info|debug|warn|error]
optional - boolean

You can also disable specific console methods by setting the method name to be false. By default, all methods will be logged unless explicitly set to false.

// This will log all console.info, console.warn, and console.error calls.
LogRocket.init(YOUR_APP_ID, {
  console: {
    isEnabled: {
      log: false,
      debug: false, 
    },
  },
});
Suggest Edits

network

optional: scrub data from network requests and responses.

 

isEnabled
optional - boolean

Disable logging of all network data.

LogRocket.init(YOUR_APP_ID, {
  network: {
    isEnabled: false,
  },
});

requestSanitizer
optional - function

Use requestSanitizer to scrub sensitive data from network requests or to ignore request/response pairs.

To ignore a request/response pair return null from the requestSanitizer. You can also redact fields on the request object by modifying the object. Make sure that you still return the modified request from the function:

LogRocket.init(YOUR_APP_ID, {
  network: {
    requestSanitizer: (request) => {
      // if the url contains 'ignore'
      if (request.url.toLowerCase().indexOf('ignore') !== -1) {
        // ignore the request response pair
        return null;
      }
      
      // otherwise log the request normally
      return request;
    },
  },
});
LogRocket.init(YOUR_APP_ID, {
  network: {
    requestSanitizer: function (request) {
      // if the url contains 'ignore'
      if (request.url.toLowerCase().indexOf('ignore') !== -1) {
        // scrub out the body
        request.body = null;
      }
        
      return request;
    },
  },
});
LogRocket.init(YOUR_APP_ID, {
   network: {
     requestSanitizer: function (request) {
       request.headers['x-auth-token'] = null;
       return request;
     },
   },
});
LogRocket.init(YOUR_APP_ID, {
  network: {
    requestSanitizer: function (request) {
      if (request.headers['x-auth-token']) {
        request.headers['x-auth-token'] = '';
      }
      
      return request;
    };
    },
  },
});

responseSanitizer
optional - function

Use the responseSanitizer to redact sensitive data from network response. Return null from the function to redact all response fields and only record timing data.

LogRocket.init(YOUR_APP_ID, {
   network: {
     responseSanitizer: function (response) {
       response.body = null;
       return response;
     },
   },
});
LogRocket.init(YOUR_APP_ID, {
   network: {
     responseSanitizer: function (response) {
       return null;
     },
   },
});
Suggest Edits

dom

optional

 

LogRocket records a "video" of your users' sessions by logging diffs in the DOM via MutationObserver.

By default, LogRocket does not record any password fields or DOM trees that contain the _lr-hide class. If you'd like to disable all DOM recordings, you can pass this option to LogRocket.init():

LogRocket.init(YOUR_APP_ID, {
  dom: {
    isEnabled: false,
  },
});

baseHref
optional - string

If client accesses your app on a private domain (or from a Cordova app), then LogRocket won't be able to fetch CSS/image assets for playback (see Testing on localhost/VPN for more information). To get around this limitation, you can specify a baseHref from which LogRocket will fetch assets. Make sure that this domain is publicly accessible, and that it contains the same assets as the private domain:

LogRocket.init(YOUR_APP_ID, {
  dom: {
    baseHref: 'https://mypublicdomain.com/assets/,
  },
});
Suggest Edits

identify()

 

Each time a page loads from a user you can identify, you'll want a bit of JavaScript to call the LogRocket.identify function to associate your own application-specific id with the active user. We refer to these identifiers as "UIDs".

LogRocket.identify(uid);

This will associate the session with the given user, so that you can search for sessions from a give user id. If you do not provide a UID the user will be assigned a random one.

Example UIDs

You can use any string which uniquely identifies the user of your application, such as a database id, an email, or a username:

LogRocket.identify('123456') // an ID from the database
LogRocket.identify('[email protected]') // the user's email

Specifying user traits

LogRocket.identify also takes a second optional JSON argument containing a key/value pair of traits that you'd like to associate with the given user. If the name and email or keys are given they will be displayed instead of the userID:

LogRocket.identify('123456', {
  name: 'John Smith',
  email: [email protected]',
  subscriptionType: 'premium',
});

If you'd like to update an already-identified user's traits, call LogRocket.identify() without the user_id argument:

// Assuming you already called LogRocket.identify('USER_ID');

LogRocket.identify({
  subscriptionType: 'enterprise',
  totalSpend: 15000,
});

Troubleshooting

Here a few gotchas to avoid while using LogRocket.identify:

  • LogRocket.identify only accepts strings as the first argument, make sure to cast any argument to a string before calling this functions.
  • There is no need to call LogRocket.identify for anonymous or logged out users - we use sessionStorage to persist sessions across pages for logged-out users.
  • If LogRocket.identify is called multiple times during a recording, you can search for any of the identified users in the session.
Suggest Edits

log()

Log additional application data.

 

LogRocket automatically instruments console.log calls (see console). If you'd like to log data but not have appear in the console while developing, you can call any of these methods:

  • LogRocket.log
  • LogRocket.info
  • LogRocket.warn
  • LogRocket.debug
  • LogRocket.error
LogRocket.log('foo', { bar: 'baz' });
Suggest Edits

track()

Track custom actions that your users perform

 

If you use an analytics tool, you likely track custom events to measure your users in-app behavior. Use LogRocket.track() to make these events accessible in LogRocket.

LogRocket.track() accepts a single String argument:

LogRocket.track('Registered');

You can then search over these events in the LogRocket Admin Dashboard:

Suggest Edits

reduxMiddleware()

Log every Redux action in your app and the associated state.

 

To add Redux logs to a LogRocket report, you need to add a store middleware to your Redux store by calling LogRocket.reduxMiddleware()

import { createStore } from 'redux';

const store = createStore(
  reducer, // your app reducer
  applyMiddleware(LogRocket.reduxMiddleware())
);

If you use other middlewares, LogRocket should be the final middleware:

import { applyMiddleware, createStore } from 'redux';

const store = createStore(
  reducer, // your app reducer
  applyMiddleware(middlewares, LogRocket.reduxMiddleware())
);

Configuration

An optional configuration object can be passed into LogRocket.reduxMiddleware(config).
This object can be used to sanitize the redux state and/or redux actions before they are logged.

stateSanitizer
optional - function

The stateSanitizer function can be used to scrub the redux state.

To scrub the state return a modified copy of the state.

LogRocket.reduxMiddleware({
  stateSanitizer: function (state) {
    return {
      ...state,
      removeThisKey: undefined,
    };
  },
});

Immutable.js

If you are using Immutable.js, LogRocket automatically serializes the Immutable state via the toJSON() method.

actionSanitizer
optional - function

The action sanitizer can be used to scrub or ignore an action.

To ignore the action return null.
To scrub the action return a modified copy of the action.

LogRocket.reduxMiddleware({
  actionSanitizer: function (action) {
    if (action.type === 'ignoreThis') {
      return null;
    }
    return action;
  },
});
LogRocket.reduxMiddleware({
  actionSanitizer: function (action) {
    return {
      ...action,
      removeThisKey: undefined,
    };
  },
});

Performance and Bandwidth Usage

We compress all actions and state objects to a binary format, and perform diffs on your Redux state to minimize the data over the network.

Suggest Edits

getSessionURL()

Access the URL of the associated LogRocket session.

 

Every user session is associated with a unique session URL. See What defines a session? for information on what determines a unique session.

Use LogRocket.getSessionURL() to fetch the URL that can be attached to crash reports and support tickets. See Integration for more details.

LogRocket.getSessionURL(function (sessionURL) {
  console.log(sessionURL);
});

Using .sessionURL directly

You can also use LogRocket.sessionURL directly, but this might return null in cases when the LogRocket script has not been fully loaded. Integrations that require synchronous execution can use this API. For example:

Raven.setDataCallback(function (data) {
  data.extra.sessionURL = LogRocket.sessionURL;
  return data;
});
Suggest Edits

startNewSession()

End the current user session and start a new session.

 

Call LogRocket.startNewSession() to end the current user session, and begin a new session. The new session will appear separately in the LogRocket dashboard.

By default, LogRocket will start a new session after 30 minutes of inactivity as described in "What defines a session?".

The associated user will default to the previously identified user. To change the active user of the session, call LogRocket.identify at some point after calling LogRocket.startNewSession():

// Start a new session associated with a different user.

LogRocket.startNewSession();
LogRocket.identify(newUserId, {
  email: userEmail,
  name: userName,
});

LogRocket.getSessionURL(sessionURL => {
  console.log(sessionURL);
});
Suggest Edits

version

Get the LogRocket script version

 

The SDK version can be accessed by the "version" property.

LogRocket.version