fix: avoid throwing errors if container is no longer in page

src/constants.js

@@ -9,6 +9,13 @@ export const POST_MESSAGE = {
   ALLOW_DELEGATE: `${ZOID}_allow_delegate`,
 };
 
+export const RENDER_ERRORS = {
+  NAVIGATED_AWAY: "Window navigated away",
+  COMPONENT_DESTROYED: "Component destroyed",
+  COMPONENT_CLOSED: "Component closed",
+  WINDOW_CLOSED: "Detected component window close",
+};
+
 export const PROP_TYPE = {
   STRING: ("string": "string"),
   OBJECT: ("object": "object"),

src/parent/parent.js

@@ -65,6 +65,7 @@ import {
   METHOD,
   WINDOW_REFERENCE,
   DEFAULT_DIMENSIONS,
+  RENDER_ERRORS,
 } from "../constants";
 import {
   getGlobal,
@@ -315,7 +316,7 @@ export function parentComponent<P, X, C>({
   let currentProxyContainer: ?ProxyObject<HTMLElement>;
   let childComponent: ?ChildExportsType<P>;
   let currentChildDomain: ?string;
-  let currentContainer: HTMLElement | void;
+  let currentContainer: HTMLElement;
 
   const onErrorOverride: ?OnError = overrides.onError;
   let getProxyContainerOverride: ?GetProxyContainer =
@@ -729,7 +730,15 @@ export function parentComponent<P, X, C>({
         return clean.all(err);
       })
       .then(() => {
-        initPromise.asyncReject(err || new Error("Component destroyed"));
+        const error = err || new Error(RENDER_ERRORS.COMPONENT_DESTROYED);
+        if (
+          isElementClosed(currentContainer) ||
+          error.message === RENDER_ERRORS.NAVIGATED_AWAY
+        ) {
+          initPromise.resolve();
+        } else {
+          initPromise.asyncReject(error);
+        }
       });
   };
 
@@ -749,7 +758,7 @@ export function parentComponent<P, X, C>({
       return ZalgoPromise.try(() => {
         return event.trigger(EVENT.CLOSE);
       }).then(() => {
-        return destroy(err || new Error(`Component closed`));
+        return destroy(err || new Error(RENDER_ERRORS.COMPONENT_CLOSED));
       });
     });
   });
@@ -823,7 +832,7 @@ export function parentComponent<P, X, C>({
         window,
         "unload",
         once(() => {
-          destroy(new Error(`Window navigated away`));
+          destroy(new Error(RENDER_ERRORS.NAVIGATED_AWAY));
         })
       );
 
@@ -870,15 +879,15 @@ export function parentComponent<P, X, C>({
       .then((isClosed) => {
         if (isClosed) {
           closed = true;
-          return close(new Error(`Detected component window close`));
+          return close(new Error(RENDER_ERRORS.WINDOW_CLOSED));
         }
 
         return ZalgoPromise.delay(200)
           .then(() => proxyWin.isClosed())
           .then((secondIsClosed) => {
             if (secondIsClosed) {
               closed = true;
-              return close(new Error(`Detected component window close`));
+              return close(new Error(RENDER_ERRORS.WINDOW_CLOSED));
             }
           });
       })

test/tests/remove.jsx

@@ -102,4 +102,63 @@ describe("zoid remove cases", () => {
         });
     });
   });
+
+  it("should not throw an error when parent container is removed before render completes", () => {
+    return wrapPromise(() => {
+      const { container } = getContainer();
+
+      window.__component__ = () => {
+        return zoid.create({
+          tag: "test-remove-before-render-complete",
+          url: () => "mock://www.child.com/base/test/windows/child/index.htm",
+          domain: "mock://www.child.com",
+        });
+      };
+
+      const component = window.__component__();
+      const onRenderedPromise = new ZalgoPromise();
+      const onClosePromise = new ZalgoPromise();
+
+      const renderPromise = component({
+        onRendered: () => onRenderedPromise.resolve(),
+        onClose: () => onClosePromise.resolve(),
+      }).render(container);
+
+      // manually remove before render completes
+      container.remove();
+
+      return renderPromise.then(() => {
+        ZalgoPromise.delay(5);
+      });
+    });
+  });
+
+  it("should not throw an error when window navigates away before render completes", () => {
+    return wrapPromise(() => {
+      const { container } = getContainer();
+
+      window.__component__ = () => {
+        return zoid.create({
+          tag: "test-navigation-before-render-complete",
+          url: () => "mock://www.child.com/base/test/windows/child/index.htm",
+          domain: "mock://www.child.com",
+        });
+      };
+
+      const component = window.__component__();
+      const onRenderedPromise = new ZalgoPromise();
+      const onClosePromise = new ZalgoPromise();
+
+      const renderPromise = component({
+        onRendered: () => onRenderedPromise.resolve(),
+        onClose: () => onClosePromise.resolve(),
+      }).render(container);
+
+      // manually reload window before render completes
+      window.dispatchEvent(new Event("unload"));
+      return renderPromise.then(() => {
+        ZalgoPromise.delay(5);
+      });
+    });
+  });
 });