Fix CSS loading error handling and port configuration inconsistencies

[Copilot]

This PR fixes the issue where users experience localhost:8000/global.css Failed to load resource: net::ERR_CONNECTION_REFUSED errors when using Duffel Components with misconfigured COMPONENT_CDN settings.

Problem

The issue occurred when users set COMPONENT_CDN=http://localhost:8000 but didn't have a server running on that port. The component attempted to load CSS from ${COMPONENT_CDN}/global.css but failed silently with ERR_CONNECTION_REFUSED, causing sites to crash or components to render without proper styling.

Additionally, there were inconsistencies in the documentation where examples referenced port 8000 instead of the correct development server port 3200.

Solution

1. Added Robust CSS Error Handling

export const handleCSSLoadError = (event: React.SyntheticEvent<HTMLLinkElement>) => {
  const linkElement = event.currentTarget;
  const href = linkElement.href;
  
  console.warn(
    "[Duffel Components] Failed to load CSS file from:", 
    href,
    "\n\nThis usually happens when:",
    "\n- COMPONENT_CDN is misconfigured",
    "\n- The CDN server is not running (for local development)",
    "\n- Network connectivity issues",
    "\n\nFor production, use: COMPONENT_CDN=https://assets.duffel.com/components",
    "\nFor local development, make sure to run 'yarn dev' and use: COMPONENT_CDN=https://localhost:3200"
  );
  
  // Remove the failed link element to prevent further errors
  if (linkElement.parentNode) {
    linkElement.parentNode.removeChild(linkElement);
  }
};

2. Updated Components with Error Handling

• WithComponentStyles.tsx: Added onError handler to the CSS link element
• StaysAmenities.tsx: Added same error handling for direct CSS loading

3. Fixed Documentation Inconsistencies

Updated all examples and README files to use the correct development server port:

• ❌ COMPONENT_CDN=http://localhost:8000
• ✅ COMPONENT_CDN=https://localhost:3200

Benefits

• Graceful degradation: Components continue to function even when CSS fails to load
• Clear debugging guidance: Users get actionable error messages instead of silent failures
• Consistent documentation: All examples now reference the correct ports
• Better developer experience: Clear distinction between production and development configurations

Testing

Added comprehensive tests to verify the error handling works correctly and all existing tests continue to pass.

The screenshot shows the component functioning properly with helpful error messages in the console when CSS loading fails, instead of the previous silent failure.

Fixes #421.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• downloads.sentry-cdn.com
  • Triggering command: /usr/local/bin/node ./scripts/install.js (dns block)
• googlechromelabs.github.io
  • Triggering command: /usr/local/bin/node install.mjs (dns block)
• https://storage.googleapis.com/chrome-for-testing-public/127.0.6533.88/linux64/chrome-headless-shell-linux64.zip
  • Triggering command: /usr/local/bin/node install.mjs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.