@eonx/opentelemetry-vue-plugin

OpenTelemetry Vue Plugin

Introduction

OpenTelemetry Vue Plugin is a plugin for vue applications to enable traces.

Installation

$ npm install @eonx/opentelemetry-browser-client @eonx/opentelemetry-vue-plugin

Setting up the plugin in a Vue Application

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/main.css";

import OtelBrowserClient from "@eonx/opentelemetry-browser-client";
import { OpenTelemetryVuePlugin } from "@eonx/opentelemetry-vue-plugin";

OtelBrowserClient.configure({
  apiKey: "API_KEY",
  plugins: [new OpenTelemetryVuePlugin()]
});

const vuePlugin = OtelBrowserClient.getPlugin("vue")!;

const app = createApp(App);
app.use(vuePlugin);
app.mount("#app");

API Reference

export interface OpenTelemetryBrowserClient {
  configure(options: OpenTelemetryBrowserClientOptions);
}

The only function that you need to call is the configure function of OpenTelemetryBrowserClient which accepts a OpenTelemetryBrowserClientOptions parameter

export interface OpenTelemetryBrowserClientOptions {
  apiKey: string;
  baseUrl?: string;
  getUserId?: GetUserIdCallback;
  plugins: OpenTelemetryPlugin[];
  remoteConfigFetcher?: RemoteConfigFetcher;
}

The OpenTelemetryBrowserClientOptions options are:

• apiKey: string, required. The apiKey to use by OpenTelemetryBrowserClient.
• baseUrl: string, optional, default 'https://tracey-app.net'. The url to which OpenTelemetryBrowserClient will connect to.
• getUserId: GetUserIdCallback, optional. The callback function to call to get the currently logged-in user.
• plugins: OpenTelemetryPlugin[], required. An array of OpenTelemetryPlugin. Currently supported is OpenTelemetryVuePlugin.
• remoteConfigFetcher: RemoteConfigFetcher, optional. default remoteConfigPipedreamFetcher. An instance of RemoteConfigFetcher. Clients can pass its own implementation of RemoteConfigFetcher as needed.

RemoteConfigFetcher

A RemoteConfigFetcher is an object that gets the OpenTelemetryServiceConfiguration configuration object from a source (whether remote or local). The library has two implementations of RemoteConfigFetcher.

RemoteConfigPipedreamFetcher

This is the default RemoteConfigFetcher. This fetches its configuration from a remote source hosted in pipedream

RemoteConfigMockFetcher

This is a mocked RemoteConfigFetcher. This gets its configuration from the library itself with default values. The default values are below.

const config: OpenTelemetryServiceConfiguration = {
      serviceName: 'paymentElements',
      traces: {
        opentelemetryCollectorTracesUrl: 'http://localhost:4318/v1/traces',
        isEnabled: true,
        ignoreUrls: ['^((?![http, https].*/users).)*$'],
        attributeRules: [
          {
            key: 'cvv',
            action: AttributeRuleAction.Delete,
          },
          {
            pattern: '^4[0-9]{12}(?:[0-9]{3})?$',
            action: AttributeRuleAction.Redact,
          },
        ],
      },
      metrics: {
        isEnabled: false,
      },
      logs: {
        isEnabled: false,
      },
    };

Implementing a custom RemoteConfigFetcher

In order for clients to get its configuration from a different source, maybe from a service in AWS or Google Cloud, clients can choose to implement its own RemoteConfigFetcher. Clients just need to implement the interface RemoteConfigFetcher

Example of a custom RemoteConfigFetcher

import { OpenTelemetryServiceConfiguration } from '../types';
import { RemoteConfigFetcher } from './remote-config.fetcher';

class RemoteConfigAWSFetcher implements RemoteConfigFetcher {
  async fetch(baseUrl: string, apiKey: string) {
    const url = new URL(baseUrl);

    const response = await fetch(`https://some-aws-domain.com/config`, {
      method: 'GET',
      headers: {
        'x-api-key': apiKey,
      },
    });

    const latestConfiguration = (await response.json()) as OpenTelemetryServiceConfiguration;

    return latestConfiguration;
  }
}

export default new RemoteConfigAWSFetcher();

Once you have implemented the RemoteConfigFetcher interface you can now use it and pass it to the configure function.

...
import remoteConfigAWSFetcher from './remote-config-aws.fetcher.ts'

import OtelBrowserClient from "@eonx/opentelemetry-browser-client";
import { OpenTelemetryVuePlugin } from "@eonx/opentelemetry-vue-plugin";

OtelBrowserClient.configure({
  apiKey: "API_KEY",
  plugins: [new OpenTelemetryVuePlugin()],
  remoteConfigFetcher: remoteConfigAWSFetcher
});

...