@wisemen/vue-core-telemetry 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# Wisemen vue-core Telemetry
+
+This package provides a simple way to implement Sentry and OpenTelemetry in your Vue.js applications.

package/dist/index.cjs

@@ -0,0 +1,195 @@
+'use strict';
+
+const Sentry = require('@sentry/vue');
+const contextZone = require('@opentelemetry/context-zone');
+const core = require('@opentelemetry/core');
+const exporterTraceOtlpHttp = require('@opentelemetry/exporter-trace-otlp-http');
+const resources = require('@opentelemetry/resources');
+const sdkTraceWeb = require('@opentelemetry/sdk-trace-web');
+const instrumentation = require('@opentelemetry/instrumentation');
+const instrumentationFetch = require('@opentelemetry/instrumentation-fetch');
+const instrumentationUserInteraction = require('@opentelemetry/instrumentation-user-interaction');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const Sentry__namespace = /*#__PURE__*/_interopNamespaceCompat(Sentry);
+
+async function initOpenTelemetry(options) {
+  console.log("Initializing OpenTelemetry tracing...", options);
+  const endpoint = options.traceEndpoint;
+  if (endpoint == null) {
+    console.warn("OpenTelemetry is disabled. No trace endpoint provided.");
+    return;
+  }
+  const accessToken = await options.accessTokenFn();
+  const customOTLPTraceExporter = new CustomOTLPTraceExporter({
+    headers: {
+      "Authorization": `Bearer ${accessToken}`,
+      "Content-Type": "application/json"
+    },
+    url: `${endpoint}`
+  }, options.accessTokenFn);
+  const tracerProvider = new sdkTraceWeb.WebTracerProvider({
+    resource: resources.resourceFromAttributes({
+      "deployment.build": options.buildNumber ?? "unknown",
+      "deployment.commit": options.commitHash ?? "unknown",
+      "deployment.environment": options.environment ?? "unknown",
+      "deployment.timestamp": options.buildTimestamp ?? "unknown",
+      "service.name": options.serviceName
+    }),
+    spanProcessors: [
+      new sdkTraceWeb.BatchSpanProcessor(customOTLPTraceExporter)
+    ]
+  });
+  tracerProvider.register({
+    contextManager: new contextZone.ZoneContextManager()
+  });
+}
+class CustomOTLPTraceExporter extends exporterTraceOtlpHttp.OTLPTraceExporter {
+  _headers;
+  accessTokenFn;
+  constructor(config, accessTokenFn) {
+    super(config);
+    this._headers = {
+      ...config.headers
+    };
+    this.accessTokenFn = accessTokenFn;
+  }
+  async export(items, resultCallback) {
+    const token = await this.accessTokenFn();
+    if (token !== null) {
+      this._headers = {
+        ...this._headers,
+        Authorization: `Bearer ${token}`
+      };
+    }
+    if (!this._headers?.Authorization) {
+      resultCallback({
+        code: core.ExportResultCode.FAILED
+      });
+      return;
+    }
+    const params = this._delegate?._transport?._transport?._parameters;
+    if (typeof params === "object" && params !== null) {
+      params.headers = () => {
+        return this._headers;
+      };
+    }
+    return super.export(items, (result) => {
+      return resultCallback(result);
+    });
+  }
+}
+
+function initSentry(app, options) {
+  function logWarning(message) {
+    if (options.debug) {
+      console.warn(`[Sentry] ${message}`);
+    }
+  }
+  const {
+    debug = false,
+    dsn,
+    enabled = true,
+    enableReplays = false,
+    environment = "production",
+    replaysOnErrorSampleRate = 1,
+    replaysSessionSampleRate = 0.1,
+    sampleRate = 1
+  } = options;
+  if (!enabled || !dsn) {
+    if (debug) {
+      logWarning(`Initialization skipped: Sentry is disabled or DSN is not provided. enabled=${enabled}, dsn=${dsn}`);
+    }
+    return;
+  }
+  const integrations = [];
+  if (enableReplays) {
+    const replayIntegration = Sentry__namespace.replayIntegration({
+      blockAllMedia: true,
+      maskAllInputs: true,
+      maskAllText: true
+    });
+    integrations.push(replayIntegration);
+  }
+  Sentry__namespace.init({
+    app,
+    debug,
+    dsn,
+    environment,
+    integrations,
+    replaysOnErrorSampleRate,
+    replaysSessionSampleRate,
+    sampleRate
+  });
+  if (debug) {
+    logWarning(`Initialized with DSN: ${dsn}`);
+  }
+}
+
+function registerAppInstrumentations(instrumentations) {
+  instrumentation.registerInstrumentations({
+    instrumentations: [
+      new instrumentationUserInteraction.UserInteractionInstrumentation({
+        eventNames: [
+          "click",
+          "change",
+          "keydown"
+        ]
+      }),
+      new instrumentationFetch.FetchInstrumentation({
+        propagateTraceHeaderCorsUrls: /.*/
+      }),
+      ...instrumentations ?? []
+    ]
+  });
+}
+
+class Telemetry {
+  constructor(options) {
+    this.options = options;
+  }
+  captureException(error, context) {
+    Sentry__namespace.captureException(error, {
+      contexts: {
+        additional: context
+      }
+    });
+  }
+  captureMessage(message, level) {
+    Sentry__namespace.captureMessage(message, level);
+  }
+  async init(app) {
+    if (this.options.sentry?.dsn !== void 0) {
+      initSentry(app, this.options.sentry);
+    }
+    if (this.options.openTelemetry !== void 0 && this.options.openTelemetry?.enabled !== false) {
+      await initOpenTelemetry(this.options.openTelemetry);
+    }
+  }
+  setExtra(key, value) {
+    Sentry__namespace.setExtra(key, value);
+  }
+  setTag(key, value) {
+    Sentry__namespace.setTag(key, value);
+  }
+  setTags(tags) {
+    Sentry__namespace.setTags(tags);
+  }
+  setUser(user) {
+    Sentry__namespace.setUser(user);
+  }
+}
+
+exports.Telemetry = Telemetry;
+exports.registerAppInstrumentations = registerAppInstrumentations;

