vue.js - 如何将 Elastic APM 集成到 Vuejs SPA?
问题描述
Elastic APM
我如下集成到我的 Vue.js 应用程序中。它成功记录到 Elastic APM。
但是,它没有在日志中正确显示当前页面名称。它似乎总是显示应用程序在 APM 中安装的第一页。
我希望始终看到当前页面链接到相应的 APM 事件。任何建议如何实现这一目标?
文档说要设置pageLoadTransactionName
. 但是,它似乎没有在路线更改时更新此内容:
https ://www.elastic.co/guide/en/apm/agent/rum-js/current/custom-transaction-name.html
应用程序.js
mounted() {
this.initializeApm();
},
methods: {
initializeApm() {
const currentPage =
this.$route.name || window.location.href.split('#/')[1];
// initialize elastic apm
const apm = initApm({
serviceName: this.config.apm.serviceName,
serverUrl: this.config.apm.serverUrl,
serviceVersion: this.config.version,
pageLoadTransactionName: currentPage,
distributedTracingOrigins: [
'https://xxx.de',
],
environment: this.config.stage
});
apm.setUserContext({
id: this.getUserIdFromSession,
username: this.getUserNameFromSession,
email: this.getUserEmail
});
}
}
解决方案
当路由到不同的子页面时,您必须手动设置路由名称。您可以通过“更改路线”类型的过滤器来实现此目的。请参阅apm.addFilter()
文档:https ://www.elastic.co/guide/en/apm/agent/rum-js/current/agent-api.html#apm-add-filter
像这样的东西应该工作:
apm.addFilter(payload => {
if (payload.data) {
const mappedData = [];
payload.data.forEach(tr => {
if (tr.type === 'route-change')
mappedData.push({
...tr,
name: this.$route.name // overwrite unknown with the current route name
});
else mappedData.push(tr);
});
payload.data = mappedData;
}
return payload;
});
推荐阅读
- google-apps-script - 访问网络应用宏链接的人可以访问我的脚本或电子表格吗?
- python - For 语句增量并跳过其余代码
- haskell - 如果已经自行构建,请避免重新构建本地依赖项
- python - Pandas:如何将行转换为一个字符串?
- c# - C# Web API 处理 JSON POST 正文中的字符串 ID 或对象属性
- django - 使用 ManyToMany 关系中的布尔值注释查询集
- node.js - 错误:Aotentar instalar o Sqlite3 para usar no Node.js (npm install sqlite3)
- python - 在 pygame 字体中找不到字体文件
- c++ - 每次运行的 shared_ptr 计数更改
- python - python multiprocessing - 在进程之间共享类字典,随后从进程写入反映到共享内存