Merge pull request #10 from bitrise-io/stacks-handle-proxy-outage

stacks pages can handle proxy outage

Author: aorcsik

src/js/404.js

@@ -1,20 +1,29 @@
 import '../css/404.css';
 import '../css/status.css';
-import ChangelogService from './changelog/ChangelogService';
 import { detectTopicFromUrl } from './shared/common';
 import { renderStatus } from './shared/status';
 
 (async () => {
   const url = new URL(document.location.href);
   const topicSlugId = detectTopicFromUrl(url, 'changelog', 'topic');
   if (topicSlugId) {
-    const apiBase = document.location.hostname.match(/(localhost|127\.0\.0\.1)/) ? '' : 'https://bitrise.io';
-    const changelogService = new ChangelogService(apiBase, 'https://app.bitrise.io');
-    const currentApiBase = await changelogService.getApiBase();
-    if (currentApiBase === changelogService.fallbackApiBase) {
+    const changelogProxyAvailable = await fetch('/changelog-proxy')
+      .then((changelogProxyResponse) => changelogProxyResponse.ok)
+      .catch(() => false);
+    if (!changelogProxyAvailable) {
       window.location.href = `/changelog/topic?topic=${topicSlugId}`;
     }
   }
+
+  const subpagePath = detectTopicFromUrl(url, 'stacks', 'subpage');
+  if (subpagePath) {
+    const stacksProxyAvailable = await fetch('/stacks-proxy')
+      .then((stacksProxyResponse) => stacksProxyResponse.ok)
+      .catch(() => false);
+    if (!stacksProxyAvailable) {
+      window.location.href = `/stacks/subpage?subpage=${subpagePath}`;
+    }
+  }
 })();
 
 window.addEventListener('load', async () => {

src/js/stacks.js

@@ -82,11 +82,22 @@ const getStackRemovalDate = async (pagePath) => {
   return stackReport?.stack_meta?.removal_date ? formatDate(new Date(stackReport.stack_meta.removal_date)) : null;
 };
 
+const getStacksLink = (path, useFallback = false) => {
+  if (useFallback) {
+    return `/stacks/subpage?subpage=${path.replace(/^\//, '')}`;
+  }
+  return `/stacks${path}`;
+};
+
 (async () => {
   const url = new URL(document.location.href);
-  const pagePath = detectTopicFromUrl(url, 'stacks').replace(/\/$/, '');
+  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();
@@ -468,6 +479,12 @@ const getStackRemovalDate = async (pagePath) => {
     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);
+    }
+  });
+
   fancyConsoleLog('Bitrise.io Stacks');
 })();
 

src/js/stacks/worker.js

@@ -1,9 +1,19 @@
 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);
 
+    if (urlObject.pathname.match(/^\/stacks-proxy$/)) {
+      return setCorsHeaders(new Response('OK'));
+    }
+
     urlObject.hostname = ORIGIN_HOST;
 
     const rssMatch = urlObject.pathname.match(/^\/stacks\/(.*index\.xml)/);
@@ -20,7 +30,7 @@ export default {
       });
     }
 
-    if (urlObject.pathname.match(/^\/stacks\/.+\/.+/)) {
+    if (urlObject.pathname.match(/^\/stacks\/.+/)) {
       const originalPath = urlObject.pathname;
       urlObject.pathname = '/stacks/subpage';
       const response = await fetch(urlObject);