Mini-Build: Error Logger Utility
Build a reusable error logging utility - capture errors with context, categorize severity, format for display, and store error history. This pattern is used in production apps for error tracking (like Sentry).
Error Logger Features
- Log errors with severity (info, warn, error, fatal)
- Capture context (where, when, user action)
- Store error history in memory
- Filter errors by severity
- Display formatted error report
- This pattern powers tools like Sentry, LogRocket, Bugsnag
Error Logger Code
// Error Logger Utility
class ErrorLogger {
constructor(appName = "App") {
this.appName = appName;
this.logs = [];
}
log(severity, message, context = {}) {
const entry = {
id: this.logs.length + 1,
severity,
message,
context,
timestamp: new Date().toISOString(),
app: this.appName
};
this.logs.push(entry);
const icons = { info: "ℹ️", warn: "⚠️", error: "❌", fatal: "💀" };
console.log(`${icons[severity] || "📝"} [${severity.toUpperCase()}] ${message}`);
if (Object.keys(context).length) console.log(" Context:", context);
return entry;
}
info(msg, ctx) { return this.log("info", msg, ctx); }
warn(msg, ctx) { return this.log("warn", msg, ctx); }
error(msg, ctx) { return this.log("error", msg, ctx); }
fatal(msg, ctx) { return this.log("fatal", msg, ctx); }
getByLevel(severity) {
return this.logs.filter(l => l.severity === severity);
}
getReport() {
const counts = this.logs.reduce((acc, log) => {
acc[log.severity] = (acc[log.severity] || 0) + 1;
return acc;
}, {});
return { total: this.logs.length, counts, recent: this.logs.slice(-5) };
}
clear() { this.logs = []; }
}
// Demo
const logger = new ErrorLogger("Priygop");
logger.info("App started");
logger.info("User logged in", { userId: "123", method: "email" });
logger.warn("API response slow", { endpoint: "/api/users", ms: 2500 });
logger.error("Failed to fetch data", { status: 500, url: "/api/posts" });
logger.error("Payment failed", { orderId: "ORD-456", reason: "Card declined" });
logger.fatal("Database connection lost", { host: "db.example.com" });
// Report
console.log("\n📊 Error Report:");
const report = logger.getReport();
console.log(`Total: ${report.total} entries`);
console.log("Counts:", report.counts);
// Filter errors only
console.log("\n❌ Errors only:");
logger.getByLevel("error").forEach(e => console.log(` ${e.message}`));Tip
Tip
In production, use error tracking services like Sentry, LogRocket, or Bugsnag. They capture errors, stack traces, and user context automatically. This is how professional teams detect and fix bugs users encounter.
Never swallow errors silently. Log, report, recover gracefully.
Common Mistake
Warning
Logging sensitive data in error reports. Never log passwords, tokens, credit card numbers, or PII. Sanitize error context before sending to tracking services. This is a compliance requirement (GDPR, PCI-DSS).
Practice Task
Note
Error system: (1) Build a centralized error handler that categorizes errors by severity. (2) Add window.onerror and unhandledrejection listeners. (3) Create an error reporting function that sends errors to a mock endpoint.
Quick Quiz
Key Takeaways
- Build a reusable error logging utility - capture errors with context, categorize severity, format for display, and store error history.
- Log errors with severity (info, warn, error, fatal)
- Capture context (where, when, user action)
- Store error history in memory