🔧 Troubleshooting Guide

This guide helps you resolve common issues when working with the React Spotify Player and Spotify Web API integration.

📋 Table of Contents

Authentication Issues
API Connection Problems
Development Environment Issues
Production Deployment Issues
Common Error Messages
Debugging Tips

🔐 Authentication Issues

Problem: "Invalid client" error

Symptoms:

Error message: "Invalid client"
Login button doesn't work
Redirect fails

Solutions:

Check your Client ID

// In src/config/spotify.js
export const clientId = "YOUR_ACTUAL_CLIENT_ID_HERE";

Verify Spotify App Settings
- Go to Spotify Developer Dashboard
- Check that your app is active (not in development mode)
- Ensure the redirect URI matches exactly:
```
export const redirectUri = "http://localhost:3001"; // Must match dashboard
```
Check Redirect URI Format
- Must be exact match (including protocol, port, trailing slashes)
- Common mistakes: http://localhost:3000 vs http://localhost:3001

Problem: "Access token expired" error

Symptoms:

App works initially but stops after some time
Error: "Your session has expired"

Solutions:

Token Expiration is Normal
- Spotify tokens expire after 1 hour
- The app handles this automatically by logging you out

Implement Token Refresh (Advanced)

// For production apps, implement refresh token flow
const refreshToken = async (refreshToken) => {
  const response = await fetch('https://accounts.spotify.com/api/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret)
    },
    body: new URLSearchParams({
      grant_type: 'refresh_token',
      refresh_token: refreshToken
    })
  });
  return response.json();
};

Problem: Login redirects but doesn't work

Symptoms:

Clicking login redirects to Spotify
After authorizing, returns to app but nothing happens

Solutions:

Check Browser Console
- Open Developer Tools (F12)
- Look for JavaScript errors
- Check Network tab for failed requests

Verify Hash Parsing

// Test in browser console:
console.log(window.location.hash);
// Should show: #access_token=...&token_type=Bearer&expires_in=3600

Check URL Parameters
- Ensure redirect URI in Spotify dashboard matches your app
- Verify scopes are correctly formatted

🌐 API Connection Problems

Problem: "No data received from Spotify"

Symptoms:

Login works but shows "You need to be playing a song"
No track information displays

Solutions:

Check Spotify Premium Status
- You need Spotify Premium to use the Web API
- Free accounts cannot access playback information
Verify Music is Playing
- Make sure Spotify is actively playing music
- Check that music is playing on the same account you logged in with

Check API Permissions

// Ensure these scopes are included:
export const scopes = [
  "user-read-currently-playing",
  "user-read-playback-state",
];

Problem: CORS errors

Symptoms:

Console shows CORS errors
API requests fail

Solutions:

CORS is Handled by Spotify
- Spotify API supports CORS for web applications
- If you see CORS errors, check your request format

Check Request Headers

const response = await fetch("https://api.spotify.com/v1/me/player", {
  method: "GET",
  headers: {
    "Authorization": `Bearer ${accessToken}`,
    "Content-Type": "application/json"
  }
});

Problem: Rate limiting

Symptoms:

API requests start failing
Error: "Too Many Requests"

Solutions:

Reduce Polling Frequency

// Change from 5 seconds to 10 seconds
const interval = setInterval(() => {
  if (_token) {
    getCurrentlyPlaying(_token);
  }
}, 10000); // Increased from 5000ms

Implement Exponential Backoff

const fetchWithRetry = async (url, options, retries = 3) => {
  try {
    const response = await fetch(url, options);
    if (response.status === 429) {
      throw new Error('Rate limited');
    }
    return response;
  } catch (error) {
    if (retries > 0) {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return fetchWithRetry(url, options, retries - 1);
    }
    throw error;
  }
};

💻 Development Environment Issues

Problem: App won't start

Symptoms:

npm start fails
Port already in use errors

Solutions:

Check Port Availability

# Kill process on port 3001
lsof -ti:3001 | xargs kill -9

# Or use a different port
PORT=3002 npm start

Clear Node Modules

rm -rf node_modules package-lock.json
npm install

Check Node Version

node --version
# Should be v14 or higher

Problem: Hot reload not working

Symptoms:

Changes don't reflect in browser
Manual refresh required

Solutions:

Check File Watchers

# Increase file watcher limit (Linux/Mac)
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

Restart Development Server

# Stop server (Ctrl+C) and restart
npm start

Problem: Import/Export errors

Symptoms:

Module not found errors
Import path issues

Solutions:

Check File Extensions

// Make sure imports match file extensions
import Player from '/src/components/Player.jsx'; // .jsx extension
import { parseHash } from '/src/utils/hash.js'; // .js extension

Verify File Paths
- Use absolute paths from src root
- Check file names match exactly

🚀 Production Deployment Issues

Problem: App works locally but not in production

Symptoms:

Works on localhost but fails when deployed
Authentication redirects fail

