Virendra Oswal
Virendra Oswal's Blog

Virendra Oswal's Blog

User Monitoring with LogRocket and ReactJS

User Monitoring with LogRocket and ReactJS

Getting started with Real-Time User monitoring with LogRocket and ReactJS

Virendra Oswal's photo
Virendra Oswal
·Aug 24, 2022·

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Introduction
  • Getting Started with LogRocket:
  • Integrate with React Application
  • Resources

Real User Monitoring (RUM) gives you insight into how well actual users of your application are performing. You may track front-end performance and see how your optimizations are enhancing the user experience by using a Real User Monitoring tool.

To close the gap between application performance and its effects on user experience, RUM technologies have developed. Teams may focus on the best performance possibilities, deliver a quick application, please customers, and accomplish business goals with the aid of user-level data offered by a RUM tool.

It also helps to identify user accessibility issues on how users are working with your application.

Introduction

As per official documentation

"LogRocket helps you understand problems affecting your users so that you can get back to building great software. LogRocket combines session replay, performance monitoring, and product analytics – empowering software teams to create the ideal web and mobile product experience"

Recently we build RarityRank, a SaaS platform to help people find rare NFTs in the collection, we wanted to know how users are spending time with our application.

  • Questions like are they viewing older Revealed Contracts?
  • What Search Filters are they using the most?
  • What are they doing if the response is slow from the server?
  • Are they bouncing quick enough on visiting it, anything turning them off?

So we found this tool LogRocket, which helped us answer the above questions. Easy to integrate with most of the latest UI frameworks/libraries such as React, Angular, NextJS etc.

Getting Started with LogRocket:

  • We first need to generate an application ID, which we will inject into our application.
  • Go to LogRocket App Dashboard, and create an account if not created.
  • It will ask a few questions, which are self-explanatory about the project name, and collaborators. image-1.JPG
  • On project creation, it will generate an App ID, which can be seen below along with the installation and integration steps. image-2.JPG

With this done, we have all required to integrate quickly into the sample react app we will create.

Integrate with React Application

If you have an existing react application, you can follow the steps post-creation of our sample React application.

Create a new react app using

npx create-react-app logrocket-sample

In this case, however, to get some functionality, we are going to pick a random React application named Calculator created which was referenced on the official React Community Example pages.

Install LogRocket SDK as below

npm i --save logrocket

Import and initialize LogRocket into index.tsx(index.js) as below, so that React application injects into LogRocket application.

import LogRocket from 'logrocket';
LogRocket.init('81husr/demo-react-app');

image-5.JPG

Post injection Reboot the server.

We will perform some random actions on our Calculate Application so as to generate events, we will visit locahost:3000 for the same.

image-3.gif

Post that we will visit our dashboard for the LogRocket application which is mapped to our react application.

We can see 2 Anonymous sessions because we don't have user management as a part of our application, else we can identify with the specific users who did what actions in a given session with this API calls.

image-4.JPG

We see a lot of information on the summary page like OS, Browser, Geolocation for a user session, and a number of actions done.

On clicking one of the sessions, it will replay the entire user session captured, network calls, navigation, and a lot of network details to give us an idea in terms of the information we need.

iamge-66.gif

Snapshot for same

image.png

Voila! It just took couple of minutes to get this setup. We can now do Real-Time user monitoring and identify application bottlenecks and provide a great user experience.

There are many more features than this, but we need to upgrade our plan. All available features can be seen on their Pricing Page

Resources

Thank you for reading, If you have reached it so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback and suggestions!

I would love to connect with you at Twitter | LinkedIn.

 
Share this