Session recording issues

Sessions are not appearing

Due to Content Security Policy

After adding the script to your app, visit a page with LogRocket running and open your browser's developer tools. (make sure that you are connected to the internet, too)
Check for any error messages mentioning LogRocket, like this:

You'll have to add the following to your site's content security policy:

Content-Security-Policy: child-src 'self' blob:; worker-src 'self' blob:; script-src 'self' https://cdn.logrocket.io https://cdn.lr-ingest.io; connect-src https://*.logrocket.io https://*.lr-ingest.io

Due to blocked Javascript

The LogRocket recording script (SDK) might be blocked by a browser extension or network security policy. Open your browser's developers tools to check if the requests are failing. If they are, be sure to add an exception for the logrocket.io domain.

Due to LogRocket.init() call being placed incorrectly

Ensure that LogRocket.init() is called before other code is loaded in your application:

// DOES NOT WORK!
import LogRocket from 'logrocket';

LogRocket.init('foo/bar')
import './myOtherModule';

Instead, make sure to import a separate file which contains LogRocket:

// in entry file
import './logrocketSetup';
import './myOtherModule';

// in logrocketSetup.js
import LogRocket from 'logrocket';

LogRocket.init('foo/bar');

Due to recording in an unsupported browser

If you are recording a session in an unsupported browser, the SDK will throw an exception which will be visible in the developer console. See this page for a list of supported browsers.

Sessions ending prematurely

Like the above problem, this can be caused by a number of things:

Not putting LogRocket on every page

If your app is not a single-page application, the LogRocket.init() call must be put on every page. You can tell this is the cause if you have multiple sessions ending when a user navigates to the same page without init() called.

Sending too much data too quickly

Although extremely rare, this has been known to happen because of bugs which result in too many state changes that are queued to be sent to LogRocket. When this happens, LogRocket will stop recording to save on user bandwidth and print a warning to the console.

HTML `<base>` element missing an `href` attribute

The HTML <base> element specifies the base URL to use for all relative URLs in a document. If your HTML includes a <base> element with no href attribute, your sessions may not play correctly. To fix, add the missing href attribute and record new sessions.

Sessions are broken up across subdomains

If you're seeing multiple sessions created as users traverse different subdomains on your site and you'd prefer to keep these contained to a single session, pass the rootHostname option when calling LogRocket.init().

Styles are not appearing in recordings

LogRocket can sometimes take a few minutes to fetch the CSS from your website. If you're still not seeing the styles after ~10 minutes, then make sure the following are true:

You are running on a publicly-available domain: Testing on localhost/VPN.
You are not using sourceMap as an option in your Webpack css-loader config.
Your CDN keeps old versions of your assets publicly available. For example, if you have a css file named main-[hash].css, LogRocket's backend needs to be able to fetch this file to add it to the video. Alternative, to make things simpler you could put the hash in the query part of the filename (e.g., style.css?[hash]). This should be very easy to enable in your CDN / storage provider, and is likely already enabled.

Network requests are missing or not being recorded

This is often caused by other libraries interfering with LogRocket's network capture functionality.

isomorphic-fetch

Some libraries like isomorphic-fetch will not work if you use the exported fetch:

// DO NOT DO THIS:
import fetch from 'isomorphic-fetch';
fetch(...);
      
// DO THIS:
import 'isomorphic-fetch';
fetch(...);

whatwg-fetch

In addition, make sure that you're not setting whatwg-fetch to the window global before importing LogRocket:

// DO NOT DO THIS
new webpack.ProvidePlugin({
  fetch: 'exports-loader?self.fetch!whatwg-fetch'
})

Instead, just import whatwg-fetch normally into your bundle:

// DO THIS

import 'whatwg-fetch';
import LogRocket from 'logrocket';

LogRocket is a singleton, so you can load it from any place in your application after this point.

apollo-client

If network requests are not appearing when using apollo client, add this code to your application:

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';

const fetcher = (...args) => {
  return window.fetch(...args);
};

const client = new ApolloClient({
  link: createHttpLink({ 
    uri: 'https://yourgraphql.api',
    fetch: fetcher,
  }),
  cache: new InMemoryCache()
});

Other fetch libraries

Be sure that LogRocket is imported after any library which wraps XHRHttpRequest (e.g. axios, xhr).