Solutions:

Update Redirect URIs

// Update for production
export const redirectUri = "https://yourdomain.com";

// Add to Spotify Dashboard:
// - https://yourdomain.com
// - https://yourdomain.com/

Use Environment Variables

// Create .env file
REACT_APP_SPOTIFY_CLIENT_ID=your_client_id
REACT_APP_SPOTIFY_REDIRECT_URI=https://yourdomain.com

// Update config
export const clientId = process.env.REACT_APP_SPOTIFY_CLIENT_ID;
export const redirectUri = process.env.REACT_APP_SPOTIFY_REDIRECT_URI;

Check HTTPS Requirements
- Production apps must use HTTPS
- Update redirect URI to use https://

Problem: Build fails

Symptoms:

npm run build fails
TypeScript or ESLint errors

Solutions:

Fix ESLint Errors
```
npm run build
# Fix any errors shown
```

Check for Console Errors

// Remove console.log statements in production
if (process.env.NODE_ENV !== 'production') {
  console.log('Debug info');
}

❌ Common Error Messages

"Network request failed"

Cause: No internet connection or API endpoint down
Solution: Check internet connection and Spotify API status

"Failed to fetch"

Cause: Network error or CORS issue
Solution: Check request format and headers

"Invalid token"

Cause: Token expired or malformed
Solution: Re-authenticate user

"Insufficient client scope"

Cause: Missing required scopes
Solution: Add required scopes to configuration

"User not found"

Cause: Invalid user ID or token
Solution: Check authentication flow

🐛 Debugging Tips

1. Enable Detailed Logging

// Add to your API calls
const getCurrentlyPlaying = async (accessToken) => {
  console.log('Fetching with token:', accessToken.substring(0, 10) + '...');
  
  const response = await fetch("https://api.spotify.com/v1/me/player", {
    method: "GET",
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  });
  
  console.log('Response status:', response.status);
  console.log('Response headers:', response.headers);
  
  // ... rest of function
};

2. Test API Endpoints Directly

# Test with curl
curl -H "Authorization: Bearer YOUR_TOKEN" \
     "https://api.spotify.com/v1/me/player"

3. Use Browser Developer Tools

Network Tab: Check API requests and responses
Console Tab: Look for JavaScript errors
Application Tab: Check localStorage for tokens

4. Validate Token Manually

// Test token validity
const testToken = async (token) => {
  try {
    const response = await fetch('https://api.spotify.com/v1/me', {
      headers: { 'Authorization': `Bearer ${token}` }
    });
    return response.ok;
  } catch (error) {
    return false;
  }
};

5. Check Spotify API Status

Visit Spotify API Status
Check for any ongoing issues

📞 Getting Help

If you're still having issues:

Check the Console: Look for specific error messages
Search GitHub Issues: Check if others have similar problems
Spotify Developer Forums: Community Support
Create an Issue: If it's a bug in this project, create a GitHub issue

🔗 Useful Resources

Last updated: December 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🔧 Troubleshooting Guide

📋 Table of Contents

🔐 Authentication Issues

Problem: "Invalid client" error

Problem: "Access token expired" error

Problem: Login redirects but doesn't work

🌐 API Connection Problems

Problem: "No data received from Spotify"

Problem: CORS errors

Problem: Rate limiting

💻 Development Environment Issues

Problem: App won't start

Problem: Hot reload not working

Problem: Import/Export errors

🚀 Production Deployment Issues

Problem: App works locally but not in production

Problem: Build fails

❌ Common Error Messages

"Network request failed"

"Failed to fetch"

"Invalid token"

"Insufficient client scope"

"User not found"

🐛 Debugging Tips

1. Enable Detailed Logging

2. Test API Endpoints Directly

3. Use Browser Developer Tools

4. Validate Token Manually

5. Check Spotify API Status

📞 Getting Help

🔗 Useful Resources

FilesExpand file tree

TROUBLESHOOTING.md

Latest commit

History

TROUBLESHOOTING.md

File metadata and controls

🔧 Troubleshooting Guide

📋 Table of Contents

🔐 Authentication Issues

Problem: "Invalid client" error

Problem: "Access token expired" error

Problem: Login redirects but doesn't work

🌐 API Connection Problems

Problem: "No data received from Spotify"

Problem: CORS errors

Problem: Rate limiting

💻 Development Environment Issues

Problem: App won't start

Problem: Hot reload not working

Problem: Import/Export errors

🚀 Production Deployment Issues

Problem: App works locally but not in production

Problem: Build fails

❌ Common Error Messages

"Network request failed"

"Failed to fetch"

"Invalid token"

"Insufficient client scope"

"User not found"

🐛 Debugging Tips

1. Enable Detailed Logging

2. Test API Endpoints Directly

3. Use Browser Developer Tools

4. Validate Token Manually

5. Check Spotify API Status

📞 Getting Help

🔗 Useful Resources