Merge pull request #11 from bitrise-io/integrations-handle-proxy-outage

handle when proxy is down

Author: aorcsik

src/js/404.js

@@ -24,6 +24,16 @@ import { renderStatus } from './shared/status';
       window.location.href = `/stacks/subpage?subpage=${subpagePath}`;
     }
   }
+
+  const stepPath = detectTopicFromUrl(url, 'integrations/steps', 'step');
+  if (stepPath) {
+    const integrationsProxyAvailable = await fetch('/integrations-proxy')
+      .then((integrationsProxyResponse) => integrationsProxyResponse.ok)
+      .catch(() => false);
+    if (!integrationsProxyAvailable) {
+      window.location.href = `/integrations/step?step=${stepPath}`;
+    }
+  }
 })();
 
 window.addEventListener('load', async () => {

src/js/integrations.js

@@ -17,7 +17,8 @@ const searchField = document.getElementById('search');
 searchField.parentNode.action = document.location.pathname; // TODO: move to webflow
 searchField.value = queryFilter;
 
-IntegrationsService.loadIntegrations().then((integrations) => {
+(async () => {
+  const integrations = await IntegrationsService.loadIntegrations();
   sidebar.render(integrations, platformFilter, categoryFilter, queryFilter);
   content.render(integrations, platformFilter, categoryFilter, queryFilter);
 
@@ -40,7 +41,17 @@ IntegrationsService.loadIntegrations().then((integrations) => {
     }, 500);
   }
 
+  const proxyAvailable = await fetch('/integrations-proxy')
+    .then((proxyResponse) => proxyResponse.ok)
+    .catch(() => false);
+
+  if (!proxyAvailable) {
+    document.querySelectorAll('a[href^="/integrations"]').forEach((link) => {
+      link.href = `/integrations/step?step=${link.getAttribute('href').replace(/^.*\/integrations\/steps\//, '')}`;
+    });
+  }
+
   fancyConsoleLog('Bitrise.io Integrations');
-});
+})();
 
 if (import.meta.webpackHot) import.meta.webpackHot.accept();

src/js/integrations/worker.js

@@ -1,10 +1,20 @@
 const ORIGIN_HOST = 'bitrise.io';
 
+const setCorsHeaders = (response) => {
+  response.headers.set('Access-Control-Allow-Origin', '*');
+  response.headers.append('Vary', 'Origin');
+  return response;
+};
+
 export default {
   async fetch(request) {
     const urlObject = new URL(request.url);
     const canonical = new URL(request.url);
 
+    if (urlObject.pathname.match(/^\/integrations-proxy$/)) {
+      return setCorsHeaders(new Response('OK'));
+    }
+
     urlObject.hostname = ORIGIN_HOST;
     canonical.hostname = 'bitrise.io';
 

src/js/stacks.js

@@ -94,10 +94,6 @@ const getStacksLink = (path, useFallback = false) => {
   const pagePath = detectTopicFromUrl(url, 'stacks', 'subpage').replace(/\/$/, '');
   const pageType = pagePath.split('/')[0];
 
-  const proxyAvailable = await fetch('/stacks-proxy')
-    .then((response) => response.ok)
-    .catch(() => false);
-
   if (pageType === '') {
     const stackService = new StacksService();
     const stacksLinks = await stackService.fetchStacksIndexJson();
@@ -479,11 +475,17 @@ const getStacksLink = (path, useFallback = false) => {
     window.location.href = '/stacks';
   }
 
-  document.querySelectorAll('a[href^="/stacks"]').forEach((link) => {
-    if (!proxyAvailable && !link.href.match(/\.xml$/) && !link.href.match(/\/stacks\/subpage/)) {
-      link.href = getStacksLink(link.getAttribute('href').replace(/^.*\/stacks\//, ''), true);
-    }
-  });
+  const proxyAvailable = await fetch('/stacks-proxy')
+    .then((response) => response.ok)
+    .catch(() => false);
+
+  if (!proxyAvailable) {
+    document.querySelectorAll('a[href^="/stacks"]').forEach((link) => {
+      if (!link.href.match(/\.xml$/) && !link.href.match(/\/stacks\/subpage/)) {
+        link.href = getStacksLink(link.getAttribute('href').replace(/^.*\/stacks\//, ''), true);
+      }
+    });
+  }
 
   fancyConsoleLog('Bitrise.io Stacks');
 })();

src/js/steps.js

@@ -1,34 +1,18 @@
 import DetailsSection from './integrations/DetailsSection';
 import HeaderSection from './integrations/HeaderSection';
 import IntegrationsService from './integrations/IntegrationsService';
-import { fancyConsoleLog, setMetaContent } from './shared/common';
+import { detectTopicFromUrl, fancyConsoleLog, setMetaContent } from './shared/common';
 
 import '../css/steps.css';
 
-/**
- * @param {URL} url
- * @returns {?string}
- */
-function detectStepFromUrl(url) {
-  let path = url.pathname;
-  if (path.match(/steps\/?$/)) {
-    path = `${path.replace(/\/$/, '')}/${url.searchParams.get('step')}`;
-  }
-
-  const match = path.match(/steps\/(.+)$/);
-  if (match) {
-    return match[1];
-  }
-  return null;
-}
-
 const url = new URL(document.location.href);
-const stepFilter = detectStepFromUrl(url);
+const stepFilter = detectTopicFromUrl(url, 'integrations/steps', 'step');
 
 const header = new HeaderSection();
 const details = new DetailsSection();
 
-IntegrationsService.loadIntegrations().then((integrations) => {
+(async () => {
+  const integrations = await IntegrationsService.loadIntegrations();
   if (!stepFilter || !(stepFilter in integrations.steps)) {
     window.location.href = '/integrations';
   } else {
@@ -53,8 +37,18 @@ IntegrationsService.loadIntegrations().then((integrations) => {
     header.render(integrations, step);
     details.render(integrations, step);
 
+    const proxyAvailable = await fetch('/integrations-proxy')
+      .then((proxyResponse) => proxyResponse.ok)
+      .catch(() => false);
+
+    if (!proxyAvailable) {
+      document.querySelectorAll('a[href^="/integrations"]').forEach((link) => {
+        link.href = `/integrations/step?step=${link.getAttribute('href').replace(/^.*\/integrations\/steps\//, '')}`;
+      });
+    }
+
     fancyConsoleLog(`Bitrise.io Integrations: ${step.title}`);
   }
-});
+})();
 
 if (import.meta.webpackHot) import.meta.webpackHot.accept();