Vite

Vite builds a plain client-side bundle, so setup is simpler than a framework with server rendering — initialize the SDK once from your entry file, before or alongside your application mount.

Install

npm install ucoder-insight

Initialize

import { initUcoderInsight } from "ucoder-insight";

void initUcoderInsight("YOUR_PUBLIC_TRACKING_ID");

// ...your existing app bootstrap code (createApp, ReactDOM.render, etc.)

Initialize once in main.ts / main.tsx. Do not call initUcoderInsight again elsewhere in your app.

The tracking ID is meant to be public — it identifies the project and is safe to expose in client-side code.

Using an environment variable

Instead of hardcoding the tracking ID, keep it in an env file. Vite only exposes variables to client code when they're prefixed with VITE_:

VITE_UCODER_TRACKING_ID=your_public_tracking_id

import { initUcoderInsight } from "ucoder-insight";

void initUcoderInsight(import.meta.env.VITE_UCODER_TRACKING_ID);

If you're using TypeScript, declare the variable's type so import.meta.env is type-checked:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_UCODER_TRACKING_ID: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Using Vite with React

If you're using Vite to bundle a React app, initialize the SDK inside a useEffect the same way as a plain React app — see the React guide for the component pattern and automatic route-change tracking. Just read the tracking ID from import.meta.env instead of process.env:

import { useEffect } from "react";
import { initUcoderInsight } from "ucoder-insight";

export default function Analytics() {
  useEffect(() => {
    void initUcoderInsight(import.meta.env.VITE_UCODER_TRACKING_ID);
  }, []);

  return null;
}

Things to check

See Configuration for supported SDK options.