Vue 集成
编辑Vue 集成编辑
本文档介绍了如何在 Vue 应用程序中使用实时用户监控 JavaScript 代理。
支持的版本编辑
此集成支持 Vue.js 版本 ≥ 3.0
如果您使用的是 Vuejs 版本 < 3.0，请使用 @elastic/apm-rum-vue 1.x 来检测您的应用程序。详细信息可在 先前版本 中找到。
安装 Elastic APM Vue 包编辑
将 @elastic/apm-rum-vue 包作为依赖项安装到您的应用程序中
npm install --save @elastic/apm-rum-vue
使用 APM 插件编辑
app.use(ApmVuePlugin, options)
选项编辑
-
config(必需) - RUM 代理 配置选项. -
router(可选) - Vue 路由器的实例。如果提供，将开始捕获页面加载和 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 期望路由器选项是 VueRouter 的实例，因为它使用 导航守卫 功能。
插件初始化后，页面加载和 SPA 导航事件都将被捕获为事务，其路径作为其名称，page-load 或 route-change 作为类型。