Real User Monitoring with Raygun Pulse

Overview

A few months ago we covered Raygun’s excellent error and crash reporting platform. Today, I would like to introduce Raygun Pulse. Pulse is a brand new service that launched just a couple of days ago that provides user monitoring and insights for your application.

What makes Raygun Pulse unique is that instead of getting an aggregate report like you would from other monitoring tools (e.g. Google Analytics), Raygun Pulse allows you to measure the experience of each individual user in your application. You can track individual load times for each user, gain real time performance insights and pinpoint issues that would otherwise be difficult – such as issues across certain devices or browsers.

Benefits of Real User Monitoring

Before we jump into the tutorial, let’s quickly cover why monitoring your apps performance is essential. Writing software is hard. Writing software with excellent performance is magnitudes more difficult. Understanding how your users use your app can go a long way in helping prioritize how you write code.

Since Pulse provides real time insights into performance and usage, you can rest a little easier knowing:

  • Performance differences between Mobile and Desktop users
  • Changes in performance following deployments, so you’ll know if things improved or got worse for the users
  • Real time analytics and diagnostic information on app crashes and errors
  • Answers to performance questions that you may not even have considered

In today’s tutorial, we will build an application integrated with Raygun Pulse. We will then showcase the major features of the Raygun Pulse integration and how it can help us build and maintain better applications. Let’s dive in!

Our Application

We will build Ado’s Shop, an online store straight from the future. For this application, we’ll keep it fairly simple – NodeJS, Express, Jade, Bootstrap and of course Raygun Pulse. The focus of the app will be on Pulse integration and features, so we won’t dive too deeply into the how and why for the rest of the stack. Additionally, we will not be setting up Pulse Crash Reporting either. If you are interested in learning more about Pulse Crash Reporting, check this article out. Here is what our application will look like:

ados-shop

On the server side of things we will register two routes, the homepage and the product details. On the front end side of things, we will create two views, the index and product details view. Raygun Pulse, like Google Analytics, runs on the front end, so that’s where we’ll do our integration. The caveat here is though, if the script cannot run because a route doesn’t exist for example, no data will be sent to Pulse. After we have our app and server setup, we’ll dive into the the Raygun Pulse dashboard and see how our app is doing.

So let’s dive straight into the code. Our server setup is as follows:


var express = require('express');
var app = express();

app.set('views', './views');
app.set('view engine', 'jade');

app.get('/', function(req, res){
    res.render('index');
})

app.get('/product/:id', function(req, res){
    var productId = req.params.id
    var product = {};
    if(productId == 1){
        product = { name : 'Fallout 5', shipping: '11/11/2015'}
    } else if (productId == 2){
        product = { name : 'Mac Surface Book VII', shipping: '11/5/2015'}
    } else if (productId == 3){
        product = { name : 'You x2', shipping: '11/7/2015'}
    }
    res.render('product', product)
})
app.listen(3000);

On the front-end side of things, for this tutorial we chose the Jade templating engine. Jade templates compile into HTML on the server. Let’s take a look at our front-end code below:


html
    head
        script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js')
        link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')

    body
        header(class='container')
            nav(class='navbar navbar-default')
                div(class='navbar-header')
                    a(href='/' class='navbar-brand') Ado's Shop
                    ul(class='nav navbar-nav')
                        li
                            a(href='/random') Random
        div(class='container')
            div(class='row')
                div(class='col-sm-8 col-sm-offset-2 jumbotron')
                    h2(class='text-center') Welcome to Ado's Shop!
                    p  This unqiue shop already knows what you want to buy. Instead of wasting your time with options and specials - our algorithm from the future has scanned your brain and figured out what you need. Don't believe us? Check out your personal recommendations below!
            div(class='row')
                div(class='col-sm-4')
                    h2(class='text-center') Fallout 5
                    p Set 20 years after the event of Fallout 4, venture back to the wasteland and complete the adventure. The death claws have formed an unholy alliance with the Tunnel Snakes shifting the balance of power to evil. You are S.P.E.C.I.A.L - fix it!
                    br
                    a(href='/product/1' class='btn btn-block btn-success btn-lg') Gimmie!*
                    br
                    p(class='small') * VR Experience, avoid prolonged play as radiation is real
                div(class='col-sm-4')
                    h2(class='text-center') Mac Surface Pro VII
                    p The ultimate laptop. Featuring a octa-core 4.0Ghz CPU, 32GB DDR4 RAM and 3x GeForce Titan GPU this laptop has enough power to run your life. Up to 24 hours of battery life ensures it goes where you go. Did we mention it is also a tablet and phone?!?
                    br
                    a(href='/product/2' class='btn btn-block btn-success btn-lg') 1-Click Buy*
                    br
                    p(class='small') * Drone delivery within 15 minutes.
                div(class='col-sm-4')
                    h2(class='text-center') You x2
                    p What's better than you? Nothing! So why not have more of you! Utilizing our latest technology (co-developed with Calico) - we can create another you. While you kick back and enjoy Fallout 5, You x2 will take care of all your other responsibilities.
                    br
                    a(href='/product/3' class='btn btn-block btn-success btn-lg') Buy Now*
                    br
                    p(class='small') * Cannot be purchased by another You x2
                    p(class='small') * 30% chance You x2 will be evil

