How do I use the "Debug Async JavaScript Issues" prompt?

Copy the prompt template, fill in the variables (CODE_SNIPPET, ISSUE_DESCRIPTION, EXPECTED_BEHAVIOR, ACTUAL_BEHAVIOR, RUNTIME_ENVIRONMENT, ERROR_MESSAGES), and paste it into ChatGPT, Claude, or Gemini.

What AI tools work with this coding prompt?

This prompt works with chatgpt, claude, gemini. Simply copy and paste the template into any of these AI assistants.

Tips for getting the best results?

Always use await when calling the function that contains async operations Use Promise.all() instead of sequential awaits when operations can run concurrently Add comprehensive error handling with try-catch blocks around async operations Test with network throttling and offline scenarios to catch timing issues Use debugging tools like async stack traces in Chrome DevTools

coding intermediate

Debug Async JavaScript Issues

AI prompt to identify and fix async JavaScript bugs, race conditions, and promise issues. Get step-by-step debugging guidance.

Works with: chatgptclaudegemini

Prompt Template

You are an expert JavaScript debugger specializing in asynchronous code issues. I need help debugging async JavaScript problems. **Code Context:** ```javascript [CODE_SNIPPET] ``` **Issue Description:** [ISSUE_DESCRIPTION] **Expected vs Actual Behavior:** - Expected: [EXPECTED_BEHAVIOR] - Actual: [ACTUAL_BEHAVIOR] **Environment Details:** - Runtime: [RUNTIME_ENVIRONMENT] - Error messages (if any): [ERROR_MESSAGES] Please analyze this async JavaScript issue and provide: 1. **Root Cause Analysis**: Identify the specific async issue (race conditions, promise chains, callback hell, timing issues, etc.) 2. **Step-by-Step Debugging Process**: Explain how to systematically debug this type of async issue 3. **Fixed Code Solution**: Provide the corrected code with detailed explanations of changes 4. **Prevention Strategies**: Suggest coding patterns and best practices to avoid similar issues 5. **Testing Recommendations**: Suggest ways to test async code to catch these issues early 6. **Alternative Approaches**: If applicable, show different ways to structure the async logic Focus on modern JavaScript practices (async/await, Promises) and provide production-ready solutions with error handling.

Variables to Customize

[CODE_SNIPPET]

The JavaScript code that's causing async issues

Example: async function fetchUserData(userId) { const user = fetch(`/api/users/${userId}`); const posts = fetch(`/api/users/${userId}/posts`); return { user: user.json(), posts: posts.json() }; }

[ISSUE_DESCRIPTION]

Brief description of the async problem you're experiencing

Example: Data is returning as Promise objects instead of actual values, and sometimes the API calls seem to fail silently

[EXPECTED_BEHAVIOR]

What you expect the code to do

Example: Function should return an object with user data and posts array

[ACTUAL_BEHAVIOR]

What's actually happening

Example: Getting Promise objects instead of data, and inconsistent results

[RUNTIME_ENVIRONMENT]

Where the code is running

Example: Node.js 18, Express server

[ERROR_MESSAGES]

Any error messages you're seeing

Example: TypeError: Cannot read property 'name' of undefined (intermittent)

Example Output

## Root Cause Analysis The main issue is that you're not properly awaiting the fetch promises. The function returns immediately with pending Promise objects instead of waiting for the API responses. ## Step-by-Step Debugging Process 1. Add console.log statements to track promise states 2. Use browser DevTools Network tab to verify API calls 3. Check if promises are being awaited properly 4. Verify error handling for failed requests ## Fixed Code Solution ```javascript async function fetchUserData(userId) { try { const [userResponse, postsResponse] = await Promise.all([ fetch(`/api/users/${userId}`), fetch(`/api/users/${userId}/posts`) ]); if (!userResponse.ok || !postsResponse.ok) { throw new Error('API request failed'); } const [user, posts] = await Promise.all([ userResponse.json(), postsResponse.json() ]); return { user, posts }; } catch (error) { console.error('Error fetching user data:', error); throw error; } } ``` ## Prevention Strategies - Always await async operations - Use Promise.all() for concurrent requests - Implement proper error handling - Add TypeScript for better async type safety

Pro Tips for Best Results

Always use await when calling the function that contains async operations
Use Promise.all() instead of sequential awaits when operations can run concurrently
Add comprehensive error handling with try-catch blocks around async operations
Test with network throttling and offline scenarios to catch timing issues
Use debugging tools like async stack traces in Chrome DevTools