安装代理
编辑安装代理编辑
有多种方法可以将 APM RUM 代理添加到您的网页
使用脚本标签编辑
同步/阻塞模式编辑
添加一个 <script> 标签来加载捆绑包并使用 elasticApm
全局对象来初始化代理
<script src="https://<your-cdn-host>.com/path/to/elastic-apm-rum.umd.min-<version>.js" crossorigin></script> <script> elasticApm.init({ serviceName: '<instrumented-app>', serverUrl: '<apm-server-url>', }) </script>
异步/非阻塞模式编辑
异步加载脚本可确保代理脚本不会阻塞页面上的其他资源,但是,它仍然会阻塞浏览器的 onload
事件。
<script> ;(function(d, s, c) { var j = d.createElement(s), t = d.getElementsByTagName(s)[0] j.src = 'https://<your-cdn-host>.com/path/to/elastic-apm-rum.umd.min-<version>.js' j.onload = function() {elasticApm.init(c)} t.parentNode.insertBefore(j, t) })(document, 'script', {serviceName: '<instrumented-app>', serverUrl: '<apm-server-url>'}) </script>
虽然这是推荐的模式,但需要注意一个问题。由于代理的下载和初始化是异步进行的,因此在代理初始化之前发生的请求将无法进行分布式跟踪。
请从 GitHub 或 UNPKG 下载最新版本的 RUM 代理,并在部署到生产环境之前将文件托管在您的服务器/CDN 上。请记住使用适当的版本控制方案,并在 cache-control 标头中设置一个远期 max-age
和 immutable
,因为文件永远不会更改。
默认情况下,调试消息已从最小化捆绑包中删除。强烈建议在调试时使用未最小化的版本。
使用打包器编辑
将实时用户监控 APM 代理作为依赖项安装到您的应用程序中
npm install @elastic/apm-rum --save
配置代理
import { init as initApm } from '@elastic/apm-rum' const apm = initApm({ // Set required service name (allowed characters: a-z, A-Z, 0-9, -, _, and space) serviceName: '', // Set custom APM Server URL (default: https://127.0.0.1:8200) serverUrl: 'https://127.0.0.1:8200', // Set service version (required for sourcemap feature) serviceVersion: '' })
生产构建编辑
默认情况下,RUM 代理将所有调试消息记录到浏览器控制台。这些日志在开发中非常有用。但是,它们会使 RUM 代理捆绑包大小更大,因此您应该确保在部署应用程序时使用优化的生产版本。
您可以在下面找到针对不同打包器的优化代码构建说明。
Webpack编辑
对于优化的 webpack 生产构建,请在 webpack 配置中包含 Environment/Define 插件。
const { EnvironmentPlugin } = require('webpack') plugins: [ new EnvironmentPlugin({ NODE_ENV: 'production' }) ]
您可以在 Webpack 文档 中了解更多信息。
Rollup编辑
对于优化的 rollup 生产构建,请包含替换插件,它确保使用正确的构建环境。
const replace = require('rollup-plugin-replace') plugins: [ replace({ 'process.env.NODE_ENV': JSON.stringify('production') }) ]
目前,优化的(最小化 + gzip 压缩)代理捆绑包大小约为 16KiB。