debug-time-machine
Version:
제로 설정 React 디버깅 도구
258 lines (255 loc) • 6.29 kB
text/typescript
interface IDebugTimeMachineConfig {
/**
* WebSocket URL for the Debug Time Machine server
* @default "ws://localhost:4000/ws"
*/
websocketUrl?: string;
/**
* Enable debug mode (console logs)
* @default true in development, false in production
*/
debugMode?: boolean;
/**
* Automatically capture user interactions
* @default true
*/
captureUserActions?: boolean;
/**
* Automatically capture errors
* @default true
*/
captureErrors?: boolean;
/**
* Automatically capture React state changes
* @default true
*/
captureStateChanges?: boolean;
/**
* Maximum number of reconnection attempts
* @default 5
*/
maxReconnectAttempts?: number;
/**
* Reconnection interval in milliseconds
* @default 5000
*/
reconnectInterval?: number;
/**
* Only enable in development environment
* @default false
*/
developmentOnly?: boolean;
/**
* Automatically connect to Debug Time Machine server if available
* @default true
*/
autoConnect?: boolean;
/**
* Enable time travel engine
* @default true
*/
enableTimeTravelEngine?: boolean;
/**
* Enable memory management
* @default true
*/
enableMemoryManagement?: boolean;
/**
* Enable DOM snapshots
* @default false
*/
enableDOMSnapshots?: boolean;
/**
* Enable metrics collection
* @default true
*/
enableMetrics?: boolean;
/**
* Time travel engine configuration
*/
timeTravelConfig?: any;
/**
* Memory management configuration
*/
memoryConfig?: any;
/**
* DOM snapshot configuration
*/
domSnapshotConfig?: any;
}
interface IDebugTimeMachineHookReturn {
/**
* Whether the client is connected to the server
*/
isConnected: boolean;
/**
* Current client ID assigned by the server
*/
clientId: string | null;
/**
* Manual reconnection function
*/
reconnect: () => void;
/**
* Send a custom message to the server
*/
sendMessage: (type: string, data: any) => boolean;
/**
* Manually capture an error
*/
captureError: (error: Error, errorInfo?: any) => void;
/**
* Manually capture a state change
*/
captureStateChange: (componentName: string, prevState: any, newState: any, props?: any) => void;
/**
* Connection status information
*/
connectionInfo: IConnectionInfo;
/**
* Check if a network request should be captured
*/
shouldCaptureNetworkRequest: (request: any) => boolean;
/**
* Check if a network response should be captured
*/
shouldCaptureNetworkResponse: (response: any) => boolean;
/**
* Create a snapshot of the current state
*/
createSnapshot: (state: Record<string, unknown>, actionType: string, description?: string) => any;
/**
* Restore a snapshot by ID
*/
restoreSnapshot: (snapshotId: string) => boolean;
/**
* Get performance metrics
*/
getPerformanceMetrics: () => any;
/**
* Get system metrics
*/
getSystemMetrics: () => any;
/**
* Get memory usage
*/
getMemoryUsage: () => any;
/**
* Clear all snapshots
*/
clearSnapshots: () => void;
/**
* Export metrics
*/
exportMetrics: () => any;
/**
* Get network metrics
*/
getNetworkMetrics: () => any;
/**
* Clear network history
*/
clearNetworkHistory: () => void;
/**
* Export network data
*/
exportNetworkData: () => void;
timeTravelEngine: any;
metricsCollector: any;
domSnapshotOptimizer: any;
networkInterceptor: any;
performanceMetrics: any;
systemMetrics: any;
memoryUsage: any;
networkRequests: any[];
networkResponses: any[];
}
interface IConnectionInfo {
connectedAt: Date | null;
reconnectAttempts: number;
lastError: string | null;
}
interface IUserActionData {
actionType: string;
element: string;
coordinates: {
x: number;
y: number;
pageX?: number;
pageY?: number;
};
target: {
id: string;
className: string;
tagName: string;
textContent?: string;
};
value?: any;
timestamp: number;
url: string;
priority?: 'low' | 'medium' | 'high' | 'critical';
selector?: string;
xpath?: string;
attributes?: {
[key: string]: string;
};
}
interface IStateChangeData {
componentName: string;
prevState?: any;
newState: any;
props?: any;
stackTrace?: string[];
timestamp: number;
url: string;
}
interface IErrorData {
message: string;
stack?: string;
filename?: string;
lineno?: number;
colno?: number;
timestamp: number;
url: string;
userAgent: string;
errorInfo?: any;
level?: 'info' | 'warning' | 'error' | 'critical';
source?: 'javascript' | 'promise' | 'console' | 'react';
context?: any;
}
interface IConnectionData {
type: TConnectionType;
clientId?: string;
url?: string;
userAgent?: string;
message?: string;
timestamp: number;
}
type TConnectionType = 'welcome' | 'client_ready' | 'debugger_ready' | 'dashboard_ready' | 'disconnect';
declare enum MessageType {
CONNECTION = "CONNECTION",
USER_ACTION = "USER_ACTION",
STATE_CHANGE = "STATE_CHANGE",
ERROR = "ERROR",
PING = "PING",
PONG = "PONG"
}
interface IMessage {
type: MessageType;
timestamp: number;
clientId?: string;
data: any;
}
declare global {
interface XMLHttpRequest {
_debugTM?: {
requestId: string;
method: string;
url: string;
startTime: number;
shouldCapture: boolean;
};
}
}
declare function useDebugTimeMachine(userConfig?: IDebugTimeMachineConfig): IDebugTimeMachineHookReturn;
export { type IConnectionData, type IConnectionInfo, type IDebugTimeMachineConfig, type IDebugTimeMachineHookReturn, type IErrorData, type IMessage, type IStateChangeData, type IUserActionData, MessageType, type TConnectionType, useDebugTimeMachine };