Skip to content

Instantly share code, notes, and snippets.

@dimasusername

dimasusername/debug-demo-react.html

Created November 2, 2025 20:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dimasusername/6838dfed95d2a0c8e0e28356dca868b5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dimasusername/6838dfed95d2a0c8e0e28356dca868b5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dimasusername created this gist Nov 2, 2025.
    320 changes: 320 additions & 0 deletions debug-demo-react.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,320 @@
    <!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>