Debugging Intelligence: Solving Real Issues in AI-Integrated Full Stack Apps

🔍 Blog Summary:

When building advanced full stack projects that merge React, Spring Boot, and AI APIs, developers face challenges like CORS errors, token limits, UI rendering glitches, and complex API integration. This blog shares common pitfalls and their solutions that I personally encountered while building the AI-powered blog.

---

🔧 Key Problems & Solutions

---

⚠️ 1. CORS Errors Between Frontend & Backend

Problem:
When making API requests from React (localhost:5173) to Spring Boot (localhost:8080), browsers block it due to CORS policy.

Solution:
Add CORS configuration in Spring Boot:

@Configuration
public class WebConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return registry -> registry.addMapping("/**")
            .allowedOrigins("http://localhost:5173")
            .allowedMethods("*");
    }
}

🤖 2. OpenAI API Rate Limits or Missing Keys

Problem:
401 Unauthorized or delayed responses when OpenAI API is misconfigured or API key is missing.

Solution:

• Store your API key securely using application.properties

openai.api.key=sk-xxxxxxxxxxxxxxxx

• Add environment variable fallback using @Value("${openai.api.key:default-key}")

---

🧠 3. AI Response Formatting (Too Long / Messy Output)

Problem:
AI outputs long unformatted text, making it hard to display in UI.

Solution:

• Use react-markdown to render formatted AI responses.

• Apply a max_tokens limit (e.g., 100–200) in OpenAI prompt.

• Refine prompts with instructions like “respond in bullet points” or “summary in under 3 lines.”

---

🐢 4. Slow Backend AI Processing

Problem:
AI requests (OpenAI / Ollama) can take 5–10s+, leading to UI lag or timeouts.

Solution:

• Show a loading spinner in React (useState + useEffect)

• Optimize backend with @Async or move to message queues like RabbitMQ for scale

---

🧱 5. Dockerizing Multi-Service App

Problem:
Docker compose setup fails due to network or port conflicts between React, Spring Boot, and DB.

Solution:
Ensure services use distinct ports and add depends_on:

services:
  frontend:
    build: ./client
    ports:
      - "3000:3000"
  backend:
    build: ./server
    ports:
      - "8080:8080"
    depends_on:
      - db
  db:
    image: postgres
    ports:
      - "5432:5432"

---

🖼️ 6. Markdown Editor Not Updating in Real Time

Problem:
Using textarea with react-markdown causes a delay in preview updates.

Solution:
Use two-way binding in React:

const [markdown, setMarkdown] = useState("");
<TextareaAutosize onChange={(e) => setMarkdown(e.target.value)} />
<ReactMarkdown>{markdown}</ReactMarkdown>

---

📌 Bonus Debug Tips

• Use Postman to test backend AI endpoints before React integration.

• Log request/response on Spring Boot using HandlerInterceptor.

• Add retry logic with Axios interceptors in React.

• Use OpenAiService.timeout(20) to increase timeout when needed.

---

📘 References

• React Dev Docs: https://react.dev

• Spring Boot CORS Guide: https://spring.io/guides/gs/rest-service-cors/

• OpenAI Java SDK: https://github.com/TheoKanning/openai-java

---

🔚 Conclusion

Building AI-powered full-stack apps brings power—but also complexity. Facing real-world bugs and solving them teaches more than tutorials ever could. If you’re building with React + AI + Spring Boot, this blog will save you hours.