Add a domain detection that will automatically fallback to root… (#2218)

* Add a domain detection that will automatically fallback to root domain for preview

This detection will ping the URL of the sandbox domain, if that fails we will make the preview fall back
to the root domain (codesandbox.io).

Fixes #2210

* Update navigation url as well

* Change cache saving

* Set iframe url to new one

* Prevent race condition by sending URL later

* Fix check for response

Author: CompuIves

packages/common/src/components/Preview/index.tsx

@@ -18,6 +18,7 @@ import { Spring } from 'react-spring/renderprops.cjs';
 import { generateFileFromSandbox } from '../../templates/configuration/package-json';
 
 import { getSandboxName } from '../../utils/get-sandbox-name';
+import track from '../../utils/analytics';
 
 import Navigator from './Navigator';
 import { Container, StyledFrame, Loading } from './elements';
@@ -56,6 +57,7 @@ type State = {
   urlInAddressBar: string;
   url: string | undefined;
   showScreenshot: boolean;
+  useFallbackDomain: boolean;
 };
 
 const getSSEUrl = (sandbox?: Sandbox, initialPath: string = '') =>
@@ -86,6 +88,7 @@ class BasePreview extends React.Component<Props, State> {
       urlInAddressBar: this.currentUrl(),
       url: null,
       showScreenshot: true,
+      useFallbackDomain: false,
     };
 
     // we need a value that doesn't change when receiving `initialPath`
@@ -107,6 +110,8 @@ class BasePreview extends React.Component<Props, State> {
 
     (window as any).openNewWindow = this.openNewWindow;
 
+    this.testFallbackDomainIfNeeded();
+
     setTimeout(() => {
       if (this.state.showScreenshot) {
         this.setState({ showScreenshot: false });
@@ -123,11 +128,68 @@ class BasePreview extends React.Component<Props, State> {
     }
   }
 
+  /**
+   * We have a different domain for the preview (currently :id.csb.app), some corporate
+   * firewalls block calls to these domains. Which is why we ping the domain here, if it
+   * returns a bad response we fall back to using our main domain (:id.codesandbox.io).
+   *
+   * We use a different domain for the preview, since Chrome runs iframes from a different root
+   * domain in a different process, which means for us that we have a snappier editor
+   */
+  testFallbackDomainIfNeeded = () => {
+    const TRACKING_NAME = 'Preview - Fallback URL';
+    const normalUrl = frameUrl(
+      this.props.sandbox,
+      this.props.initialPath || ''
+    );
+    const fallbackUrl = frameUrl(
+      this.props.sandbox,
+      this.props.initialPath || '',
+      true
+    );
+
+    const setFallbackDomain = () => {
+      this.setState(
+        {
+          useFallbackDomain: true,
+          urlInAddressBar: frameUrl(
+            this.props.sandbox,
+            this.props.initialPath || '',
+            true
+          ),
+        },
+        () => {
+          requestAnimationFrame(() => {
+            this.sendUrl();
+          });
+        }
+      );
+    };
+
+    if (!this.props.url && normalUrl !== fallbackUrl) {
+      fetch(normalUrl, { mode: 'no-cors' })
+        .then(() => {
+          // Succeeded
+          track(TRACKING_NAME, { needed: false });
+        })
+        .catch(() => {
+          // Failed, use fallback
+          track(TRACKING_NAME, { needed: true });
+
+          setFallbackDomain();
+        });
+    }
+  };
+
   currentUrl = () =>
     this.props.url ||
     (this.serverPreview
       ? getSSEUrl(this.props.sandbox, this.props.initialPath)
-      : frameUrl(this.props.sandbox, this.props.initialPath || ''));
+      : frameUrl(
+          this.props.sandbox,
+          this.props.initialPath || '',
+          this.state && this.state.useFallbackDomain
+        ));
 
   static defaultProps = {
     showNavigation: true,

packages/common/src/utils/url-generator.ts

@@ -93,19 +93,23 @@ const stagingFrameUrl = (shortid: string, path: string) => {
   )}/${path}`;
 };
 
-export const frameUrl = (sandbox: Sandbox, append: string = '') => {
+export const frameUrl = (
+  sandbox: Sandbox,
+  append: string = '',
+  useFallbackDomain = false
+) => {
   const path = append.indexOf('/') === 0 ? append.substr(1) : append;
 
-  if (process.env.LOCAL_SERVER) {
-    return `http://localhost:3002/${path}`;
-  }
+  // if (process.env.LOCAL_SERVER) {
+  //   return `http://localhost:3002/${path}`;
+  // }
 
   if (process.env.STAGING) {
     return stagingFrameUrl(sandbox.id, path);
   }
 
   let sHost = host();
-  if (`https://${sHost}` in sandboxHost) {
+  if (`https://${sHost}` in sandboxHost && !useFallbackDomain) {
     sHost = sandboxHost[`https://${sHost}`].split('//')[1];
   }
   return `${location.protocol}//${sandbox.id}.${sHost}/${path}`;