Now that we have our application setup, let’s go ahead and install Raygun Pulse. The process for installing Pulse is fairly simple and if you’ve ever installed 3rd party software into your apps this should be a breeze.

If you haven’t already – head over to Raygun and create an account. Once your account is created you will be able to create an app and get a unique API key for your application. Setting up an app is easy as:

1) Name Your App

Give your application a unique and memorable name.

raygun-setup-1

2) Opt-in to Pulse

Raygun offers additional Crash Reporting features which we will not be covering in this tutorial.

raygun-setup-2

3) Integrate Into Your Application

The last is to add the Pulse monitoring code in your codebase.

raygun-setup-3

Let’s integrate Pulse into our app. We’ll include the Raygun Pulse library from their CDN and then we’ll instantiate Pulse in our application with just a few lines of code and our API key. Once again we are using Jade to write the markup, but we have also included an example in plain HTML on how to setup Pulse in your application.


html
    head
        script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js')
        link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')

    // Including the Raygun Pulse library
    script(type='text/javascript').
        !function(n,e,a,t,r,s,c){n.RaygunObject=r,n[r]=n[r]||function(){(n[r].o=n[r].o||[]).push(arguments)},s=e.createElement(a),c=e.getElementsByTagName(a)[0],s.async=1,s.src=t,c.parentNode.insertBefore(s,c)}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
    // Instantiating Raygun Pulse for our application
    script(type='text/javascript').
        rg4js('apiKey', 'YOUR-API-KEY-GOES-HERE');
        rg4js('enablePulse', true);
        rg4js('enableCrashReporting', false);

//We are going to truncate the body content as it is unnecessary at the moment

And in just plain ol’ HTML:


<html>
    <head>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

        <!-- Load the Raygun Pulse library -->
        <script>
            !function(n,e,a,t,r,s,c){n.RaygunObject=r,n[r]=n[r]||function(){(n[r].o=n[r].o||[]).push(arguments)},s=e.createElement(a),c=e.getElementsByTagName(a)[0],s.async=1,s.src=t,c.parentNode.insertBefore(s,c)}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
        </script>
        
        <!-- Instantiate Raygun Pulse for our application -->
        <script>
            rg4js('apiKey', 'YOUR-API-KEY-GOES-HERE');
            rg4js('enablePulse', true);
            rg4js('enableCrashReporting', false);
        </script>
    <head>
    <!-- We have truncated the body tag and content as in the previous example -->
</html>

Now that we’ve got an application and have succesfully installed Raygun Pulse on it – let’s head over to raygun.io and see what Pulse can do for us.

Raygun Pulse Dashboard

dashboard-1

The Raygun Pulse dashboard is separated into seven sections. Live, Performance, Sessions, Users, Browsers, Platforms and Geo. We will cover the different sections and their uses in detail later. The feature that I really want to focus on is the individual user monitoring, so before we go into further detail, let’s set up individual user monitoring for our application.

The first thing we’ll need to do is setup our shop to have user accounts. As creating and authenticating users is out of scope for this tutorial, we’ll create a couple of routes that mock a user account and we’ll store this data in a cookie. To accomplish this we’ll create 3 new routes for 3 individual user accounts. The routes will be /user/ado, /user/chris and /user/holly, and visiting any of these routes will set our user accordingly.


var express = require('express');
var app = express();

app.set('views', './views');
app.set('view engine', 'jade');

app.get('/', function(req, res){
    res.render('index');
})

app.get('/product/:id', function(req, res){
 // Truncating code from above
 ...
})

app.get('/user/ado', function(req, res){
    res.cookie('userId', 'ado@scotch.io');
    res.cookie('email', 'ado@scotch.io');
    res.cookie('firstName', 'Ado');
    res.cookie('fullName', 'Ado Kukic');
    res.render('index');
})

app.get('/user/chris', function(req, res){
    res.cookie('userId', 'chris@scotch.io');
    res.cookie('email', 'chris@scotch.io');
    res.cookie('firstName', 'Chris');
    res.cookie('fullName', 'Chris Sevilleja');
    res.render('index');
})

app.get('/user/holly', function(req, res){
    res.cookie('userId', 'holly@scotch.io');
    res.cookie('email', 'holly@scotch.io');
    res.cookie('firstName', 'Holly');
    res.cookie('fullName', 'Holly Lloyd');
    res.render('index');
})

