Introduction to LogRocket

3…2…1…Blast off!!!! Image Source: SpaceX, flickr.

Introduction

Logging is extremely important, and there are several options available: FullStory, Inspectlet, and more. I’ve recently dived into a new logging tool called LogRocket…and it’s awesome. They even have integrations for Angular (ngrx middleware), Vue (Vuex plugin), and MobX!

Setup

The first step is to sign up on LogRocket’s website. Then, you’ll need to make a project name. You’ll receive a 6-character key, and you’ll use this with your project name as YOUR_APP_ID in your initialization setup in your app (see below). Once you’re ready to roll, you’ll start LogRocket by inserting two lines of code into your app. Yes, it’s that easy. Two lines gives you access to so much (user session video playback, console logs, Redux actions, etc).

import LogRocket from 'logrocket';
LogRocket.init(YOUR_APP_ID); // TA-DA! Wow! So easy!

Even if you put this in your local code, you’ll immediately see the results in your LogRocket dashboard. You gain god-like powers and become omniscient, able to see everything a user does. Now, you should see in your dashboard that the user is named “Anonymous User”, which isn’t really helpful. How can you keep track of which session is which? Let’s now identify our users.

LogRocket.identify('123456', {
  name: 'Sonic the Hedgehog',
  email: 'gottacodefast@gmail.com',
  // Insert custom properties called "User Traits" below
  subscriptionType: 'premium',
  favoriteFood: 'chili dogs'
});

Now, if you reload your app and navigate to the LogRocket dashboard (you may need to refresh a few times), you’ll see that the “Anonymous User” has become “Sonic the Hedgehog”, which is much cooler in my opinion. Additionally, you’ll see the email appear underneath the name as well. The “name” and “email” fields are special properties that LogRocket uses for the dashboard. The “123456” in the code above is the UID, and it can be used to search your sessions for users with a particular ID. This allows you to keep track of which sessions belong to which user. The custom properties you specify after that are used for search filters. You can search across all your sessions for users that maybe like chili dogs.

For recording Redux actions, you’ll need to follow their guide and insert this into your middleware:

import { applyMiddleware, createStore } from 'redux';
const store = createStore(
  reducer, // your app reducer
  applyMiddleware(middlewares, LogRocket.reduxMiddleware())
);

The LogRocket middleware should be the very last middleware applied, so it can properly log everything. This makes sense because you may have other middleware intercepting actions or firing even more actions (which is common if you’re using Redux-Thunk or Redux-Saga middleware), and thus you want to make sure you don’t miss anything.

Features

LogRocket has some really cool features, including:

• User session video playback: Grab some popcorn because you actually can see everything your user sees in real time. You see a legit video of everything they did that led up to an error you saw in your monitoring tools. Of course this feature is available in other logging tools such as FullStory, but you can also see every Redux action fired during the video as well, which is perfect for us React/Redux folks (VueJS still has a special place in my heart though! ❤).
• IP Address and User-Agent Tracking: LogRocket keeps track of the IP address of each session, but it can also tell you which browser the user is using, which is extremely useful for troubleshooting browser-specific problems.
• Action logging: You can see all the Redux actions fired by your application as well as the payload they were holding at the time they were fired.
• Network request/response logging: You can see all network requests from the moment you navigate to a certain endpoint. This can be very useful for logging, yes, but also onboarding new folks to your application. Sometimes, it’s confusing to learn about all the redirects that happen when you hit a single endpoint before it actually renders the page. You can spend a lot of time digging through the code, or just view the order of the network requests. Of course, you can always use Chrome Dev Tools too, but LogRocket is more fun :)
• Savable filters: LogRocket lets you insert custom properties called User Traits into your logs, which lets you make up key-value pairs that provide more info about your user or session. Sometimes, however, you want to search for a key with a particular value quickly. You can save search filters, so your team (or yourself) can access sessions with particular User Traits quickly once you define them.
• Integrations with other logging tools: LogRocket integrates with lots of other logging tools such as Sentry, Airbrake, Google Analytics, and more. You can even send the URL of the session replay along, which will make those days of on-call more entertaining. Again, grab the popcorn and watch the user rage click when they’re having trouble with your website.
• Quick customer chat support: I don’t know if Matt or Ben ever sleep because I always see them online. Whenever I have questions, I open up the Intercom window that is all over the LogRocket site (the purple box on the bottom-right corner of your screen) including the dashboard page, and I ask some simple questions. They’ve been super friendly and reply back quickly.
• And there’s even more features! Read docs.logrocket.com!

