Examples

Practical ZTracer snippets for common use cases.

Common Setup

All examples use this shared configuration. For a detailed explanation of each option, see Core Concepts.

import ZTracer from "z-tracer-kit";
type Groups = "api" | "db" | "auth";
const logger = new ZTracer<Groups>({
  global: { debug: true },
  groups: {
    api: { background: "#0d6efd", color: "#fff" },
    db:  { background: "#198754", color: "#fff" },
    auth:{ background: "#dc3545", color: "#fff" }
  }
});

Basic Logging

// Plain log
await logger.log("Hello, world!");
// With group
await logger.log("User logged in", { group: "auth" });
// With group + suffix
await logger.log("Request received", {
  group: "api",
  suffix: "req-123"
});

Structured Data (fromJson)

// Array → console.table
await logger.fromJson([
  { id: 1, name: "Alice", role: "admin" },
  { id: 2, name: "Bob", role: "user" }
], { group: "db", suffix: "users" });
// Object → console.dir (expandable)
await logger.fromJson({
  user: {
    profile: { name: "Alice", email: "alice@example.com" }
  }
}, { group: "api" });

Timing (time)

// Time an async operation
await logger.time(async () => {
  await fetch("https://api.example.com/data");
}, { group: "api" });
// Time a sync operation with a specific callback
await logger.time(() => {
  heavyComputation();
}, {
  group: "db",
  callBack: async (data, group) => {
    console.log(`Timer done for ${group}`);
  }
});

Node.js / Express

import express from "express";
import logger from "./logger.js";
const app = express();
// Request logging middleware
app.use(async (req, res, next) => {
  await logger.log(`${req.method} ${req.path}`, {
    group: "api",
    suffix: req.ip
  });
  next();
});
app.get("/users", async (req, res) => {
  await logger.time(async () => {
    const users = await getUsers();
    res.json(users);
  }, { group: "db" });
});
app.listen(3000);

See the full Node.js example in the GitHub repository.

Browser / React

import { useEffect } from "react";
import logger from "./logger.js";
function UserProfile({ userId }) {
  useEffect(() => {
    logger.log(`Profile mounted for ${userId}`, {
      group: "auth",
      suffix: "mount"
    });
    const fetchUser = async () => {
      await logger.time(async () => {
        const res = await fetch(`/api/users/${userId}`);
        const data = await res.json();
        // update state...
      }, { group: "api" });
    };
    fetchUser();
    return () => {
      logger.log("Profile unmounted", { group: "auth" });
    };
  }, [userId]);
  return <div>...</div>;
}

For browser setup without a bundler, see the Getting Started guide.

CommonJS Example

Using ZTracer in a CommonJS project ("type": "commonjs" in package.json):

// index.cjs
const { ZTracer } = require("z-tracer-kit");
const logger = new ZTracer({
  global: { debug: true },
  groups: {
    api: { background: "#0d6efd", color: "#fff" },
    db:  { background: "#198754", color: "#fff" }
  }
});
(async () => {
  await logger.log("Hello from CJS!", { group: "api" });
  await logger.fromJson([
    { id: 1, name: "Ali" }
  ], { group: "db" });
  await logger.time(async () => {
    await new Promise(r => setTimeout(r, 100));
  }, { group: "api" });
})();

For a complete test project, see the example/cjs/ folder in the GitHub repository.

TypeScript

import ZTracer, { ZTracerConfig, ZTracerOptions } from "z-tracer-kit";
type Group = "api" | "db";
const config: ZTracerConfig<Group> = {
  global: { debug: true },
  groups: {
    api: { background: "#0d6efd" },
    db:  { background: "#198754" }
  }
};
const logger = new ZTracer(config);
// Type-safe group names
await logger.log("Hello", { group: "api" });
// ❌ TypeScript error if you use "invalid"

For more on TypeScript, visit the TypeScript Guide.

Next: Learn about TypeScript or dive into Runtime & Styling.