package/dist/index.d.cts

@@ -0,0 +1,90 @@
+import * as Sentry from '@sentry/vue';
+import { App } from 'vue';
+import { Instrumentation } from '@opentelemetry/instrumentation';
+
+interface SentryOptions {
+    /**
+     * debug: If true, enables debug mode for Sentry.
+     * Default is false.
+     */
+    debug?: boolean;
+    /**
+     * dsn: The Data Source Name for Sentry, which is required for initialization.
+     * This is the endpoint where Sentry will send error reports.
+     */
+    dsn: string;
+    /**
+     * enabled: If true, enables Sentry error reporting.
+     * Default is true.
+     */
+    enabled?: boolean;
+    /**
+     * enableReplays: If true, enables session replay functionality.
+     * Default is false.
+     */
+    enableReplays?: boolean;
+    /**
+     * environment: The environment in which the application is running (e.g., 'production', 'development').
+     * Default is 'production'.
+     */
+    environment?: string;
+    /**
+     * replaysOnErrorSampleRate: The sample rate for session replays when an error occurs.
+     * Default is 1.0 (100%).
+     */
+    replaysOnErrorSampleRate?: number;
+    /**
+     * replaysSessionSampleRate: The sample rate for session replays.
+     * Default is 0.1 (10%).
+     */
+    replaysSessionSampleRate?: number;
+    /**
+     * sampleRate: The sample rate for capturing events.
+     * Default is 1.0 (100%).
+     */
+    sampleRate?: number;
+}
+interface OpenTelemetryOptions {
+    accessTokenFn: () => Promise<string>;
+    buildNumber?: string;
+    buildTimestamp?: string;
+    commitHash?: string;
+    debug?: boolean;
+    enabled?: boolean;
+    environment?: string;
+    logEndpoint?: string;
+    metricsEndpoint?: string;
+    serviceName: string;
+    serviceVersion?: string;
+    traceEndpoint?: string;
+}
+interface TelemetryOptions {
+    openTelemetry?: OpenTelemetryOptions;
+    sentry?: SentryOptions;
+}
+
+/**
+ * Register default OpenTelemetry instrumentations for web applications.
+ * This includes Fetch and User Interaction instrumentations.
+ *
+ * @param instrumentations - Additional instrumentations to register.
+ */
+declare function registerAppInstrumentations(instrumentations?: Instrumentation[]): void;
+
+interface TelemetryUser {
+    id?: string;
+    email?: string;
+}
+declare class Telemetry {
+    private options;
+    constructor(options: TelemetryOptions);
+    captureException(error: any, context?: Record<string, any>): void;
+    captureMessage(message: string, level?: Sentry.SeverityLevel): void;
+    init(app: App): Promise<void>;
+    setExtra(key: string, value: any): void;
+    setTag(key: string, value: string): void;
+    setTags(tags: Record<string, string>): void;
+    setUser(user: TelemetryUser): void;
+}
+
+export { Telemetry, registerAppInstrumentations };

