devLogger – Once UI

The dev logger is a client-side utility that wraps console methods to only output logs in development mode. This prevents debug messages from appearing in production builds.

Features

Only logs in development environment
Supports all console methods: log, warn, error, info, debug
Drop-in replacement for console methods
Zero overhead in production

Basic usage

Import and use like the standard console:

Component.tsx

import { dev } from '@once-ui-system/core';

function MyComponent() {
dev.log('Component rendered');
dev.warn('This is a warning');
dev.error('This is an error');

return <div>Hello World</div>;
}

Available methods

All standard console methods are available:

Usage examples

import { dev } from '@once-ui-system/core';

// General logging
dev.log('Debug message', { data: 'value' });

// Warnings
dev.warn('Something might be wrong');

// Errors
dev.error('An error occurred', error);

// Info
dev.info('Informational message');

// Debug
dev.debug('Detailed debug info');

Why use devLogger?

Without devLogger

function MyComponent() {
// This will log in production! 😱
console.log('User data:', userData);

// Manual checks are verbose
if (process.env.NODE_ENV === 'development') {
  console.log('Debug info');
}

return <div>Content</div>;
}

With devLogger

import { dev } from '@once-ui-system/core';

function MyComponent() {
// Only logs in development ✅
dev.log('User data:', userData);
dev.log('Debug info');

return <div>Content</div>;
}

Benefits

Clean production builds: No debug logs in production
Better performance: No unnecessary console operations in production
Security: Prevents accidental data leaks through console logs
Convenience: No need for manual environment checks

API Reference

Prop	Type	Default
devLogger.log	(...args: any[]) => void	—
devLogger.warn	(...args: any[]) => void	—
devLogger.error	(...args: any[]) => void	—
devLogger.info	(...args: any[]) => void	—
devLogger.debug	(...args: any[]) => void	—

Best practices

Use for debugging

Debugging hooks

import { dev } from '@once-ui-system/core';

function useCustomHook(data: any) {
dev.log('Hook called with:', data);

useEffect(() => {
  dev.log('Effect running');
  return () => dev.log('Effect cleanup');
}, []);

return processedData;
}

Use for development feedback

API debugging

import { dev } from '@once-ui-system/core';

async function fetchData() {
dev.log('Fetching data...');

try {
  const response = await fetch('/api/data');
  const data = await response.json();
  dev.log('Data received:', data);
  return data;
} catch (error) {
  dev.error('Fetch failed:', error);
  throw error;
}
}

Don't use for production errors

For errors that should be tracked in production, use regular console.error or an error tracking service:

Error handling

import { dev } from '@once-ui-system/core';

function handleError(error: Error) {
// ❌ Don't use dev for production errors
dev.error('Critical error:', error);

// ✅ Use regular console or error tracking
console.error('Critical error:', error);
// or: errorTracker.captureException(error);
}