使用Elastic APM实现真实用户监控(RUM)

什么是RUM？

Elastic真实用户监控（RUM）能够捕获用户与Web浏览器的交互行为，从性能角度为您提供Web应用程序"真实用户体验"的详细视图。Elastic RUM代理是一个JavaScript代理，支持任何基于JavaScript的应用程序。

RUM的主要优势包括：

帮助识别性能瓶颈及其对访客体验的影响
通过用户代理信息识别最常用的浏览器、设备和平台
结合位置信息分析网站在全球范围内的区域性能
为应用程序的服务水平协议(SLA)提供洞察和测量
收集客户访问和点击行为数据，帮助开发团队评估新功能影响

使用Elastic APM开始RUM监控

环境准备

要使用Elastic APM真实用户监控，需要安装带有APM服务器的Elastic Stack。最快的方式是创建云试用账户，几分钟内即可准备好集群。

示例应用

演示应用是一个简单的汽车数据库应用程序，包含React前端和Spring Boot后端。应用结构简洁，便于展示从零开始的详细插装步骤。

RUM代理配置

有两种方式设置RUM代理：

通过包管理器安装：

1

npm install @elastic/apm-rum --save

通过HTML脚本标签引入：

1
2
3
4
5
6
7
8


<script src="https://unpkg.com/@elastic/apm-rum@5.12.0/dist/bundles/elastic-apm-rum.umd.min.js"></script>
<script>
  elasticApm.init({
    serviceName: 'carfront',
    serverUrl: 'http://localhost:8200',
    serviceVersion: '0.90'
  })
</script>

初始化配置

对于React应用，初始化代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { init as initApm } from '@elastic/apm-rum'

var apm = initApm({
  serviceName: 'carfront',
  serviceVersion: '0.90',
  serverUrl: 'APM_URL',
  distributedTracingOrigins: ['http://localhost:8080'],
})

export default apm

开箱即用的监控功能

只需初始化RUM代理，无需任何自定义插装，即可获得详细的性能指标，包括：

timeToFirstByte：浏览器等待从Web服务器接收第一个信息的时间
domInteractive：浏览器完成HTML解析和DOM构建的时间
domComplete：页面及其所有子资源完成下载的时间
firstContentfulPaint：浏览器渲染DOM中第一个内容的时间

灵活的自定义插装

自定义事务追踪

对于单页面应用中的特定操作（如删除汽车），可以使用自定义事务：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// 添加新汽车
addCar(car) {
  var transaction = apm.startTransaction("Add Car", "Car");
  transaction.addLabels(car);
  
  fetch(SERVER_URL + 'api/cars', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(car)
  })
  .then(res => this.fetchCars())
  .catch(err => console.error(err))
}

分布式追踪配置

前端配置

在RUM代理中启用分布式追踪：

1
2
3


var apm = initApm({
  distributedTracingOrigins: ['http://localhost:8080']
})

后端配置

使用Java代理进行服务器端插装：

1
2
3
4
5


-javaagent:apm/wrapper/elastic-apm-agent-1.33.0.jar
-Delastic.apm.service_name=cardatabase
-Delastic.apm.application_packages=com.packt.cardatabase
-Delastic.apm.server_urls=<YOUR_APM_ENDPOINT>
-Delastic.apm.secret_token=<YOUR_SECRET_TOKEN>

跨域资源共享(CORS)配置

为确保分布式追踪正常工作，需要配置CORS策略：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


@Configuration
public class MyCorsConfiguration {
  @Bean
  public FilterRegistrationBean<CorsFilter> corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    return new FilterRegistrationBean<>(new CorsFilter(source));
  }
}

用户体验仪表板

Elastic APM提供精选的APM UI和内置仪表板，可视化代理捕获的所有APM数据。您还可以创建自定义可视化，显示网络流量来源地图以及客户使用的操作系统和浏览器信息。

总结

通过Elastic RUM插装应用程序简单易行且功能强大。结合后端服务的其他APM代理，RUM通过分布式追踪从最终用户角度提供应用程序性能的整体视图。

Elastic APM实现真实用户监控指南

本文详细介绍了如何使用Elastic APM实现真实用户监控(RUM)，包括JavaScript代理配置、自定义事务追踪、分布式链路追踪以及跨域资源共享配置等核心技术实现方案。