From 5c03c7af72e435ce3431505eeb31694220e327eb Mon Sep 17 00:00:00 2001
From: Ankith-m1006 <22bsm006@iiitdmj.ac.in>
Date: Sat, 20 Dec 2025 13:18:08 +0530
Subject: [PATCH] feat: add graceful fallback for unavailable micro frontend
 components

---
 1-composition-client-only/team-red/page.js | 34 ++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/1-composition-client-only/team-red/page.js b/1-composition-client-only/team-red/page.js
index 2c82482..6cc7a3c 100644
--- a/1-composition-client-only/team-red/page.js
+++ b/1-composition-client-only/team-red/page.js
@@ -45,6 +45,23 @@ function renderOption(variant) {
     </button>
   `;
 }
+function renderMfeFallback(id, teamName) {
+  const el = document.getElementById(id);
+  if (!el) return;
+
+  el.innerHTML = `
+    <div style="
+      padding: 12px;
+      border: 1px dashed #ccc;
+      background: #fafafa;
+      font-family: sans-serif;
+      margin: 8px 0;
+    ">
+      <strong>${teamName} service unavailable</strong>
+      <p>This micro-frontend could not be loaded.</p>
+    </div>
+  `;
+}
 
 function renderPage() {
   const variant = product.variants.find((v) => state.variant === v.sku);
@@ -59,13 +76,28 @@ function renderPage() {
     <green-recos id="reco" sku="${variant.sku}"></green-recos>
   `;
 }
+function checkMicroFrontendAvailability() {
+  if (!customElements.get('blue-basket')) {
+    renderMfeFallback('basket', 'Team Blue (Basket)');
+  }
+
+  if (!customElements.get('blue-buy')) {
+    renderMfeFallback('buy', 'Team Blue (Buy)');
+  }
+
+  if (!customElements.get('green-recos')) {
+    renderMfeFallback('reco', 'Team Green (Recommendations)');
+  }
+}
 
 function rerender() {
   removeListeners();
   renderPage();
+  checkMicroFrontendAvailability();
   addListeners();
 }
 
+
 function handleClickOption(e) {
   const sku = e.currentTarget.getAttribute('data-sku');
   state.variant = sku;
@@ -87,4 +119,6 @@ function removeListeners() {
 }
 
 renderPage();
+checkMicroFrontendAvailability();
 addListeners();
+