Testing on localhost/VPN

Using LogRocket with an internal server or local dev environment

LogRocket supports capturing sessions from local development or internal servers, but with some conditions.

Our recording process snapshots copies of resources, such as JavaScript, CSS, and images, to ensure proper replay of user sessions. We do this so that we can show you correct recordings even if you change the content on your site.

However, LogRocket can't capture a resource if it's not accessible from our servers. This might happen if you are using localhost or are on a private VPN. If this is the case, LogRocket has a "fallback mode" which will fallback to using the "live" version of the resources during playback.

"Fallback mode" only works if the browser that you are using to watch user sessions can reach your application server during replay. Additionally, the application server must serve assets over https, or else the browser will block loading of the local assets.

There a few workarounds to this problem which allow you to use LogRocket in local development:

Using Ngrok for local testing

One solution is to use ngrok to make your application server accessible to our servers.

If you have a webserver running at localhost:3000, follow these steps to ensure that replay mode works correctly:

  1. Install ngrok from https://ngrok.com
  2. Run ngrok with your localhost port: (ie. ngrok http 3000 if you are running a server at localhost:3000)
  3. Open your application at the specified ngrok URL (ie. https://596cae24.ngrok.io or similar).
  4. View the associated LogRocket recording.

πŸ“˜

ngrok

When using ngrok, make sure to use the https link to view your website (e.g. https://cc6004ec.ngrok.io) rather than http.

Enabling browser "insecure mode"

If you can't make your localhost server accessible to the public internet, you can use "fallback mode" by changing your browser settings.

Firefox - Enable mixed content
Chrome - Run Chrome with the insecure-content flag:

  • Mac OSX: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-running-insecure-content &

These workarounds are only necessary when trying to test on a locally-running server. Real production traffic can be served over http or https and LogRocket will be able to snapshot your resources without any additional work from a developer.