Skip to content

Commit b7bdeac

Browse files
regenrekregenrek
committed
example(tanstack): simplify DevLogDemo to monochrome + yellow accents, no emojis
1 parent df2f112 commit b7bdeac

File tree

1 file changed

+198
-27
lines changed

1 file changed

+198
-27
lines changed

‎example/tanstack-app/src/components/DevLogDemo.tsx‎

Lines changed: 198 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,214 @@
11
import * as React from 'react'
22

33
export function DevLogDemo() {
4-
const emitAll = React.useCallback(() => {
5-
console.log('log:', 'Hello from TanStack app')
6-
console.info('info:', { msg: 'Structured info', time: new Date().toISOString() })
7-
console.warn('warn:', 'This is a warning with number', 123)
8-
console.debug('debug:', 'Some debug details', { feature: 'logging' })
4+
const [isLoading, setIsLoading] = React.useState(false)
5+
const [networkStatus, setNetworkStatus] = React.useState<string>('')
96

10-
const circular: any = { name: 'circular' }
7+
const emitConsoleLogs = React.useCallback(() => {
8+
console.log('Console log test from TanStack app')
9+
console.info('Structured info:', {
10+
timestamp: new Date().toISOString(),
11+
userAgent: navigator.userAgent.split(' ')[0],
12+
feature: 'browser-echo-v1.1.0'
13+
})
14+
console.warn('Warning with data:', { level: 'warning', code: 123, details: 'This is a test warning' })
15+
console.debug('Debug details:', {
16+
environment: 'development',
17+
framework: 'TanStack Start',
18+
logging: true
19+
})
20+
21+
// Test complex objects
22+
const circular: any = { name: 'circular-ref', type: 'test' }
1123
circular.self = circular
12-
const big = 42n
13-
const fn = function sampleFn() {}
14-
const sym = Symbol('demo')
15-
console.log('objects:', { circular, big, fn, sym })
24+
const bigInt = 42n
25+
const fn = function sampleFunction() { return 'test' }
26+
const sym = Symbol('browser-echo-demo')
27+
console.log('Complex objects:', { circular, bigInt, fn, sym, date: new Date() })
1628
}, [])
1729

1830
const emitError = React.useCallback(() => {
19-
console.error(new Error('Boom from TanStack!'))
31+
console.error('Error test:', new Error('Simulated error from TanStack demo'))
32+
33+
// Test different error types
34+
try {
35+
throw new TypeError('Type error simulation')
36+
} catch (err) {
37+
console.error('Caught TypeError:', err)
38+
}
2039
}, [])
2140

22-
React.useEffect(() => {
23-
emitAll()
41+
const testNetworkLogs = React.useCallback(async () => {
42+
setIsLoading(true)
43+
setNetworkStatus('Testing network capture...')
44+
45+
try {
46+
// Test different HTTP methods and responses
47+
console.log('Starting network tests...')
48+
49+
// GET request with JSON response
50+
const response1 = await fetch('https://jsonplaceholder.typicode.com/posts/1')
51+
const data1 = await response1.json()
52+
console.log('Fetched post data:', data1.title)
53+
54+
// POST request with JSON body
55+
const response2 = await fetch('https://jsonplaceholder.typicode.com/posts', {
56+
method: 'POST',
57+
headers: { 'Content-Type': 'application/json' },
58+
body: JSON.stringify({
59+
title: 'Browser Echo Test',
60+
body: 'Testing network capture v1.1.0',
61+
userId: 1
62+
})
63+
})
64+
const data2 = await response2.json()
65+
console.log('Posted data, got ID:', data2.id)
66+
67+
// Test error response
68+
try {
69+
await fetch('https://jsonplaceholder.typicode.com/posts/999999')
70+
} catch (err) {
71+
console.warn('Network error handled:', err)
72+
}
73+
74+
setNetworkStatus('Network tests completed')
75+
} catch (error) {
76+
console.error('Network test failed:', error)
77+
setNetworkStatus('Network tests failed')
78+
} finally {
79+
setIsLoading(false)
80+
setTimeout(() => setNetworkStatus(''), 3000)
81+
}
82+
}, [])
83+
84+
const testWebSocket = React.useCallback(() => {
85+
console.log('Testing WebSocket connection...')
86+
87+
try {
88+
const ws = new WebSocket('wss://echo.websocket.org/')
89+
90+
ws.onopen = () => {
91+
console.log('WebSocket connected')
92+
ws.send(JSON.stringify({
93+
type: 'test',
94+
message: 'Hello from Browser Echo!',
95+
timestamp: Date.now()
96+
}))
97+
}
98+
99+
ws.onmessage = (event) => {
100+
console.log('WebSocket message received:', event.data)
101+
ws.close()
102+
}
103+
104+
ws.onerror = (error) => {
105+
console.error('WebSocket error:', error)
106+
}
107+
108+
ws.onclose = () => {
109+
console.log('WebSocket connection closed')
110+
}
111+
} catch (error) {
112+
console.error('WebSocket test failed:', error)
113+
}
114+
}, [])
115+
116+
const runFullTest = React.useCallback(async () => {
117+
console.clear()
118+
console.log('=== BROWSER ECHO v1.1.0 FULL TEST SUITE ===')
119+
120+
emitConsoleLogs()
121+
await new Promise(resolve => setTimeout(resolve, 1000))
122+
24123
emitError()
25-
}, [emitAll, emitError])
124+
await new Promise(resolve => setTimeout(resolve, 1000))
125+
126+
await testNetworkLogs()
127+
await new Promise(resolve => setTimeout(resolve, 1000))
128+
129+
testWebSocket()
130+
131+
console.log('=== TEST SUITE COMPLETED ===')
132+
}, [emitConsoleLogs, emitError, testNetworkLogs, testWebSocket])
133+
134+
// Auto-run on mount
135+
React.useEffect(() => {
136+
const timer = setTimeout(() => {
137+
emitConsoleLogs()
138+
}, 1000)
139+
return () => clearTimeout(timer)
140+
}, [emitConsoleLogs])
26141

27142
return (
28-
<div style={{ padding: 12, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
29-
<button
30-
onClick={emitAll}
31-
style={{ padding: '6px 10px', border: '1px solid #999', borderRadius: 6 }}
32-
>
33-
Emit All Logs
34-
</button>
35-
<button
36-
onClick={emitError}
37-
style={{ padding: '6px 10px', border: '1px solid #999', borderRadius: 6 }}
38-
>
39-
Emit Error
40-
</button>
143+
<div className="space-y-6">
144+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
145+
{/* Console Logs Section */}
146+
<div className="space-y-3">
147+
<h3 className="text-yellow-400 font-mono text-lg flex items-center gap-2">
148+
<span className="w-2 h-2 bg-yellow-400 rounded-sm"></span>
149+
Console Logs
150+
</h3>
151+
<div className="space-y-2">
152+
<button
153+
onClick={emitConsoleLogs}
154+
className="w-full px-4 py-3 border border-yellow-500/40 text-white font-mono text-sm rounded-sm hover:bg-yellow-500/10 transition-colors"
155+
>
156+
Test Console Logs
157+
</button>
158+
<button
159+
onClick={emitError}
160+
className="w-full px-4 py-3 border border-yellow-500/40 text-white font-mono text-sm rounded-sm hover:bg-yellow-500/10 transition-colors"
161+
>
162+
Test Error Logs
163+
</button>
164+
</div>
165+
</div>
166+
167+
{/* Network Logs Section */}
168+
<div className="space-y-3">
169+
<h3 className="text-yellow-400 font-mono text-lg flex items-center gap-2">
170+
<span className="w-2 h-2 bg-yellow-400 rounded-sm"></span>
171+
Network Capture
172+
</h3>
173+
<div className="space-y-2">
174+
<button
175+
onClick={testNetworkLogs}
176+
disabled={isLoading}
177+
className="w-full px-4 py-3 border border-yellow-500/40 text-white font-mono text-sm rounded-sm hover:bg-yellow-500/10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
178+
>
179+
{isLoading ? 'Testing...' : 'Test HTTP Requests'}
180+
</button>
181+
<button
182+
onClick={testWebSocket}
183+
className="w-full px-4 py-3 border border-yellow-500/40 text-white font-mono text-sm rounded-sm hover:bg-yellow-500/10 transition-colors"
184+
>
185+
Test WebSocket
186+
</button>
187+
</div>
188+
</div>
189+
</div>
190+
191+
{/* Status Display */}
192+
{networkStatus && (
193+
<div className="px-4 py-2 bg-yellow-500/10 text-yellow-300 font-mono text-sm rounded-sm border border-yellow-500/30">
194+
{networkStatus}
195+
</div>
196+
)}
197+
198+
{/* Full Test Suite */}
199+
<div className="pt-4 border-t border-gray-700">
200+
<button
201+
onClick={runFullTest}
202+
className="w-full px-6 py-4 bg-black text-white font-mono text-lg rounded-sm border border-yellow-500/40 hover:bg-yellow-500/10 transition-colors"
203+
>
204+
RUN FULL TEST SUITE
205+
</button>
206+
</div>
207+
208+
<div className="text-center text-gray-300 font-mono text-xs">
209+
<p>Open your terminal to see all logs streaming in real-time</p>
210+
<p className="mt-1">Including <span className="text-yellow-400">[network]</span> requests with body capture</p>
211+
</div>
41212
</div>
42213
)
43214
}

0 commit comments

Comments
 (0)