Practical ZTracer snippets for common use cases.
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" }
}
});
// 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"
});
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" });
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}`);
}
});
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.
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.
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.
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.