@quartix/web-logger (Enterprise)

High-performance, centralized logging SDK for modern web applications. Automatically capture, batch, and sync logs from your Frontend and Backend directly to your Project Mate dashboard.

🚀 Key Features

• 📦 Smart Batching: Logs are buffered and sent in batches every 2s to maximize app performance.
• 🔗 Distributed Tracing: Automatically syncs Frontend and Backend logs using unique traceId correlation.
• 🛡️ PII Masking: Automatically scrubs sensitive data (passwords, tokens, credit cards) before they leave the client.
• 🍞 Breadcrumbs: Captures a rolling history of events leading up to an error for faster debugging.
• 🌐 Cross-Platform: First-class support for both Browser (Vite/React/Next.js) and Node.js (Express/Hono).
• 📡 Offline Resilience: Automatically caches logs in localStorage if the user is offline and syncs when they return.
• 🚥 Log Sampling: Control database volume by sampling a percentage of info logs while keeping 100% of errors.

🛠 Installation

npm install @quartix/web-logger

📖 Quick Start

1. Initialize (Frontend or Backend)

Create a centralized logger instance:

// src/lib/logger.ts
import { initLogger, captureGlobalErrors } from "@quartix/web-logger";

const logger = initLogger({
  projectId: "your-project-uuid", // Find this in your Project Mate dashboard
  batchInterval: 2000,
  logToServer: process.env.NODE_ENV === "production", // Only send to DB in prod
});

// Capture uncaught exceptions and promise rejections automatically
captureGlobalErrors(logger);

export default logger;

2. React Integration

Import the logger at the top of your main.tsx or App.tsx to start capturing events immediately.

import logger from "./lib/logger";

function App() {
  const handleClick = () => {
    logger.breadcrumb("User clicked sync button");
    logger.info("Starting data sync...");
  };
  
  return <button onClick={handleClick}>Sync Now</button>;
}

3. Express Middleware (Morgan Style)

Sync your backend API traffic to your dashboard automatically.

import express from "express";
import { expressMiddleware } from "@quartix/web-logger";
import logger from "./lib/logger";

const app = express();
app.use(expressMiddleware(logger)); // Captures method, status, duration, and URL

🖥 Viewing Your Logs

Once initialized, all logs are streamed to your centralized dashboard:

1. Login to Project Mate.
2. Navigate to Developer Tools > Centralized Logs in the sidebar.
3. Select your Project from the dropdown to see real-time log activity.
4. Click on any log to see full metadata, including user-agent, IP address, and Breadcrumbs.

⚙️ Advanced Configuration

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | projectId | string | Required | Your project's unique ID. | | minLevel | string | 'debug' | Minimum level to send (info, warn, error, debug). | | samplingRate| number | 1.0 | 0.0 to 1.0 (Percentage of info logs to keep). | | logToConsole| boolean| true | Whether to print logs to the local terminal/console. | | captureErrors| boolean| false | (Legacy) Use captureGlobalErrors(logger) instead. |

License

ISC © Quartix.in