Resolving 4XX errors on the CDN (#1171)

* Add icon existence checks and warnings in ComboBox, TechReport, and TableLinked components

* Remove console warnings for missing icons in ComboBox, TechReport, and TableLinked components

Author: max-ostapenko

src/js/techreport/combobox.js

@@ -29,11 +29,13 @@ class ComboBox {
       option.dataset.key = index;
       option.textContent = row.technology;
       option.id = `${this.element.dataset.id}-${row.technology.replaceAll(' ','-')}`;
-      const logo = document.createElement('img');
-      logo.setAttribute('alt', '');
-      logo.setAttribute('src', `https://cdn.httparchive.org/v1/static/icons/${icon}`);
-      logo.setAttribute('loading', 'lazy');
-      option.append(logo);
+      if(icon) {
+        const logo = document.createElement('img');
+        logo.setAttribute('alt', '');
+        logo.setAttribute('src', `https://cdn.httparchive.org/v1/static/icons/${icon}`);
+        logo.setAttribute('loading', 'lazy');
+        option.append(logo);
+      }
       if(this.selected.includes(row.technology)) {
         option.setAttribute('aria-selected', true);
       }
@@ -198,12 +200,14 @@ class ComboBox {
     deleteSelection.dataset.name = name;
     deleteSelection.addEventListener('click', () => this.unselectElement(name));
 
-    /* Add the app logo */
-    const appIcon = document.createElement('img');
-    appIcon.setAttribute('src', `https://cdn.httparchive.org/v1/static/icons/${encodeURI(icon)}`);
-    appIcon.setAttribute('alt', '');
-    appIcon.classList.add('logo');
-    deleteSelection.append(appIcon);
+    if (icon) {
+      /* Add the app logo */
+      const appIcon = document.createElement('img');
+      appIcon.setAttribute('src', `https://cdn.httparchive.org/v1/static/icons/${encodeURI(icon)}`);
+      appIcon.setAttribute('alt', '');
+      appIcon.classList.add('logo');
+      deleteSelection.append(appIcon);
+    }
 
     /* Add the delete icon */
     const deleteIcon = document.createElement('img');

src/js/techreport/index.js

@@ -299,9 +299,7 @@ class TechReport {
   // Get the information about the selected technology
   getTechInfo() {
     const technologies = this.filters.app;
-    const technology = technologies.join('%2C')
-      .replaceAll(" ", "%20");
-
+    const technology = technologies.map(encodeURIComponent).join(',');
     const url = `${Constants.apiBase}/technologies?technology=${technology}`;
 
     fetch(url)
@@ -315,7 +313,9 @@ class TechReport {
         const categories = techInfo && techInfo.category ? techInfo.category.split(', ') : [];
         DrilldownHeader.setCategories(categories);
         DrilldownHeader.setDescription(techInfo.description);
-        DrilldownHeader.setIcon(techInfo.icon);
+        if (techInfo.icon) {
+          DrilldownHeader.setIcon(techInfo.icon);
+        }
       });
   }
 
@@ -408,7 +408,9 @@ class TechReport {
     const app = this.filters.app[0];
     const icon = data[app]?.at(-1)?.icon;
     DrilldownHeader.update(this.filters);
-    DrilldownHeader.setIcon(`${encodeURI(icon)}`);
+    if (icon) {
+      DrilldownHeader.setIcon(`${encodeURI(icon)}`);
+    }
 
     if(data && data[app]) {
       UIUtils.updateReportComponents(this.sections, data, data[app], this.page, this.labels);

src/js/techreport/tableLinked.js

@@ -106,12 +106,14 @@ class TableLinked {
               const wrapper = document.createElement('span');
               wrapper.classList.add('app-wrapper');
 
-              const img = document.createElement('span');
-              const imgUrl = `https://cdn.httparchive.org/v1/static/icons/${encodeURI(technology[0]?.icon)}`;
-              img.setAttribute('aria-hidden', 'true');
-              img.setAttribute('style', `background-image: url(${imgUrl})`);
-              img.classList.add('app-img');
-              wrapper.append(img);
+              if(technology[0]?.icon) {
+                const img = document.createElement('span');
+                const imgUrl = `https://cdn.httparchive.org/v1/static/icons/${encodeURI(technology[0]?.icon)}`;
+                img.setAttribute('aria-hidden', 'true');
+                img.setAttribute('style', `background-image: url(${imgUrl})`);
+                img.classList.add('app-img');
+                wrapper.append(img);
+              }
 
               const formattedApp = DataUtils.formatAppName(app);
               const link = document.createElement('a');