app.listen(3000);

To send this user information to Raygun, we’ll use the RayGun setUser API and pass along our unique users. Take a look at the code snippet below to see how you can uniquely identify your app’s users below.


html
    head
        script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js')
        script(src='https://cdnjs.cloudflare.com/ajax/libs/Cookies.js/1.2.1/cookies.min.js')
        link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')

    // Including the Raygun Pulse library
    script(type='text/javascript').
        !function(n,e,a,t,r,s,c){n.RaygunObject=r,n[r]=n[r]||function(){(n[r].o=n[r].o||[]).push(arguments)},s=e.createElement(a),c=e.getElementsByTagName(a)[0],s.async=1,s.src=t,c.parentNode.insertBefore(s,c)}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
    // Instantiating Raygun Pulse for our application
    script(type='text/javascript').
        rg4js('apiKey', 'YOUR-API-KEY-GOES-HERE');
        rg4js('enablePulse', true);
        rg4js('enableCrashReporting', false);
    
    // Identify the user and pass it along to Pulse
    script(type='text/javascript').
        rg4js('setUser', {
            identifier: Cookies.get('userId'),
            isAnonymous: false,
            email : Cookies.get('email'),
            firstName: Cookies.get('firstName'),
            fullName: Cookies.get('fullName')
        })

//We are going to truncate the body content as it is unnecessary at the moment

Now that we have our app fully setup and receiving unique data per user. Let’s take a look at the different sections of the Raygun Pulse dashboard and how they can help us optimize our applications.

Live

dashboard-1

The Live tab displays a real-time dashboard for your application. Key data points here are the Health Score, which measures your current site responsiveness, Load Time, which tracks average load time of your application based on recent activity and the number of active sessions and users. Additionally, on this tab you can see a map of where your users are coming from as well as the most recent users accessing your application.

Performance

performance-2

The Performance tab measures the performance your users are experiencing when accessing your application. On this tab, you can gain insights on average load times for your application, slowest loading pages as well as a breakdown of what could be causing performance issues for your application. The performance tab will give you a general overview of how your application is doing.

performance-2-2

You can also click on individual pages to get more information on their performance. Clicking on individual pages can get you some very useful insights on how your app is responding to requests. You even get a breakdown of what constituted a request and how long each process took all the from the DNS lookup to any child assets being loaded.

Sessions

sessions-3

Sessions allow you to deep dive into individual users, whether they be identified or anonymous, actions on your application and get an understanding of how your application is being used as well as how it’s performing for individuals. Each session is ripe with useful data which includes user information, device information, an experience rating, session length, pageviews, average load time and even errors experienced.

Additionally, for each session you will be able to see which pages were visited, how long they took to load, total time spent on each page and a calculated page performance and user experience rating. This information is very valuable when measuring both individual and overall application performance.

Users

users-4-a

The Users tab provides insights on perhaps the most important aspect of your application, your users. Here, you can get an aggregate of user satisfaction, number of users using the application, new vs returning users, and the amount of users that had a crash free experience. The fun doesn’t stop there, you can also click on individual users to see their entire history with your application.

users-4

Clicking into an individual user, you get the full picture of that users experience with your application. You can see how often they use your app, on average the amount of time spent within your app and more. You can also see each one of their sessions and get a full breakdown of any errors they experienced while using your application.

Browsers

browsers-5

The Browsers tab breaks down the browsers used to access your application. All the big players are represented here including Chrome, Firefox, IE/Edge, Safari, Opera and the rest are placed in the Others category. Additionally, you can see the browser version used for each browser and the average load time per browser. This data can help you decide which browsers to support and even which browsers may need some extra attention.

Platforms

platforms-6

Similar to the Browsers tab, the Platforms tab gives you a breakdown of the different operating systems that hit your application. Here the breakdown is Windows, Mac OS X, Linux (all distributions), iOS, Android and even Windows Phone gets some love. Just like with browsers, you get the platform version and average load times for each operating system.

Geo

geo-7

The Geo tab gives you a geographical breakdown of your users. Spread across the North America, Europe, Asia, Oceania, South America and Africa. From here, you can gain insights on your apps performance across geographical areas. Deep diving into the geographical areas, you can easily see a breakdown of where your users are coming from and know which areas to target.

Conclusion

In today’s tutorial, we built a simple shop from the future and integrated Raygun Pulse to monitor individual user performance. We showcased how Raygun Pulse can be used to gain deep insights and understanding on how your apps performs for your users.

Raygun Pulse offers a variety of tools to monitor performance but it’s bread and butter is the individual user and session tracking. We showed how easy it is to set up individual user tracking with just a few lines of code. Raygun Pulse just launched a few days ago and you can try it free here.

This post was sponsored via Syndicate Ads.