The SDK/API

If you go to docs.logrocket.com, you’ll find that they have amazing documentation. It’s very thorough, and it can answer many of your questions. The SDK is very simple and gives you the ability to ignore or scrape data before it is sent off to LogRocket’s servers. This is very useful for preventing sensitive information from being stored in remote servers. This flexibility and simple API makes LogRocket a very attractive logging tool. I won’t go into the details, but you should know that you have control of filtering/scrubbing out the following content:

• HTML/CSS: You can add the “_lr-hide” class to any HTML element in your app to prevent LogRocket from storing that part of the app in their servers and therefore hide it in the video playback feature.
• Network Requests: You can completely ignore endpoints with certain keywords or hide certain information in the headers, request bodies, and response bodies. You can also ignore all requests from being logged completely if you don’t feel like whitelisting/blacklisting data you want scrubbed from the requests, which I know could take a long time.
• Actions: You can ignore actions and thus not log payloads associated with them. This is also useful for removing actions you feel are useless in logs or are appearing everywhere in your logs, clogging them up.
• State: You can scrape state from actions using the actionSanitizer function in the Redux middleware or the stateSanitizer function. Keep in mind that you will most likely use both to hide both the state in the action payload (using actionSanitizer) and the state that appears in the prevState or nextState fields of your log (using stateSanitizer).

Behind the Scenes

Let me explain how some of the magic works in LogRocket according to their documentation.

HTML/CSS/clicks/mouse recording: Video playback of user sessions is possible through the MutationObserver Web API. According to their docs, “LogRocket records a ‘video’ of your users’ sessions by logging diffs in the DOM via MutationObserver.” This allows it to capture “frames” of your HTML/CSS as well as any user clicks or mouse movements that occur. On the LogRockets dashboard, the user session video skips all frames that the user is inactive by default, but you can allow them if you want.

Action recording: This is accomplished through Redux middleware. For those who don’t know, Redux middleware is very simple to setup. It’s as simple as:

const customLogger = store => next => action => {
  if (action.type === 'my_action') {
    // logs payload whenever the 'my_action' action type is fired
    console.log('PAYLOAD: ', action.payload); 
  }
  return next(action);
}

However, you don’t have to write anything like this as mentioned above. This is just a side note to show how easy it is for anyone to make their own Redux middleware. For LogRocket, you just apply the middleware that the LogRocket team has already wrote for you, and then it starts logging your Redux actions.

Scaling and Security: LogRocket uses the Google Cloud Platform (GCP), so it builds on GCP compliance.

Pricing

Their pricing is pretty reasonable. It actually is competitive with other logging tools such as FullStory.

Free: 14 day trial with access to all features and up to 1000 sessions. Each session is 30 minutes long from the moment you use the LogRocket.init() function. For testing, you can open up new Firefox private window to initiate a new session. I found that Chrome incognito wasn’t enough to trigger a new session. I found the free version actually really useful. I can just test in a local environment, plug in two lines of code, and I’m already started with LogRocket. Then, I can play around with the LogRocket SDK to see what all I can do and how to get it integrated into my app.

Team:

• $99/month for 10000 sessions, 5 team members
• $199/month for 25000 sessions, 10 team members
• $399/month for 100000 sessions, 20 team members
• See: https://logrocket.com/pricing/ to play along with the pricing wheel

Professional:

• Custom Pricing: You’ll have to talk to them directly

My Wishlist

• The ability to export logged actions — useful for debugging local issues by importing actions in Redux dev tools.
• The ability to filter through action types to sort through giant lists of actions (for those who have them).
• A viewable list of all the custom User Traits you have defined on your LogRocket identify() function.
• Colored syntax highlighting as displayed in a picture on LogRocket’s front page. I want more color in my logs!