@archbase/tools

Developer tools and utilities for debugging, performance monitoring, and development workflows.

Installation

``bash
npm install @archbase/tools


or

`typescript
import { logger } from '@archbase/tools';

// Basic logging
logger.info('User logged in', { userId: 123 });
logger.warn('Deprecated API usage');
logger.error('Authentication failed');

// Grouped logging
logger.group('API Request');
logger.info('Sending request to /api/users');
logger.success('Request completed');
logger.groupEnd();

// Performance timing
logger.time('data-fetch');
// ... some async operation
logger.timeEnd('data-fetch');
`

#### ArchbaseDebugPanel
Real-time debug panel for monitoring application events.

`typescript
import { ArchbaseDebugPanel, emitDebugInfo } from '@archbase/tools';

// Add to your app
function App() {
return (


// Emit debug events
emitDebugInfo({
type: 'api',
message: 'User data fetched',
data: userData
});
`

$3

#### ArchbasePerformanceMonitor
Track and analyze performance metrics with statistics.

`typescript
import { performanceMonitor } from '@archbase/tools';

// Start/end measurements
performanceMonitor.start('api-call');
await fetchUserData();
const duration = performanceMonitor.end('api-call');

// Get statistics
const stats = performanceMonitor.getStats('api-call');
console.log(stats); // { count, total, average, min, max, median }

// Generate report
performanceMonitor.report();
`

#### useArchbaseRenderTracker
React hook to track component render performance.

`typescript
import { useArchbaseRenderTracker } from '@archbase/tools';

function MyComponent(props) {
const renderInfo = useArchbaseRenderTracker('MyComponent', props);

// renderInfo contains:
// - componentName
// - renderCount
// - lastRenderTime
// - averageRenderTime

return

`typescript
import { useArchbaseWhyDidYouRender } from '@archbase/tools';

function MyComponent(props) {
useArchbaseWhyDidYouRender('MyComponent', props);

// Will log to debug panel when props change
return

`typescript
import { ArchbaseLocalStorageViewer } from '@archbase/tools';

function DevTools() {
return (


`typescript
import { ArchbaseNetworkMonitor } from '@archbase/tools';

function DevTools() {
return (


`typescript
import { ArchbaseStateInspector } from '@archbase/tools';

// Define your stores
const stores = [
{
name: 'User Store',
type: 'zustand' as const,
getState: () => userStore.getState(),
subscribe: (listener) => userStore.subscribe(listener)
},
{
name: 'App Store',
type: 'redux' as const,
getState: () => store.getState(),
subscribe: (listener) => store.subscribe(listener)
}
];

function DevTools() {
return (


`typescript
import { ArchbaseErrorBoundary } from '@archbase/tools';

function App() {
return (
showStack={process.env.NODE_ENV === 'development'}
logToConsole={true}
onError={(error, errorInfo) => {
// Custom error handling
console.error('App error:', error);
}}
fallback={(error, errorInfo) => (


`typescript
import { ArchbaseDataSourceInspector, useArchbaseDataSourceDebug } from '@archbase/tools';

// Define your DataSources to monitor
const dataSources = [
{
name: 'Users DataSource',
dataSource: userDataSource
},
{
name: 'Products DataSource',
dataSource: productDataSource
}
];

function DevTools() {
return (
dataSources={dataSources}
autoDiscover={true} // Auto-discover DataSources in development
hotkey="ctrl+shift+D"
visible={false}
position="top-right"
maxOperations={100}
/>
);
}

// Or use the debug hook for individual DataSources
function MyComponent() {
const userDataSource = useArchbaseDataSource(/.../);

// Enable debug monitoring
const debugInfo = useArchbaseDataSourceDebug(
userDataSource,
'UserDataSource',
{
logOperations: true,
monitorState: true,
trackPerformance: true,
maxHistory: 50
}
);

// Access debug information
console.log('Current state:', debugInfo.currentState);
console.log('Operations:', debugInfo.operations);
console.log('Performance:', debugInfo.performanceStats);

return

`typescript
import { useArchbaseDataSourceDebug } from '@archbase/tools';

const debugInfo = useArchbaseDataSourceDebug(dataSource, 'MyDataSource', {
logOperations: true, // Log all operations
monitorState: true, // Monitor state changes
trackPerformance: true, // Track operation performance
maxHistory: 100 // Keep last 100 operations
});

// Available debug information:
// - debugInfo.operations: Array of all operations
// - debugInfo.currentState: Current DataSource state
// - debugInfo.performanceStats: Performance statistics
// - debugInfo.getOperationHistory(methodName): Filter operations
// - debugInfo.clearHistory(): Clear operation history
// - debugInfo.exportDebugData(): Export all debug data
`

`typescript
import { memoryLeakDetector } from '@archbase/tools';

// Start monitoring
memoryLeakDetector.startMonitoring(5000); // Check every 5 seconds

// Get statistics
const stats = memoryLeakDetector.getMemoryStats();
console.log('Memory usage:', stats.current);
console.log('Peak usage:', stats.peak);
console.log('Growth:', stats.growth + '%');
console.log('Suspicions:', stats.suspicions);

// Force garbage collection (Chrome DevTools only)
memoryLeakDetector.forceGarbageCollection();

// Export data for analysis
const data = memoryLeakDetector.exportData();
console.log(data);

// Stop monitoring
memoryLeakDetector.stopMonitoring();
`

Complete Development Setup

Here's a complete example of setting up all development tools:

`typescript
import React from 'react';
import {
ArchbaseDebugPanel,
ArchbaseErrorBoundary,
ArchbaseLocalStorageViewer,
ArchbaseNetworkMonitor,
ArchbaseStateInspector,
ArchbaseDataSourceInspector,
memoryLeakDetector,
logger
} from '@archbase/tools';

// Start memory monitoring in development
if (process.env.NODE_ENV === 'development') {
memoryLeakDetector.startMonitoring(10000);
}

function DevToolsPanel() {
const [activeTab, setActiveTab] = React.useState('localStorage');

return (


`typescript
const isDev = process.env.NODE_ENV === 'development';

// Only include dev tools in development builds
{isDev && }
``

Contributing

This package is part of the Archbase React ecosystem. See the main repository for contribution guidelines.

License

MIT License