Getting started with LogRocket; Fixing productivity issues with your App.
For the thousandth time, you test! On Chrome, Firefox, Safari, Edge, Opera, Midori (wait, what the hell is that?) and Internet Explorer (even though we laughed at the memes, we’re all to scared to pull the plug and leave our dear IE out of the equation). For mobile and web; you’re leaving no stone unturned here. Your app is going to change the world! It’s going to change how humans control machines - or how machines control humans (there’s no limit to how crazy these ideas can get, believe me). You’ve got so much in store for this app that it’s all… just… so…..
Buddy, you better wake up from your reverie. Your app is going to have bugs! Sorry if I hurt your feelings, (part of me didn’t intend to really) but this isn’t High School Musical. We’re going to have issues here; issues with users who don’t even know their way around, server issues, even issues with the kind of folks who don’t have working Wi-Fi drivers on their device yet, download Xender and then give it a one star review. The bad news is, there will always be demons, the good news is we can keep real-time track of these demons, where they are coming from and how to send them back into the pit.
Enter LogRocket! A pro JavaScript tool from the stables of Matt Arbesfeld and Ben Edelstein, it was designed for the “once-in-a-while-I’m-confused” software developer (that’s you and I really). When your app goes gold, LogRocket records sessions of every action users carry out, captures logs and reproduces bugs. This in general helps fix issues faster. It’s high time you stopped guessing why bugs happen, come with me.
Installing LogRocket
First of all, we need to visit LogRocket to obtain an app ID for all our interactions.
Then we install via npm by logging the following on our CLI:
npm i --save logrocket
In the opening lines of our code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
Collecting feedback with LogRocket.
The primary function of LogRocket is to collect user data in various ways, this helps you to debug issues quicker and understand how users behave. Other ways of accomplishing this include:
- Automatically capturing Redux actions, Redux state and console logs from your app.
- Captures real live videos of users on your app, a feature made possible with the aid of MutationObserver API. LogRocket lets you replay these videos so you can have a hands on approach to the problem as well as identify corresponding user behavior.
- Handling network requests and responses. LogRocket does this by making use of the
XmlHttpRequestandfetchAPIs to get request and response data from your app, taking into account status codes, headers and bodies. - Capturing performance data. Although still in Alpha, your app’s Frames Per Second (FPS), bandwidth and memory usage are captured so as to assist you have a better understanding of a user’s general experience with your app.
Data Privacy with LogRocket
With all this user data flying around, it’s only right to know about how discreet LogRocket is with handling data, right? Well LogRocket takes privacy serious enough to hide user data such as passwords, personal data and credit card data. Knowing there’s a line to cross when gathering enough information to help with debugging is key here. To implement this, LogRocket’s SDK was designed to allow developers make decisions on what kind of information to exclude from LogRocket reports (need I say that since privacy and security can never get old, constant updates are being made to LogRocket and features are added). The SDK accomplishes this by adding the class name _lr-hide to any DOM element you want to make private. This way any DOM element(s) that the private DOM element is a parent of won’t leave the parent browser. Form data and password fields are not excluded from this, _lr-hide can also be added to input and textarea DOM elements.
Security with LogRocket
As previously stated, the significance of security and handling user data cannot be stressed on enough. It’s important both users and engineers feel secure with any tools used to enhance an app. While bearing in mind that the most effective way to stay secure is to avoid unnecessary exposure of sensitive data in the first place, here are a couple of ways LogRocket keeps you covered:
- It blocks third party cookies; LogRocket does not create a unique profile to track users across domains that are not related to the user.
- When using LogRocket with your app, you can block recording and collection of any Personally Identifiable Information (PII) inserted by keystroke in forms or defined by users. LogRocket does this through a series of mediums, some of which are:
- An API developed by LogRocket to identify and block PII of any kind before it leaves the user’s browser. This tool also enables users to easily identify PII fields and thus maintain astronomical levels of data security.
- Blocking client-side keystrokes; This occurs by default, inputs of passwords, credit cards and other sensitive fields are not captured by LogRocket.
3. It complies with certain important rules and policies on security and PII regulation, a few of which are Health Insurance Portability and Accountability Act (HIPAA), Payment Card Industry Data Security Standard (PCI DSS) and the Gramm-Leach-Bliley Act (GLBA) to ensure that it doesn’t receive any personal information from its users and that any data it processes remains anonymous.
Performance with LogRocket
Aha! The juicy part… With engineering and applications, performance is key. Having a bogged down app should be the last of your worries when using LogRocket. It improves and ensures that performance is at an optimum level by:
- Adding a small shim of negligible size (< 8kb) to intercept browser APIs. For successful interception, the shim has to load before the page loads. The entire process adds a very negligible increase in page loading time.
- Utilizing User Interface (UI) threads. Because the most limited resource in the browser is CPU utilization on the UI thread, LogRocket was built to perform all long-running tasks in a worker thread. This decreases workload on the main thread and ensures that the only work done on the main thread is sending data to the worker thread.
- Limiting the bandwidth usage by browsers via the aid of a highly optimized binary compression format. This ensures that all compression and loading is done on a worker thread.
There you have it! Monitoring deployed and in-production apps couldn’t be more seamless. I could go on and on but you’ve got to see things for yourself here. I stumbled on LogRocket after having a torrid time tracking issues and what not, I can only wish I’d known earlier, lol :)... Cheers!
