我将Elastic APM
集成到我的Vue.js应用程序中,如下所示。它成功记录到Elastic APM。
但是它没有在日志中正确显示当前页面名称。它似乎总是显示在APM中已安装该应用程序的第一页。
[我想一直看到当前页面链接到相应的APM事件。有什么建议可以实现这一目标?
文档说要设置pageLoadTransactionName
。但是,似乎不会在更改路线时更新此内容:https://www.elastic.co/guide/en/apm/agent/rum-js/current/custom-transaction-name.html
App.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()
docs: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;
});