安装代理编辑

有多种方法可以将 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>

虽然这是推荐的模式,但需要注意一个问题。由于代理的下载和初始化是异步进行的,因此在代理初始化之前发生的请求将无法进行分布式跟踪。

请从 GitHubUNPKG 下载最新版本的 RUM 代理,并在部署到生产环境之前将文件托管在您的服务器/CDN 上。请记住使用适当的版本控制方案,并在 cache-control 标头中设置一个远期 max-ageimmutable,因为文件永远不会更改。

默认情况下,调试消息已从最小化捆绑包中删除。强烈建议在调试时使用未最小化的版本。

使用打包器编辑

将实时用户监控 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。