config（必需） - RUM 代理配置选项。
router（可选） - Vue Router 的实例。如果提供，将开始捕获页面加载和 SPA 导航事件作为事务，并使用路由的路径作为其名称。
captureErrors（可选） - 如果启用，将安装全局 Vue 错误处理程序以捕获组件内的渲染错误。默认为 true。插件会捕获组件名称、生命周期钩子和文件名（如果可用）作为错误上下文的一部分。

检测您的 Vue 应用程序

编辑

该包公开了 ApmVuePlugin，它是一个 Vue 插件，可以使用 Vue.use 方法安装到您的应用程序中。

import { createApp, defineComponent, h } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import { ApmVuePlugin } from '@elastic/apm-rum-vue'
import App from './App.vue'

const Home = defineComponent({
  render: () => h("div", {}, "home")
})

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: Home }
  ]
})

createApp(App)
  .use(router)
  .use(ApmVuePlugin, {
    router,
    config: {
      serviceName: 'app-name',
      // agent configuration
    }
  })
  // app specific code
  .mount('#app')

在组件内部访问代理实例

编辑

代理实例可以使用 this.$apm 在所有组件内部访问。

<template>
  <div>Component timings as span</div>
</template>

<script>
export default {
  data() {
    return {
      span: null
    }
  },
  created() {
    this.span = this.$apm.startSpan('create-mount-duration', 'custom')
  },
  mounted() {
    this.span && this.span.end()
  }
}
</script>

ApmVuePlugin 期望 router 选项为 VueRouter 的实例，因为它使用了导航守卫功能。

初始化插件后，页面加载和 SPA 导航事件都将被捕获为事务，路由的 path 作为其名称，page-load 或 route-change 作为类型。

« Angular 集成分布式追踪 »