package/dist/index.d.mts

@@ -0,0 +1,90 @@
+import * as Sentry from '@sentry/vue';
+import { App } from 'vue';
+import { Instrumentation } from '@opentelemetry/instrumentation';
+
+interface SentryOptions {
+    /**
+     * debug: If true, enables debug mode for Sentry.
+     * Default is false.
+     */
+    debug?: boolean;
+    /**
+     * dsn: The Data Source Name for Sentry, which is required for initialization.
+     * This is the endpoint where Sentry will send error reports.
+     */
+    dsn: string;
+    /**
+     * enabled: If true, enables Sentry error reporting.
+     * Default is true.
+     */
+    enabled?: boolean;
+    /**
+     * enableReplays: If true, enables session replay functionality.
+     * Default is false.
+     */
+    enableReplays?: boolean;
+    /**
+     * environment: The environment in which the application is running (e.g., 'production', 'development').
+     * Default is 'production'.
+     */
+    environment?: string;
+    /**
+     * replaysOnErrorSampleRate: The sample rate for session replays when an error occurs.
+     * Default is 1.0 (100%).
+     */
+    replaysOnErrorSampleRate?: number;
+    /**
+     * replaysSessionSampleRate: The sample rate for session replays.
+     * Default is 0.1 (10%).
+     */
+    replaysSessionSampleRate?: number;
+    /**
+     * sampleRate: The sample rate for capturing events.
+     * Default is 1.0 (100%).
+     */
+    sampleRate?: number;
+}
+interface OpenTelemetryOptions {
+    accessTokenFn: () => Promise<string>;
+    buildNumber?: string;
+    buildTimestamp?: string;
+    commitHash?: string;
+    debug?: boolean;
+    enabled?: boolean;
+    environment?: string;
+    logEndpoint?: string;
+    metricsEndpoint?: string;
+    serviceName: string;
+    serviceVersion?: string;
+    traceEndpoint?: string;
+}
+interface TelemetryOptions {
+    openTelemetry?: OpenTelemetryOptions;
+    sentry?: SentryOptions;
+}
+
+/**
+ * Register default OpenTelemetry instrumentations for web applications.
+ * This includes Fetch and User Interaction instrumentations.
+ *
+ * @param instrumentations - Additional instrumentations to register.
+ */
+declare function registerAppInstrumentations(instrumentations?: Instrumentation[]): void;
+
+interface TelemetryUser {
+    id?: string;
+    email?: string;
+}
+declare class Telemetry {
+    private options;
+    constructor(options: TelemetryOptions);
+    captureException(error: any, context?: Record<string, any>): void;
+    captureMessage(message: string, level?: Sentry.SeverityLevel): void;
+    init(app: App): Promise<void>;
+    setExtra(key: string, value: any): void;
+    setTag(key: string, value: string): void;
+    setTags(tags: Record<string, string>): void;
+    setUser(user: TelemetryUser): void;
+}
+
+export { Telemetry, registerAppInstrumentations };

package/dist/index.d.ts

