« 设置 Agent 配置 CORS »
Elastic 文档 › ›设置 Agent

安装 Agent

编辑

安装 Agent

编辑

有多种方法可以将 APM RUM Agent 添加到您的网页

使用 Script 标签

编辑

同步/阻塞模式

编辑

添加一个 <script> 标签来加载 bundle 并使用 elasticApm 全局对象来初始化 Agent

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

异步/非阻塞模式

编辑

异步加载脚本可以确保 Agent 脚本不会阻塞页面上的其他资源，但是，它仍然会阻塞浏览器的 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>

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

请从 GitHub 或 UNPKG 下载最新版本的 RUM Agent，并在部署到生产环境之前将文件托管在您的服务器/CDN 上。请记住使用正确的版本控制方案，并在 cache-control 头中设置较远的未来 max-age 和 immutable，因为文件永远不会更改。

默认情况下，调试消息已从最小化 bundle 中移除。强烈建议使用未最小化版本进行调试。

使用 Bundler

编辑

将真实用户监控 APM Agent 作为依赖项安装到您的应用程序中

npm install @elastic/apm-rum --save

配置 Agent

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 Agent 将所有调试消息记录到浏览器控制台。这些日志在开发中非常有用。但是，它们会使 RUM Agent bundle 的大小变大，因此在部署应用程序时，应确保使用优化的生产版本。

您可以找到以下不同 bundler 的优化代码构建说明。

Webpack

编辑

对于优化的 Webpack 生产环境构建，请在 Webpack 配置中包含 Environment/Define 插件。

const { EnvironmentPlugin } = require('webpack')

plugins: [
  new EnvironmentPlugin({
    NODE_ENV: 'production'
  })
]

您可以在 Webpack 文档 中了解更多信息。

Rollup

编辑

对于优化的 Rollup 生产环境构建，请包含 replace 插件，以确保使用正确的构建环境。

const replace = require('rollup-plugin-replace')

plugins: [
  replace({
    'process.env.NODE_ENV': JSON.stringify('production')
  })
]

目前，优化的（最小化 + gzip 压缩）Agent bundle 大小约为 16KiB。

« 设置 Agent 配置 CORS »