User Monitoring with LogRocket and ReactJS
Getting started with Real-Time User monitoring with LogRocket and ReactJS
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.
- On project creation, it will generate an App ID, which can be seen below along with the installation and integration steps.
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');
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.
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.
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.
Snapshot for same
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!