@@ -0,0 +1,90 @@
+import * as Sentry from '@sentry/vue';
+import { App } from 'vue';
+import { Instrumentation } from '@opentelemetry/instrumentation';
+
+interface SentryOptions {
+    /**
+     * debug: If true, enables debug mode for Sentry.
+     * Default is false.
+     */
+    debug?: boolean;
+    /**
+     * dsn: The Data Source Name for Sentry, which is required for initialization.
+     * This is the endpoint where Sentry will send error reports.
+     */
+    dsn: string;
+    /**
+     * enabled: If true, enables Sentry error reporting.
+     * Default is true.
+     */
+    enabled?: boolean;
+    /**
+     * enableReplays: If true, enables session replay functionality.
+     * Default is false.
+     */
+    enableReplays?: boolean;
+    /**
+     * environment: The environment in which the application is running (e.g., 'production', 'development').
+     * Default is 'production'.
+     */
+    environment?: string;
+    /**
+     * replaysOnErrorSampleRate: The sample rate for session replays when an error occurs.
+     * Default is 1.0 (100%).
+     */
+    replaysOnErrorSampleRate?: number;
+    /**
+     * replaysSessionSampleRate: The sample rate for session replays.
+     * Default is 0.1 (10%).
+     */
+    replaysSessionSampleRate?: number;
+    /**
+     * sampleRate: The sample rate for capturing events.
+     * Default is 1.0 (100%).
+     */
+    sampleRate?: number;
+}
+interface OpenTelemetryOptions {
+    accessTokenFn: () => Promise<string>;
+    buildNumber?: string;
+    buildTimestamp?: string;
+    commitHash?: string;
+    debug?: boolean;
+    enabled?: boolean;
+    environment?: string;
+    logEndpoint?: string;
+    metricsEndpoint?: string;
+    serviceName: string;
+    serviceVersion?: string;
+    traceEndpoint?: string;
+}
+interface TelemetryOptions {
+    openTelemetry?: OpenTelemetryOptions;
+    sentry?: SentryOptions;
+}
+
+/**
+ * Register default OpenTelemetry instrumentations for web applications.
+ * This includes Fetch and User Interaction instrumentations.
+ *
+ * @param instrumentations - Additional instrumentations to register.
+ */
+declare function registerAppInstrumentations(instrumentations?: Instrumentation[]): void;
+
+interface TelemetryUser {
+    id?: string;
+    email?: string;
+}
+declare class Telemetry {
+    private options;
+    constructor(options: TelemetryOptions);
+    captureException(error: any, context?: Record<string, any>): void;
+    captureMessage(message: string, level?: Sentry.SeverityLevel): void;
+    init(app: App): Promise<void>;
+    setExtra(key: string, value: any): void;
+    setTag(key: string, value: string): void;
+    setTags(tags: Record<string, string>): void;
+    setUser(user: TelemetryUser): void;
+}
+
+export { Telemetry, registerAppInstrumentations };

package/dist/index.mjs

