dimasusername · November 2, 2025 20:28 · dimasusername · Nov 2, 2025
diff --git a/debug-demo-react.html b/debug-demo-react.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Debugging Demo</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
            background: linear-gradient(135deg, #61dafb 0%, #282c34 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            padding: 40px;
            max-width: 600px;
            width: 100%;
        }
        
        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 28px;
        }
        
        .react-logo {
            display: inline-block;
            color: #61dafb;
        }
        
        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
        }
        
        .bug-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            border-left: 4px solid #61dafb;
        }
        
        .bug-section h2 {
            font-size: 18px;
            color: #333;
            margin-bottom: 15px;
        }
        
        button {
            background: #61dafb;
            color: #282c34;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
            width: 100%;
            margin-bottom: 10px;
        }
        
        button:hover {
            background: #4fa8c5;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(97, 218, 251, 0.4);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .output {
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            padding: 15px;
            margin-top: 15px;
            min-height: 60px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #333;
        }
        
        .success {
            color: #10b981;
            font-weight: 600;
        }
        
        .info {
            background: #e0f2fe;
            border-left: 4px solid #61dafb;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
            color: #0c4a6e;
        }
        
        .warning {
            background: #fef3c7;
            border-left: 4px solid #f59e0b;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
            color: #92400e;
        }
        
        code {
            background: #f1f5f9;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
        }
    </style>
 </head>
 <body>
    <div id="root"></div>

    <script type="text/babel">
        const { useState } = React;

        // Bug 1: Undefined property access in component
        function BuggyUserComponent({ user }) {
            console.log('🔍 Rendering BuggyUserComponent...');
            
            // This will error - but the stack trace will go through React internals!
            const userName = user.name.toUpperCase();
            
            return (
                <div className="output">
                    User: {userName}
                </div>
            );
        }

        // Bug 2: Array access in child component
        function BuggyListComponent({ items }) {
            console.log('🔍 Rendering BuggyListComponent...');
            console.log('Items:', items);
            
            // Error happens during render - stack trace shows React component tree
            const fourthItem = items[3].toUpperCase();
            
            return (
                <div className="output">
                    Fourth item: {fourthItem}
                </div>
            );
        }

        // Bug 3: Type error in effect hook
        function BuggyCalculationComponent({ price, quantity }) {
            const [total, setTotal] = useState(null);
            
            // Using useEffect to show errors in lifecycle methods
            React.useEffect(() => {
                console.log('🔍 Running useEffect in BuggyCalculationComponent...');
                console.log('Price:', typeof price, price);
                console.log('Quantity:', quantity);
                
                const subtotal = price + quantity * 10;
                console.log('Subtotal:', subtotal);
                
                // This will error with a React-wrapped stack trace
                const formatted = subtotal.toFixed(2);
                setTotal(formatted);
            }, [price, quantity]);
            
            return (
                <div className="output">
                    Total: ${total || 'Calculating...'}
                </div>
            );
        }

        // Working component
        function WorkingUserComponent({ user }) {
            console.log('✅ Rendering WorkingUserComponent...');
            console.log('User:', user);
            
            if (!user || !user.name) {
                return <div className="output">Hello, Guest!</div>;
            }
            
            return (
                <div className="output">
                    <span className="success">
                        Hello, {user.name}! Welcome back.
                    </span>
                </div>
            );
        }

        // Main App Component
        function App() {
            const [activeDemo, setActiveDemo] = useState(null);

            const handleBug1 = () => {
                console.log('🐛 Triggering Bug #1...');
                setActiveDemo('bug1');
            };

            const handleBug2 = () => {
                console.log('🐛 Triggering Bug #2...');
                setActiveDemo('bug2');
            };

            const handleBug3 = () => {
                console.log('🐛 Triggering Bug #3...');
                setActiveDemo('bug3');
            };

            const handleWorking = () => {
                console.log('✅ Running working example...');
                setActiveDemo('working');
            };

            return (
                <div className="container">
                    <h1><span className="react-logo">⚛️</span> React Debugging Demo</h1>
                    <p className="subtitle">Open DevTools (F12) and notice the difference!</p>
                    
                    <div className="info">
                        💡 <strong>Notice:</strong> When errors occur, the stack trace goes through React's internals 
                        like <code>renderWithHooks</code>, <code>updateFunctionComponent</code>, etc.
                    </div>

                    <div className="warning">
                        ⚠️ <strong>React Quirk:</strong> Errors in development mode show the component stack, 
                        but you have to dig through React's internal functions to find YOUR code.
                    </div>
                    
                    {/* Bug 1 */}
                    <div className="bug-section">
                        <h2>1. Undefined Property Access</h2>
                        <button onClick={handleBug1}>Trigger Bug #1</button>
                        {activeDemo === 'bug1' && (
                            <BuggyUserComponent user={undefined} />
                        )}
                        {activeDemo !== 'bug1' && (
                            <div className="output">Click the button to see what happens...</div>
                        )}
                    </div>
                    
                    {/* Bug 2 */}
                    <div className="bug-section">
                        <h2>2. Array Index Error</h2>
                        <button onClick={handleBug2}>Trigger Bug #2</button>
                        {activeDemo === 'bug2' && (
                            <BuggyListComponent items={['apple', 'banana', 'orange']} />
                        )}
                        {activeDemo !== 'bug2' && (
                            <div className="output">Click the button to see what happens...</div>
                        )}
                    </div>
                    
                    {/* Bug 3 */}
                    <div className="bug-section">
                        <h2>3. Type Error in Effect Hook</h2>
                        <button onClick={handleBug3}>Trigger Bug #3</button>
                        {activeDemo === 'bug3' && (
                            <BuggyCalculationComponent price="50" quantity={3} />
                        )}
                        {activeDemo !== 'bug3' && (
                            <div className="output">Click the button to see what happens...</div>
                        )}
                    </div>
                    
                    {/* Working */}
                    <div className="bug-section" style={{ borderLeftColor: '#10b981' }}>
                        <h2>4. ✅ Working Example</h2>
                        <button onClick={handleWorking} style={{ background: '#10b981', color: 'white' }}>
                            Run Working Code
                        </button>
                        {activeDemo === 'working' && (
                            <WorkingUserComponent user={{ name: 'Alice', age: 28 }} />
                        )}
                        {activeDemo !== 'working' && (
                            <div className="output">Click to see working code...</div>
                        )}
                    </div>
                </div>
            );
        }

        // Initialize React
        console.log('🚀 React Debugging Demo loaded!');
        console.log('Try clicking the buttons and compare the error messages to vanilla JS.');
        console.log('Notice how the stack traces include React internals like:');
        console.log('  - renderWithHooks');
        console.log('  - updateFunctionComponent');
        console.log('  - beginWork');
        console.log('Making it harder to find YOUR code!');

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<App />);
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>React Debugging Demo</title>
	<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	background: linear-gradient(135deg, #61dafb 0%, #282c34 100%);
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	}

	.container {
	background: white;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
	padding: 40px;
	max-width: 600px;
	width: 100%;
	}

	h1 {
	color: #333;
	margin-bottom: 10px;
	font-size: 28px;
	}

	.react-logo {
	display: inline-block;
	color: #61dafb;
	}

	.subtitle {
	color: #666;
	margin-bottom: 30px;
	font-size: 14px;
	}

	.bug-section {
	background: #f8f9fa;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
	border-left: 4px solid #61dafb;
	}

	.bug-section h2 {
	font-size: 18px;
	color: #333;
	margin-bottom: 15px;
	}

	button {
	background: #61dafb;
	color: #282c34;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s;
	font-weight: 600;
	width: 100%;
	margin-bottom: 10px;
	}

	button:hover {
	background: #4fa8c5;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(97, 218, 251, 0.4);
	}

	button:active {
	transform: translateY(0);
	}

	.output {
	background: white;
	border: 2px solid #e0e0e0;
	border-radius: 6px;
	padding: 15px;
	margin-top: 15px;
	min-height: 60px;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	color: #333;
	}

	.success {
	color: #10b981;
	font-weight: 600;
	}

	.info {
	background: #e0f2fe;
	border-left: 4px solid #61dafb;
	padding: 15px;
	border-radius: 6px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #0c4a6e;
	}

	.warning {
	background: #fef3c7;
	border-left: 4px solid #f59e0b;
	padding: 15px;
	border-radius: 6px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #92400e;
	}

	code {
	background: #f1f5f9;
	padding: 2px 6px;
	border-radius: 3px;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	}
	</style>
	</head>
	<body>
	<div id="root"></div>

	<script type="text/babel">
	const { useState } = React;

	// Bug 1: Undefined property access in component
	function BuggyUserComponent({ user }) {
	console.log('🔍 Rendering BuggyUserComponent...');

	// This will error - but the stack trace will go through React internals!
	const userName = user.name.toUpperCase();

	return (
	<div className="output">
	User: {userName}
	</div>
	);
	}

	// Bug 2: Array access in child component
	function BuggyListComponent({ items }) {
	console.log('🔍 Rendering BuggyListComponent...');
	console.log('Items:', items);

	// Error happens during render - stack trace shows React component tree
	const fourthItem = items[3].toUpperCase();

	return (
	<div className="output">
	Fourth item: {fourthItem}
	</div>
	);
	}

	// Bug 3: Type error in effect hook
	function BuggyCalculationComponent({ price, quantity }) {
	const [total, setTotal] = useState(null);

	// Using useEffect to show errors in lifecycle methods
	React.useEffect(() => {
	console.log('🔍 Running useEffect in BuggyCalculationComponent...');
	console.log('Price:', typeof price, price);
	console.log('Quantity:', quantity);

	const subtotal = price + quantity * 10;
	console.log('Subtotal:', subtotal);

	// This will error with a React-wrapped stack trace
	const formatted = subtotal.toFixed(2);
	setTotal(formatted);
	}, [price, quantity]);

	return (
	<div className="output">
	Total: ${total \|\| 'Calculating...'}
	</div>
	);
	}

	// Working component
	function WorkingUserComponent({ user }) {
	console.log('✅ Rendering WorkingUserComponent...');
	console.log('User:', user);

	if (!user \|\| !user.name) {
	return <div className="output">Hello, Guest!</div>;
	}

	return (
	<div className="output">
	<span className="success">
	Hello, {user.name}! Welcome back.
	</span>
	</div>
	);
	}

	// Main App Component
	function App() {
	const [activeDemo, setActiveDemo] = useState(null);

	const handleBug1 = () => {
	console.log('🐛 Triggering Bug #1...');
	setActiveDemo('bug1');
	};

	const handleBug2 = () => {
	console.log('🐛 Triggering Bug #2...');
	setActiveDemo('bug2');
	};

	const handleBug3 = () => {
	console.log('🐛 Triggering Bug #3...');
	setActiveDemo('bug3');
	};

	const handleWorking = () => {
	console.log('✅ Running working example...');
	setActiveDemo('working');
	};

	return (
	<div className="container">
	<h1><span className="react-logo">⚛️</span> React Debugging Demo</h1>
	<p className="subtitle">Open DevTools (F12) and notice the difference!</p>

	<div className="info">
	💡 <strong>Notice:</strong> When errors occur, the stack trace goes through React's internals
	like <code>renderWithHooks</code>, <code>updateFunctionComponent</code>, etc.
	</div>

	<div className="warning">
	⚠️ <strong>React Quirk:</strong> Errors in development mode show the component stack,
	but you have to dig through React's internal functions to find YOUR code.
	</div>

	{/* Bug 1 */}
	<div className="bug-section">
	<h2>1. Undefined Property Access</h2>
	<button onClick={handleBug1}>Trigger Bug #1</button>
	{activeDemo === 'bug1' && (
	<BuggyUserComponent user={undefined} />
	)}
	{activeDemo !== 'bug1' && (
	<div className="output">Click the button to see what happens...</div>
	)}
	</div>

	{/* Bug 2 */}
	<div className="bug-section">
	<h2>2. Array Index Error</h2>
	<button onClick={handleBug2}>Trigger Bug #2</button>
	{activeDemo === 'bug2' && (
	<BuggyListComponent items={['apple', 'banana', 'orange']} />
	)}
	{activeDemo !== 'bug2' && (
	<div className="output">Click the button to see what happens...</div>
	)}
	</div>

	{/* Bug 3 */}
	<div className="bug-section">
	<h2>3. Type Error in Effect Hook</h2>
	<button onClick={handleBug3}>Trigger Bug #3</button>
	{activeDemo === 'bug3' && (
	<BuggyCalculationComponent price="50" quantity={3} />
	)}
	{activeDemo !== 'bug3' && (
	<div className="output">Click the button to see what happens...</div>
	)}
	</div>

	{/* Working */}
	<div className="bug-section" style={{ borderLeftColor: '#10b981' }}>
	<h2>4. ✅ Working Example</h2>
	<button onClick={handleWorking} style={{ background: '#10b981', color: 'white' }}>
	Run Working Code
	</button>
	{activeDemo === 'working' && (
	<WorkingUserComponent user={{ name: 'Alice', age: 28 }} />
	)}
	{activeDemo !== 'working' && (
	<div className="output">Click to see working code...</div>
	)}
	</div>
	</div>
	);
	}

	// Initialize React
	console.log('🚀 React Debugging Demo loaded!');
	console.log('Try clicking the buttons and compare the error messages to vanilla JS.');
	console.log('Notice how the stack traces include React internals like:');
	console.log(' - renderWithHooks');
	console.log(' - updateFunctionComponent');
	console.log(' - beginWork');
	console.log('Making it harder to find YOUR code!');

	const root = ReactDOM.createRoot(document.getElementById('root'));
	root.render(<App />);
	</script>
	</body>
	</html>
No results found