Как интегрировать Elastic APM в Vuejs SPA?

Question

Я интегрировал 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
      });
    }
  }

Answer 1

При маршрутизации на другую подстраницу вам необходимо установить имя маршрута вручную. Вы можете добиться этого с помощью фильтра по типу "изменить маршрут". Видетьapm.addFilter() документы: https://www.elastic.co/guide/en/apm/agent/rum-js/current/agent-api.html

Примерно так должно работать:

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

Агент также "из коробки" поддерживает такие фреймворки, как Vue.js, React и Angular, поэтому в приведенном выше коде нет необходимости.

Документы Vue - https://www.elastic.co/guide/en/apm/agent/rum-js/current/vue-integration.html