Documentation

Nuxt

Nuxt is Vue-based, so use @tacko/telemetry-core directly (there is no telemetry-nuxt package). Add a client plugin to init and a global middleware to track page views. After init(), uncaught errors and unhandled promise rejections in the browser are reported automatically.

Install

pnpm add @tacko/telemetry-core
# or
npm install @tacko/telemetry-core

Runtime config

In nuxt.config.ts expose the ingest URL and app name:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      telemetryIngestUrl: process.env.NUXT_PUBLIC_TELEMETRY_INGEST_URL || "https://your-api.example.com",
      telemetryApp: process.env.NUXT_PUBLIC_TELEMETRY_APP || "my-nuxt-app",
    },
  },
});

Plugin (client-only)

Create plugins/telemetry.client.ts:

import { init } from "@tacko/telemetry-core";

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig();
  init({
    ingestUrl: config.public.telemetryIngestUrl as string,
    app: config.public.telemetryApp as string,
    platform: "web",
    environment: process.dev ? "development" : "production",
  });
});

Page tracking

Create middleware/telemetry.global.ts to send a screen event on each route:

import { screen } from "@tacko/telemetry-core";

export default defineNuxtRouteMiddleware((to) => {
  if (import.meta.client) {
    screen(to.path || "/");
  }
});

Custom events and errors

import { trackEvent, trackError } from "@tacko/telemetry-core";

trackEvent("button_click", { id: "submit" });
trackError(new Error("Something broke"), { page: "/checkout" });

Core registers window.onerror and unhandledrejection after init(), so uncaught errors and promise rejections are reported automatically. Use trackError() in try/catch for extra context.

Optional: identify user

import { identify } from "@tacko/telemetry-core";

identify(user.id);  // after login
identify(null);     // on logout