如何将 Elastic APM 集成到 Vuejs SPA？

Question

我按如下方式将 Elastic APM 集成到我的 Vue.js 应用程序中。它成功登录到 Elastic APM。

但是它没有在日志中正确显示当前页面名称。在APM中似乎总是显示已挂载App的第一页。

我希望始终看到当前页面链接到相应的 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
      });
    }
  }

Answer 1

当路由到不同的子页面时，您必须手动设置路由名称。您可以通过 'change-route' 类型的过滤器来实现此目的。参见 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;
});

Answer 2

另一种方法是观察事务开始和结束时触发的事务事件。

// on transaction start
apm.observe("transaction:start", transaction => {

});

// on transaction end
apm.observe("transaction:end", transaction => {

});

API 文档 - https://www.elastic.co/guide/en/apm/agent/rum-js/current/agent-api.html#observe

代理还开箱即用地支持Vue.js、React 和Angular 等框架，因此上面的代码应该不是必需的。

Vue 文档 - https://www.elastic.co/guide/en/apm/agent/rum-js/current/vue-integration.html

如何将 Elastic APM 集成到 Vuejs SPA？

How to integrate Elastic APM to Vuejs SPA?

kibana

vue.js

elastic-stack

vue-router

elastic-apm