总览 (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.

几个月前，我们介绍了 Raygun出色的错误和崩溃报告平台。 今天，我想介绍一下Raygun Pulse。 Pulse是一项仅在几天前启动的全新服务，可为您的应用程序提供用户监视和见解。

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.

Raygun Pulse之所以与众不同，是因为Raygun Pulse无需像其他监控工具（例如Google Analytics（分析））那样获得汇总报告，而是使您能够评估应用程序中每个用户的体验。 您可以跟踪每个用户的单独加载时间，获得实时性能见解并查明原本很难的问题-例如某些设备或浏览器的问题。

Raygun Pulse的好处 (Benefits of Raygun Pulse)

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:

由于Pulse提供了有关性能和使用情况的实时洞察，因此您可以更轻松地了解：

• 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!

在今天的教程中，我们将构建一个与Raygun Pulse集成的应用程序。 然后，我们将展示Raygun Pulse集成的主要功能以及它如何帮助我们构建和维护更好的应用程序。 让我们潜入吧！

我们的应用 (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:

我们将直接建立Ado's Shop，这是一家未来的在线商店。 对于此应用程序，我们将使其保持相当简单-NodeJS，Express，Jade，Bootstrap，当然还有Raygun Pulse。 该应用程序的重点将放在Pulse集成和功能上，因此我们不会深入探讨其余堆栈的方式和原因。 此外，我们也不会设置“脉冲崩溃报告”。 如果您有兴趣了解更多关于脉冲崩溃报告，检查这个文章出来。 这是我们的应用程序的外观：

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.

在服务器方面，我们将注册两条路径，即主页和产品详细信息。 在事物的前端，我们将创建两个视图，即索引视图和产品详细信息视图。 像Google Analytics（分析）一样，Raygun Pulse在前端运行，因此我们将在这里进行集成。 但是需要注意的是，如果例如由于不存在路由而导致脚本无法运行，则不会将任何数据发送到Pulse。 设置好应用程序和服务器后，我们将深入研究Raygun Pulse仪表板，并查看应用程序的运行情况。

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

因此，让我们直接研究代码。 我们的服务器设置如下：

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

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.idvar 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:

在事情的前端，对于本教程，我们选择了Jade模板引擎。 Jade模板在服务器上编译为HTML。 让我们看一下下面的前端代码：

htmlheadscript(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')bodyheader(class='container')nav(class='navbar navbar-default')div(class='navbar-header')a(href='/' class='navbar-brand') Ado's Shopul(class='nav navbar-nav')lia(href='/random') Randomdiv(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 5p 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!bra(href='/product/1' class='btn btn-block btn-success btn-lg') Gimmie!*brp(class='small') * VR Experience, avoid prolonged play as radiation is realdiv(class='col-sm-4')h2(class='text-center') Mac Surface Pro VIIp 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?!?bra(href='/product/2' class='btn btn-block btn-success btn-lg') 1-Click Buy*brp(class='small') * Drone delivery within 15 minutes.div(class='col-sm-4')h2(class='text-center') You x2p 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.bra(href='/product/3' class='btn btn-block btn-success btn-lg') Buy Now*brp(class='small') * Cannot be purchased by another You x2p(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.

现在我们已经设置了应用程序，让我们继续安装Raygun Pulse。 安装Pulse的过程非常简单，如果您曾经在应用程序中安装过3rd party软件，这应该很容易。

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:

如果您还没有-前往Raygun并创建一个帐户。 创建帐户后，您将可以创建一个应用程序并为您的应用程序获取唯一的API密钥。 设置应用很容易，因为：

1）为您的应用命名 (1) Name Your App)

Give your application a unique and memorable name.

为您的应用程序赋予一个独特且令人难忘的名称。

2）加入脉冲 (2) Opt-in to Pulse)

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

Raygun提供了其他崩溃报告功能，我们将不在本教程中介绍。

3）集成到您的应用程序中 (3) Integrate Into Your Application)

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

最后是在您的代码库中添加Pulse监视代码。

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.

让我们将Pulse集成到我们的应用程序中。 我们将从其CDN中包含Raygun Pulse库，然后仅用几行代码和API密钥在应用程序中实例化Pulse。 我们再次使用Jade编写标记，但是我们还以纯HTML格式包含了一个示例，说明如何在您的应用程序中设置Pulse。

htmlheadscript(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 libraryscript(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 applicationscript(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：

 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

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-让我们转到raygun.io，看看Pulse可以为我们做什么。

Raygun脉冲仪表板 (Raygun Pulse Dashboard)

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.

Raygun Pulse仪表板分为七个部分。 实时，性能，会话，用户，浏览器，平台和地理位置。 稍后我们将详细介绍不同的部分及其用途。 我真正要关注的功能是单个用户监视，因此在进一步详细介绍之前，让我们为应用程序设置单个用户监视。

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.

我们需要做的第一件事是设置我们的商店以拥有用户帐户。 由于创建和认证用户不在本教程的讨论范围之内，因此我们将创建一些模拟用户帐户的路由，并将这些数据存储在Cookie中。 为此，我们将为3个个人用户帐户创建3条新路线。 路线将是/user/ado ， /user/chris和/user/holly ，访问这些路线中的任何一条都会相应地设置我们的用户。

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.

要将此用户信息发送给Raygun ，我们将使用RayGun setUser API并传递唯一的用户。 查看下面的代码段，看看如何在下面唯一标识应用程序的用户。

htmlheadscript(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 libraryscript(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 applicationscript(type='text/javascript').rg4js('apiKey', 'YOUR-API-KEY-GOES-HERE');rg4js('enablePulse', true);rg4js('enableCrashReporting', false);// Identify the user and pass it along to Pulsescript(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.

现在，我们已经完全设置了我们的应用程序，并为每个用户接收唯一的数据。 让我们看一下Raygun Pulse仪表板的不同部分，以及它们如何帮助我们优化应用程序。

生活 (Live)

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)

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.

“性能”选项卡用于衡量用户访问应用程序时的性能。 在此选项卡上，您可以深入了解应用程序的平均加载时间，加载速度最慢的页面以及可能导致应用程序性能问题的细目分类。 “性能”选项卡将为您提供有关应用程序运行情况的一般概述。

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.

您也可以单击各个页面以获取有关其性能的更多信息。 单击各个页面可以为您提供有关应用如何响应请求的非常有用的见解。 您甚至可以详细了解请求的构成，以及每个过程从DNS查找到要加载的所有子资产花费了多长时间。

届会 (Sessions)

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)

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.

“用户”选项卡提供有关应用程序最重要方面（用户）的见解。 在这里，您可以汇总用户满意度，使用该应用程序的用户数，新用户与回访用户以及拥有无崩溃体验的用户数量。 乐趣不止于此，您还可以单击单个用户以查看其与您的应用程序有关的全部历史记录。

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)

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.

“浏览器”选项卡可细分用于访问应用程序的浏览器。 此处列出了所有大型公司，包括Chrome，Firefox，IE / Edge，Safari，Opera，其余的都位于“其他”类别中。 此外，您可以查看每个浏览器使用的浏览器版本以及每个浏览器的平均加载时间。 这些数据可以帮助您确定支持哪些浏览器，甚至可能需要额外的注意。

平台类 (Platforms)

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.

与“浏览器”选项卡相似，“平台”选项卡为您提供了影响您应用程序的不同操作系统的细分。 其中的故障是Windows，Mac OS X，Linux（所有发行版），iOS，Android甚至Windows Phone都引起了人们的关注。 就像使用浏览器一样，您可以获得每个操作系统的平台版本和平均加载时间。

地缘 (Geo)

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以监视单个用户的性能。 我们展示了如何使用Raygun Pulse来获得深刻的见解和对应用程序对用户的性能的了解。

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.

Raygun Pulse提供了多种工具来监视性能，但是它是个人用户和会话跟踪的基础。 我们展示了仅用几行代码来设置单个用户跟踪是多么容易。 日前，Raygun Pulse刚刚推出，您可以在这里免费试用。

This post was sponsored via Syndicate Ads.

该帖子是通过Syndicate Ads赞助的。

翻译自: https://scotch.io/tutorials/real-user-monitoring-with-raygun-pulse