@@ -0,0 +1,178 @@
+import * as Sentry from '@sentry/vue';
+import { ZoneContextManager } from '@opentelemetry/context-zone';
+import { ExportResultCode } from '@opentelemetry/core';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { resourceFromAttributes } from '@opentelemetry/resources';
+import { WebTracerProvider, BatchSpanProcessor } from '@opentelemetry/sdk-trace-web';
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
+import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
+
+async function initOpenTelemetry(options) {
+  console.log("Initializing OpenTelemetry tracing...", options);
+  const endpoint = options.traceEndpoint;
+  if (endpoint == null) {
+    console.warn("OpenTelemetry is disabled. No trace endpoint provided.");
+    return;
+  }
+  const accessToken = await options.accessTokenFn();
+  const customOTLPTraceExporter = new CustomOTLPTraceExporter({
+    headers: {
+      "Authorization": `Bearer ${accessToken}`,
+      "Content-Type": "application/json"
+    },
+    url: `${endpoint}`
+  }, options.accessTokenFn);
+  const tracerProvider = new WebTracerProvider({
+    resource: resourceFromAttributes({
+      "deployment.build": options.buildNumber ?? "unknown",
+      "deployment.commit": options.commitHash ?? "unknown",
+      "deployment.environment": options.environment ?? "unknown",
+      "deployment.timestamp": options.buildTimestamp ?? "unknown",
+      "service.name": options.serviceName
+    }),
+    spanProcessors: [
+      new BatchSpanProcessor(customOTLPTraceExporter)
+    ]
+  });
+  tracerProvider.register({
+    contextManager: new ZoneContextManager()
+  });
+}
+class CustomOTLPTraceExporter extends OTLPTraceExporter {
+  _headers;
+  accessTokenFn;
+  constructor(config, accessTokenFn) {
+    super(config);
+    this._headers = {
+      ...config.headers
+    };
+    this.accessTokenFn = accessTokenFn;
+  }
+  async export(items, resultCallback) {
+    const token = await this.accessTokenFn();
+    if (token !== null) {
+      this._headers = {
+        ...this._headers,
+        Authorization: `Bearer ${token}`
+      };
+    }
+    if (!this._headers?.Authorization) {
+      resultCallback({
+        code: ExportResultCode.FAILED
+      });
+      return;
+    }
+    const params = this._delegate?._transport?._transport?._parameters;
+    if (typeof params === "object" && params !== null) {
+      params.headers = () => {
+        return this._headers;
+      };
+    }
+    return super.export(items, (result) => {
+      return resultCallback(result);
+    });
+  }
+}
+
+function initSentry(app, options) {
+  function logWarning(message) {
+    if (options.debug) {
+      console.warn(`[Sentry] ${message}`);
+    }
+  }
+  const {
+    debug = false,
+    dsn,
+    enabled = true,
+    enableReplays = false,
+    environment = "production",
+    replaysOnErrorSampleRate = 1,
+    replaysSessionSampleRate = 0.1,
+    sampleRate = 1
+  } = options;
+  if (!enabled || !dsn) {
+    if (debug) {
+      logWarning(`Initialization skipped: Sentry is disabled or DSN is not provided. enabled=${enabled}, dsn=${dsn}`);
+    }
+    return;
+  }
+  const integrations = [];
+  if (enableReplays) {
+    const replayIntegration = Sentry.replayIntegration({
+      blockAllMedia: true,
+      maskAllInputs: true,
+      maskAllText: true
+    });
+    integrations.push(replayIntegration);
+  }
+  Sentry.init({
+    app,
+    debug,
+    dsn,
+    environment,
+    integrations,
+    replaysOnErrorSampleRate,
+    replaysSessionSampleRate,
+    sampleRate
+  });
+  if (debug) {
+    logWarning(`Initialized with DSN: ${dsn}`);
+  }
+}
+
+function registerAppInstrumentations(instrumentations) {
+  registerInstrumentations({
+    instrumentations: [
+      new UserInteractionInstrumentation({
+        eventNames: [
+          "click",
+          "change",
+          "keydown"
+        ]
+      }),
+      new FetchInstrumentation({
+        propagateTraceHeaderCorsUrls: /.*/
+      }),
+      ...instrumentations ?? []
+    ]
+  });
+}
+
+class Telemetry {
+  constructor(options) {
+    this.options = options;
+  }
+  captureException(error, context) {
+    Sentry.captureException(error, {
+      contexts: {
+        additional: context
+      }
+    });
+  }
+  captureMessage(message, level) {
+    Sentry.captureMessage(message, level);
+  }
+  async init(app) {
+    if (this.options.sentry?.dsn !== void 0) {
+      initSentry(app, this.options.sentry);
+    }
+    if (this.options.openTelemetry !== void 0 && this.options.openTelemetry?.enabled !== false) {
+      await initOpenTelemetry(this.options.openTelemetry);
+    }
+  }
+  setExtra(key, value) {
+    Sentry.setExtra(key, value);
+  }
+  setTag(key, value) {
+    Sentry.setTag(key, value);
+  }
+  setTags(tags) {
+    Sentry.setTags(tags);
+  }
+  setUser(user) {
+    Sentry.setUser(user);
+  }
+}
+
+export { Telemetry, registerAppInstrumentations };

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@wisemen/vue-core-telemetry",
+  "type": "module",
+  "version": "0.0.1",
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "cleanup": "rimraf dist/ node_modules/ .turbo/",
+    "dev": "unbuild --stub",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "release": "bumpp && npm publish",
+    "start": "esno src/index.ts",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "3.5.18"
+  },
+  "dependencies": {
+    "@opentelemetry/context-zone": "2.0.1",
+    "@opentelemetry/core": "2.0.1",
+    "@opentelemetry/exporter-trace-otlp-http": "0.203.0",
+    "@opentelemetry/instrumentation": "0.203.0",
+    "@opentelemetry/instrumentation-fetch": "0.203.0",
+    "@opentelemetry/instrumentation-user-interaction": "0.48.0",
+    "@opentelemetry/otlp-exporter-base": "0.203.0",
+    "@opentelemetry/resources": "2.0.1",
+    "@opentelemetry/sdk-trace-base": "2.0.1",
+    "@opentelemetry/sdk-trace-web": "2.0.1",
+    "@opentelemetry/semantic-conventions": "1.36.0",
+    "@sentry/integrations": "7.114.0",
+    "@sentry/tracing": "7.120.4",
+    "@sentry/vue": "10.0.0"
+  },
+  "devDependencies": {
+    "@number-flow/vue": "0.4.8",
+    "@types/node": "catalog:",
+    "@wisemen/eslint-config-vue": "catalog:",
+    "bumpp": "catalog:",
+    "eslint": "catalog:",
+    "esno": "catalog:",
+    "rimraf": "catalog:",
+    "typescript": "catalog:",
+    "unbuild": "catalog:",
+    "vite": "catalog:",
+    "vitest": "catalog:",
+    "vitest-localstorage-mock": "0.1.2"
+  }
+}