⚠️ Improve error handling and user feedback

[0GiS0]

🔍 Issue

The application currently has minimal error handling and provides limited feedback to users when things go wrong:

Current Issues:

1. Silent Failures - server.js line 47-49:

   .catch(error => {
       log.error(error.message);
   });

   Error is logged but user sees no feedback.

2. Incomplete Error Response - server.js line 74-79:

   if (response.ok) {
       res.send(200, json);
   } else {
       res.send(400);
   }

   Returns 400 without any error message or context.

3. No Network Error Handling - If Azure AD is unreachable, the app fails silently

4. No Token Expiration Handling - Users aren"t informed when the device code expires

5. No Environment Variable Validation - App crashes with cryptic errors if .env is missing

💡 Proposed Solution

1. Add Environment Variable Validation (Startup)

// At the top of server.js, after dotenv.config()
if (!process.env.TENANT_ID || !process.env.CLIENT_ID) {
  log.error("❌ Missing required environment variables");
  log.error("Please copy .env.sample to .env and fill in your values");
  log.error("Required: TENANT_ID, CLIENT_ID");
  process.exit(1);
}

2. Improve Error Responses to Users

// In /get/the/code route
.catch(error => {
  log.error(error.message);
  res.status(500).render("error", { 
    title: "Failed to get device code",
    message: "Unable to connect to Azure AD. Please check your configuration and try again.",
    error: process.env.NODE_ENV === "development" ? error : {}
  });
});

3. Better Polling Error Handling

// In /checking route
if (response.ok) {
  res.send(200, json);
} else {
  const json = await response.json();
  
  // Handle specific OAuth errors
  if (json.error === "authorization_pending") {
    res.status(202).json({ message: "Still waiting for user authorization" });
  } else if (json.error === "expired_token") {
    res.status(410).json({ message: "Device code expired. Please start over." });
  } else if (json.error === "authorization_declined") {
    res.status(403).json({ message: "User declined authorization" });
  } else {
    res.status(400).json({ message: json.error_description || "Unknown error" });
  }
}

4. Create Error View Template

views/error.ejs:

<%- include("partials/header") -%>
<div class="row">
  <div class="col">
    <div class="alert alert-danger" role="alert">
      <h4 class="alert-heading"><%= title %></h4>
      <p><%= message %></p>
      <% if (error.message) { %>
        <hr>
        <pre><%= error.message %></pre>
      <% } %>
      <a href="/" class="btn btn-primary mt-3">Start Over</a>
    </div>
  </div>
</div>
<%- include("partials/footer") -%>

5. Add User Feedback in Frontend

Update views/device-code.ejs to handle polling errors:

.then(async response => {
  if (response.ok) {
    // Success - existing code
  } else if (response.status === 410) {
    clearInterval(checking);
    alert("Device code expired. Please start over.");
    window.location.href = "/";
  } else if (response.status === 403) {
    clearInterval(checking);
    alert("Authorization declined.");
    window.location.href = "/";
  }
  // else keep waiting
})
.catch(error => {
  clearInterval(checking);
  console.error("Network error:", error);
  alert("Network error. Please check your connection and try again.");
});

🎯 Benefits

• Better UX - Users understand what went wrong and how to fix it
• Easier Debugging - Clear error messages help identify configuration issues
• Production Ready - Handles edge cases gracefully
• Educational Value - Demonstrates proper error handling in OAuth flows

📚 References

• RFC 8628 - Device Authorization Grant - Error codes
• Express Error Handling Guide

---

This discussion was automatically generated by Copilot CLI