Coveo: Handle failed to fetch credentials from endpoint

Author: lamATnginx

assets/js/coveo.js

@@ -71,28 +71,40 @@ async function getValidSearchCredentials() {
 }
 
 async function atomicCoveo() {
-  await customElements.whenDefined('atomic-search-interface');
-  const credentials = await getValidSearchCredentials();
-
-  document.querySelectorAll('atomic-search-interface').forEach(async (el) => {
-    await el.initialize({
-      ...credentials,
-      analytics: { analyticsMode: 'legacy' },
-      preprocessRequest: (request) => {
-        const body = JSON.parse(request.body);
-        body.q = `<@- ${body.q} -@>`;
-        request.body = JSON.stringify(body);
-        return request;
-      },
+  try {
+    await customElements.whenDefined('atomic-search-interface');
+    const credentials = await getValidSearchCredentials();
+
+    document.querySelectorAll('atomic-search-interface').forEach(async (el) => {
+      await el.initialize({
+        ...credentials,
+        analytics: { analyticsMode: 'legacy' },
+        preprocessRequest: (request) => {
+          const body = JSON.parse(request.body);
+          body.q = `<@- ${body.q} -@>`;
+          request.body = JSON.stringify(body);
+          return request;
+        },
+      });
+
+      // No standalone searchboxes should be getting executing first search.
+      if (el.id === 'search-v2') await el.executeFirstSearch();
     });
 
-    // No standalone searchboxes should be getting executing first search.
-    if (el.id === 'search-v2') await el.executeFirstSearch();
-  });
-
-  const headerSearchBar = document.querySelector('#search-standalone-header');
-  if (headerSearchBar?.shadowRoot) {
-    hideShadowElement(headerSearchBar.shadowRoot, 'atomic-relevance-inspector');
+    const headerSearchBar = document.querySelector('#search-standalone-header');
+    if (headerSearchBar?.shadowRoot) {
+      hideShadowElement(
+        headerSearchBar.shadowRoot,
+        'atomic-relevance-inspector'
+      );
+    }
+  } catch (error) {
+    // Handle coveo error from only a LACK of credentials.
+    // INCORRECT credentials will cause the page to load but spin waiting.
+    const coveoErrorContainer = document.getElementById(
+      'coveo-error-container'
+    );
+    coveoErrorContainer.style.display = 'block';
   }
 }
 

layouts/search/single.html

@@ -4,6 +4,14 @@
     <section class="search no-sidebar">
       {{ partial "coveo-atomic.html" .}}
     </section>
+    <div class="content" data-testid="content" id="coveo-error-container" style="display: none;">
+      <div class="not-found-container" data-testid="not-found-container">
+        <h1 class="info-header">
+          Search functionality is unavailable.
+        </h1>
+        <a href="{{ .Site.BaseURL | relLangURL }}" aria-label="Return home">Return to the {{ .Site.Title }} homepage.</a>
+      </div>
+    </div>
   {{ else }}
     <div class="content" data-testid="content">
       <div class="not-found-container" data-testid="not-found-container">