From 84758e29425463ae8670ed853c95b1fcb8e24f8d Mon Sep 17 00:00:00 2001 From: shinchan-zhai Date: Mon, 23 Mar 2026 09:31:37 +0800 Subject: [PATCH] chore: remove ~100 debug console.log statements from frontend MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cleaned up verbose debug logging left from development: - AdvancedChart.tsx: removed ~50 debug logs (time parsing, order fetching, marker creation) - ChartWithOrders.tsx: removed debug logs and unused klineMinTime/klineMaxTime variables - ChartWithOrdersSimple.tsx: removed data loading debug logs - ChartTabs.tsx: removed render/selection debug logs - ComparisonChart.tsx: removed equity history debug logs - AITradersPage.tsx: removed ๐Ÿ”ฅ DEBUG logs from handleSaveEditTrader - App.tsx: removed mount debug log Kept legitimate console.error/console.warn for actual error handling. --- web/src/App.tsx | 1 - web/src/components/charts/AdvancedChart.tsx | 54 ++----------------- web/src/components/charts/ChartTabs.tsx | 2 - web/src/components/charts/ChartWithOrders.tsx | 21 -------- .../charts/ChartWithOrdersSimple.tsx | 5 -- web/src/components/charts/ComparisonChart.tsx | 2 - web/src/components/trader/AITradersPage.tsx | 5 -- 7 files changed, 4 insertions(+), 86 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index 5da6516b..211be224 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -57,7 +57,6 @@ function App() { // Debug log useEffect(() => { - console.log('[App] Mounted. Route:', window.location.pathname); }, []); // ไปŽURL่ทฏๅพ„่ฏปๅ–ๅˆๅง‹้กต้ข็Šถๆ€๏ผˆๆ”ฏๆŒๅˆทๆ–ฐไฟๆŒ้กต้ข๏ผ‰ diff --git a/web/src/components/charts/AdvancedChart.tsx b/web/src/components/charts/AdvancedChart.tsx index 1b2dc62a..99b1ca75 100644 --- a/web/src/components/charts/AdvancedChart.tsx +++ b/web/src/components/charts/AdvancedChart.tsx @@ -198,23 +198,17 @@ export function AdvancedChart({ if (typeof time === 'number') { // Determine ms vs seconds: if > 10^12, treat as milliseconds if (time > 1000000000000) { - const seconds = Math.floor(time / 1000) - console.log('[AdvancedChart] โœ… Unix timestamp (msโ†’s):', time, 'โ†’', seconds, '(', new Date(time).toISOString(), ')') - return seconds + return Math.floor(time / 1000) } - console.log('[AdvancedChart] โœ… Unix timestamp (s):', time, '(', new Date(time * 1000).toISOString(), ')') return time } const timeStr = String(time) - console.log('[AdvancedChart] Parsing time string:', timeStr) // Try standard ISO format const isoTime = new Date(timeStr).getTime() if (!isNaN(isoTime) && isoTime > 0) { - const timestamp = Math.floor(isoTime / 1000) - console.log('[AdvancedChart] โœ… Parsed as ISO:', timeStr, 'โ†’', timestamp, '(', new Date(timestamp * 1000).toISOString(), ')') - return timestamp + return Math.floor(isoTime / 1000) } // Parse custom format "MM-DD HH:mm UTC" (for legacy data) @@ -229,35 +223,27 @@ export function AdvancedChart({ parseInt(hour), parseInt(minute) )) - const timestamp = Math.floor(date.getTime() / 1000) - console.log('[AdvancedChart] โœ… Parsed as custom format:', timeStr, 'โ†’', timestamp, '(', new Date(timestamp * 1000).toISOString(), ')') - return timestamp + return Math.floor(date.getTime() / 1000) } - console.error('[AdvancedChart] โŒ Failed to parse time:', timeStr) + console.warn('[AdvancedChart] Failed to parse time:', timeStr) return 0 } // Fetch order data const fetchOrders = async (traderID: string, symbol: string): Promise => { try { - console.log('[AdvancedChart] Fetching orders for trader:', traderID, 'symbol:', symbol) // Fetch filled orders, up to 200 for more history const result = await httpClient.get(`/api/orders?trader_id=${traderID}&symbol=${symbol}&status=FILLED&limit=200`) - console.log('[AdvancedChart] Orders API response:', result) - if (!result.success || !result.data) { - console.warn('[AdvancedChart] No orders found, result:', result) return [] } const orders = result.data - console.log('[AdvancedChart] Raw orders data:', orders) const markers: OrderMarker[] = [] orders.forEach((order: any) => { - console.log('[AdvancedChart] Processing order:', order) // Handle field names: support PascalCase and snake_case const filledAt = order.filled_at || order.FilledAt || order.created_at || order.CreatedAt @@ -295,15 +281,6 @@ export function AdvancedChart({ positionSide = side === 'buy' ? 'long' : 'short' } - console.log('[AdvancedChart] Order marker:', { - time: timeSeconds, - price: avgPrice, - side: positionSide, - rawSide: side, - action, - orderAction - }) - markers.push({ time: timeSeconds, price: avgPrice, @@ -314,7 +291,6 @@ export function AdvancedChart({ }) }) - console.log('[AdvancedChart] Final markers:', markers) return markers } catch (err) { console.error('[AdvancedChart] Error fetching orders:', err) @@ -325,11 +301,8 @@ export function AdvancedChart({ // Fetch exchange open orders (TP/SL) const fetchOpenOrders = async (traderID: string, symbol: string): Promise => { try { - console.log('[AdvancedChart] Fetching open orders for trader:', traderID, 'symbol:', symbol) const result = await httpClient.get(`/api/open-orders?trader_id=${traderID}&symbol=${symbol}`) - console.log('[AdvancedChart] Open orders API response:', result) - if (!result.success || !result.data) { console.warn('[AdvancedChart] No open orders found') return [] @@ -516,7 +489,6 @@ export function AdvancedChart({ const loadData = async (isRefresh = false) => { if (!candlestickSeriesRef.current) return - console.log('[AdvancedChart] Loading data for', symbol, interval, isRefresh ? '(refresh)' : '') // Only show loading on first load, avoid flicker on refresh if (!isRefresh) { setLoading(true) @@ -526,7 +498,6 @@ export function AdvancedChart({ try { // 1. Fetch kline data const klineData = await fetchKlineData(symbol, interval) - console.log('[AdvancedChart] Loaded', klineData.length, 'klines') candlestickSeriesRef.current.setData(klineData) // Store volume/quoteVolume data for tooltip @@ -587,18 +558,14 @@ export function AdvancedChart({ // 4. Fetch and display order markers if (traderID && candlestickSeriesRef.current) { - console.log('[AdvancedChart] Starting to fetch orders...') const orders = await fetchOrders(traderID, symbol) - console.log('[AdvancedChart] Received orders:', orders) if (orders.length > 0) { - console.log('[AdvancedChart] Creating markers from', orders.length, 'orders') // Extract sorted kline time array const klineTimes = klineData.map((k: any) => k.time as number) const klineMinTime = klineTimes[0] || 0 const klineMaxTime = klineTimes[klineTimes.length - 1] || 0 - console.log('[AdvancedChart] Kline time range:', klineMinTime, '-', klineMaxTime, '(', klineTimes.length, 'candles)') // Binary search: find the kline candle for the order time // Return the largest kline time <= orderTime @@ -682,10 +649,7 @@ export function AdvancedChart({ // Sort by time (lightweight-charts requires chronological order) markers.sort((a, b) => (a.time as number) - (b.time as number)) - console.log('[AdvancedChart] Valid markers:', markers.length, 'out of', orders.length) - console.log('[AdvancedChart] Setting', markers.length, 'markers on candlestick series') - console.log('[AdvancedChart] Markers data:', JSON.stringify(markers, null, 2)) try { // Store marker data for later toggle use @@ -701,12 +665,10 @@ export function AdvancedChart({ // First time creating markers seriesMarkersRef.current = createSeriesMarkers(candlestickSeriesRef.current, markersToShow) } - console.log('[AdvancedChart] โœ… Markers updated! Count:', markersToShow.length, 'Visible:', showOrderMarkers) } catch (err) { console.error('[AdvancedChart] โŒ Failed to set markers:', err) } } else { - console.log('[AdvancedChart] No orders found, clearing markers') try { if (seriesMarkersRef.current) { seriesMarkersRef.current.setMarkers([]) @@ -715,11 +677,6 @@ export function AdvancedChart({ console.error('[AdvancedChart] Failed to clear markers:', err) } } - } else { - console.log('[AdvancedChart] Skipping markers:', { - hasTraderID: !!traderID, - hasSeries: !!candlestickSeriesRef.current - }) } // Auto-fit view only on initial load, avoid jitter on refresh @@ -760,7 +717,6 @@ export function AdvancedChart({ priceLinesRef.current = [] const openOrders = await fetchOpenOrders(traderID, symbol) - console.log('[AdvancedChart] Open orders for price lines:', openOrders) if (openOrders.length > 0 && candlestickSeriesRef.current) { openOrders.forEach(order => { @@ -804,7 +760,6 @@ export function AdvancedChart({ priceLinesRef.current.push(priceLine) } }) - console.log('[AdvancedChart] โœ… Created', priceLinesRef.current.length, 'price lines for pending orders') } } catch (err) { console.error('[AdvancedChart] Error loading open orders:', err) @@ -830,7 +785,6 @@ export function AdvancedChart({ try { const markersToShow = showOrderMarkers ? currentMarkersDataRef.current : [] seriesMarkersRef.current.setMarkers(markersToShow) - console.log('[AdvancedChart] ๐Ÿ”„ Toggled markers visibility:', showOrderMarkers, 'Count:', markersToShow.length) } catch (err) { console.error('[AdvancedChart] โŒ Failed to toggle markers:', err) } diff --git a/web/src/components/charts/ChartTabs.tsx b/web/src/components/charts/ChartTabs.tsx index 66923985..8c9fde0e 100644 --- a/web/src/components/charts/ChartTabs.tsx +++ b/web/src/components/charts/ChartTabs.tsx @@ -123,7 +123,6 @@ export function ChartTabs({ traderId, selectedSymbol, updateKey, exchangeId }: C // Auto-switch to kline chart when symbol selected externally useEffect(() => { if (selectedSymbol) { - console.log('[ChartTabs] Symbol selected:', selectedSymbol, 'updateKey:', updateKey) setChartSymbol(selectedSymbol) setActiveTab('kline') } @@ -143,7 +142,6 @@ export function ChartTabs({ traderId, selectedSymbol, updateKey, exchangeId }: C } } - console.log('[ChartTabs] rendering, activeTab:', activeTab) return (
10^12, treat as milliseconds if (time > 1000000000000) { const seconds = Math.floor(time / 1000) - console.log('[ChartWithOrders] โœ… Unix timestamp (msโ†’s):', time, 'โ†’', seconds, '(', new Date(time).toISOString(), ')') return seconds } - console.log('[ChartWithOrders] โœ… Unix timestamp (s):', time, '(', new Date(time * 1000).toISOString(), ')') return time } const timeStr = String(time) - console.log('[ChartWithOrders] Parsing time string:', timeStr) // Try standard ISO format const isoTime = new Date(timeStr).getTime() if (!isNaN(isoTime) && isoTime > 0) { const timestamp = Math.floor(isoTime / 1000) - console.log('[ChartWithOrders] โœ… Parsed as ISO:', timeStr, 'โ†’', timestamp, '(', new Date(timestamp * 1000).toISOString(), ')') return timestamp } @@ -100,7 +96,6 @@ export function ChartWithOrders({ parseInt(minute) )) const timestamp = Math.floor(date.getTime() / 1000) - console.log('[ChartWithOrders] โœ… Parsed as custom format:', timeStr, 'โ†’', timestamp, '(', new Date(timestamp * 1000).toISOString(), ')') return timestamp } @@ -184,7 +179,6 @@ export function ChartWithOrders({ }) }) - console.log(`[ChartWithOrders] Loaded ${markers.length} order markers for ${symbol}`) return markers } catch (err) { console.error('Error fetching orders:', err) @@ -199,7 +193,6 @@ export function ChartWithOrders({ return } - console.log('[ChartWithOrders] Initializing chart for', symbol, interval) try { // Create chart @@ -303,26 +296,19 @@ export function ChartWithOrders({ useEffect(() => { const loadData = async () => { if (!candlestickSeriesRef.current) { - console.log('[ChartWithOrders] Candlestick series not ready yet') return } - console.log('[ChartWithOrders] Loading data for', symbol, interval, 'trader:', traderID) setLoading(true) setError(null) try { // 1. Fetch kline data - console.log('[ChartWithOrders] Fetching kline data...') const klineData = await fetchKlineData(symbol, interval) - console.log('[ChartWithOrders] Kline data received:', klineData.length, 'candles') candlestickSeriesRef.current.setData(klineData) // Build kline time set for quick lookup const klineTimeSet = new Set(klineData.map(k => k.time as number)) - const klineMinTime = klineData.length > 0 ? klineData[0].time : 0 - const klineMaxTime = klineData.length > 0 ? klineData[klineData.length - 1].time : 0 - console.log('[ChartWithOrders] Kline time range:', klineMinTime, '-', klineMaxTime, 'candles:', klineData.length) // Calculate interval in seconds const getIntervalSeconds = (interval: string): number => { @@ -339,16 +325,12 @@ export function ChartWithOrders({ } } const intervalSeconds = getIntervalSeconds(interval) - console.log('[ChartWithOrders] Interval:', interval, '=', intervalSeconds, 'seconds') // 2. Fetch order data and add markers if (traderID) { - console.log('[ChartWithOrders] Fetching orders for trader:', traderID, 'symbol:', symbol) const orders = await fetchOrders(traderID, symbol) - console.log('[ChartWithOrders] Received orders:', orders.length, 'orders') if (orders.length === 0) { - console.log('[ChartWithOrders] No orders to display') } // Convert orders to chart markers, aligned to kline time @@ -385,9 +367,7 @@ export function ChartWithOrders({ }) }) - console.log('[ChartWithOrders] Valid markers (with matching klines):', markers.length, 'out of', orders.length) - console.log('[ChartWithOrders] Setting', markers.length, 'markers on chart') try { // Using v5 API: createSeriesMarkers @@ -398,7 +378,6 @@ export function ChartWithOrders({ // First time creating markers seriesMarkersRef.current = createSeriesMarkers(candlestickSeriesRef.current, markers) } - console.log('[ChartWithOrders] โœ… Markers set successfully!') } catch (err) { console.error('[ChartWithOrders] โŒ Failed to set markers:', err) } diff --git a/web/src/components/charts/ChartWithOrdersSimple.tsx b/web/src/components/charts/ChartWithOrdersSimple.tsx index 529c95b8..c836b252 100644 --- a/web/src/components/charts/ChartWithOrdersSimple.tsx +++ b/web/src/components/charts/ChartWithOrdersSimple.tsx @@ -21,7 +21,6 @@ export function ChartWithOrdersSimple({ useEffect(() => { const loadData = async () => { - console.log('[ChartSimple] Loading data for', symbol, interval, 'trader:', traderID) setLoading(true) setError(null) @@ -30,24 +29,20 @@ export function ChartWithOrdersSimple({ const limit = 100 const klineUrl = `/api/klines?symbol=${symbol}&interval=${interval}&limit=${limit}` - console.log('[ChartSimple] Fetching klines from our service:', klineUrl) const klineResult = await httpClient.get(klineUrl) if (!klineResult.success || !klineResult.data) { throw new Error('Failed to fetch klines from our service') } - console.log('[ChartSimple] Received klines:', klineResult.data.length) setKlineCount(klineResult.data.length) // ๆต‹่ฏ•่Žทๅ–่ฎขๅ•ๆ•ฐๆฎ if (traderID) { const tradesUrl = `/api/trades?trader_id=${traderID}&symbol=${symbol}&limit=100` - console.log('[ChartSimple] Fetching trades from:', tradesUrl) const tradesResult = await httpClient.get(tradesUrl) if (tradesResult.success && tradesResult.data) { - console.log('[ChartSimple] Received trades:', tradesResult.data.length) setOrderCount(tradesResult.data.length) } else { console.warn('[ChartSimple] Failed to fetch trades:', tradesResult.message || 'Unknown error', tradesResult) diff --git a/web/src/components/charts/ComparisonChart.tsx b/web/src/components/charts/ComparisonChart.tsx index 8ad4809a..9b8d6e77 100644 --- a/web/src/components/charts/ComparisonChart.tsx +++ b/web/src/components/charts/ComparisonChart.tsx @@ -48,10 +48,8 @@ export function ComparisonChart({ traders }: ComparisonChartProps) { const { data: allTraderHistories, isLoading } = useSWR( traders.length > 0 ? `equity-histories-${tradersKey}-${selectedHours}` : null, async () => { - console.log('Fetching equity history with hours:', selectedHours) const traderIds = traders.map((trader) => trader.trader_id) const batchData = await api.getEquityHistoryBatch(traderIds, selectedHours) - console.log('Received data points:', Object.values(batchData.histories || {}).map((h: any) => h?.length)) return traders.map((trader) => { const history = batchData.histories?.[trader.trader_id] || [] diff --git a/web/src/components/trader/AITradersPage.tsx b/web/src/components/trader/AITradersPage.tsx index 37d630f3..ef2ea763 100644 --- a/web/src/components/trader/AITradersPage.tsx +++ b/web/src/components/trader/AITradersPage.tsx @@ -233,7 +233,6 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) { } const handleSaveEditTrader = async (data: CreateTraderRequest) => { - console.log('๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ handleSaveEditTrader CALLED with data:', data) if (!editingTrader) return try { @@ -261,10 +260,6 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) { show_in_competition: data.show_in_competition, } - console.log('๐Ÿ”ฅ handleSaveEditTrader - data:', data) - console.log('๐Ÿ”ฅ handleSaveEditTrader - data.strategy_id:', data.strategy_id) - console.log('๐Ÿ”ฅ handleSaveEditTrader - request:', request) - await api.updateTrader(editingTrader.trader_id, request) toast.success(t('aiTradersToast.saved', language)) setShowEditModal(false)