feat(preview): propagate runtime preview errors (teambit#9676)

Author: luvkapur

components/ui/rendering/html/html.tsx

@@ -6,6 +6,7 @@ import { SsrStyles, removeSsrStyles } from './ssr-styles';
 import { FullHeightStyle } from './full-height-style';
 
 export const LOAD_EVENT = '_DOM_LOADED_';
+export const ERROR_EVENT = '_ERROR_OCCURRED_';
 
 export type Assets = Partial<{
   /** page title */

components/ui/rendering/html/index.ts

@@ -1,4 +1,4 @@
-export { Html, ssrCleanup, LOAD_EVENT } from './html';
+export { Html, ssrCleanup, LOAD_EVENT, ERROR_EVENT } from './html';
 export { MountPoint, mountPointId } from './mount-point';
 export { popAssets } from './stored-assets';
 export type { HtmlProps, Assets } from './html';

scopes/compositions/compositions/ui/composition-preview.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { ComponentPreview, ComponentPreviewProps } from '@teambit/preview.ui.component-preview';
+import { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';
 
 import { Composition } from '../composition';
 
@@ -11,6 +12,7 @@ export type ComponentCompositionProps = {
 } & ComponentPreviewProps;
 
 export function ComponentComposition({ composition, component, queryParams = [], ...rest }: ComponentCompositionProps) {
+  const { isMinimal } = useWorkspaceMode();
   const includesEnvTemplate = component.preview?.includesEnvTemplate;
   const isScaling = component.preview?.isScaling;
   const shouldAddNameParam = component.preview?.useNameParam || (isScaling && includesEnvTemplate === false);
@@ -30,6 +32,7 @@ export function ComponentComposition({ composition, component, queryParams = [],
       style={{ width: '100%', height: '100%' }}
       previewName="compositions"
       queryParams={compositionParams}
+      propagateError={isMinimal}
     />
   );
 }

scopes/preview/ui/component-preview/preview.tsx

@@ -5,14 +5,13 @@ import { compact } from 'lodash';
 import { connectToChild } from 'penpal';
 import { usePubSubIframe } from '@teambit/pubsub';
 import { ComponentModel } from '@teambit/component';
-import { LOAD_EVENT } from '@teambit/ui-foundation.ui.rendering.html';
+import { ERROR_EVENT, LOAD_EVENT } from '@teambit/ui-foundation.ui.rendering.html';
 import { toPreviewUrl } from './urls';
 import { computePreviewScale } from './compute-preview-scale';
 import { useIframeContentHeight } from './use-iframe-content-height';
 import styles from './preview.module.scss';
 
 export type OnPreviewLoadProps = { height?: string; width?: string };
-
 // omitting 'referrerPolicy' because of an TS error during build. Re-include when needed
 export interface ComponentPreviewProps extends Omit<IframeHTMLAttributes<HTMLIFrameElement>, 'src' | 'referrerPolicy'> {
   /**
@@ -76,6 +75,16 @@ export interface ComponentPreviewProps extends Omit<IframeHTMLAttributes<HTMLIFr
    * is preview being rendered in full height and should fit view height to content.
    */
   fullContentHeight?: boolean;
+
+  /**
+   * propagate error to the parent window from the iframe
+   */
+  propagateError?: boolean;
+
+  /**
+   * custom error handler for preview errors
+   */
+  onPreviewError?: (errorData: any) => void;
 }
 
 /**
@@ -97,6 +106,8 @@ export function ComponentPreview({
   onLoad,
   style,
   sandbox,
+  propagateError,
+  onPreviewError,
   ...rest
 }: ComponentPreviewProps) {
   const [heightIframeRef, iframeHeight] = useIframeContentHeight({ skip: false, viewport });
@@ -113,16 +124,42 @@ export function ComponentPreview({
   // pubsubContext?.connect(iframeHeight);
 
   useEffect(() => {
-    const handleLoad = (event) => {
-      if (event.data && (event.data.event === LOAD_EVENT || event.data.event === 'webpackInvalid')) {
+    const handleMessage = (event) => {
+      if ((event.data && event.data.event === LOAD_EVENT) ||
+        (event.data && event.data.event === 'webpackInvalid')
+      ) {
         onLoad && onLoad(event);
       }
+
+      if (event.data && event.data.event === ERROR_EVENT) {
+        const errorData = event.data.payload;
+        onPreviewError?.(errorData)
+
+        if (propagateError && window.parent && window !== window.parent) {
+          try {
+            window.parent.postMessage({
+              event: ERROR_EVENT,
+              payload: {
+                ...errorData,
+                forwardedFrom: {
+                  component: component.id,
+                  preview: previewName,
+                }
+              }
+            }, '*');
+          } catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('failed to propagate error to parent', err);
+          }
+        }
+      }
     };
-    window.addEventListener('message', handleLoad);
+
+    window.addEventListener('message', handleMessage);
     return () => {
-      window.removeEventListener('message', handleLoad);
+      window.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [component.id.toString(), onLoad, propagateError, onPreviewError]);
 
   useEffect(() => {
     if (!iframeRef.current) return;

scopes/ui-foundation/ui/ui-server.ts

@@ -1,4 +1,3 @@
-import { flatten } from 'lodash';
 import { ExpressMain } from '@teambit/express';
 import { GraphqlMain } from '@teambit/graphql';
 import { Logger } from '@teambit/logger';
@@ -204,25 +203,22 @@ export class UIServer {
       this.logger.error(e.message);
     });
 
-    const proxyEntries = await this.getProxyFromPlugins();
-
     server.on('upgrade', (req, socket, head) => {
       const reqUrl = req.url?.replace(/\?.+$/, '') || '';
       const path = stripTrailingChar(reqUrl, '/');
-
+      const proxyEntries = this.getProxyFromPlugins();
       const entry = proxyEntries.find((proxy) =>
         proxy.context.some((item) => item === stripTrailingChar(path, '/'))
       );
-
       if (!entry) {
         return;
       }
-
       proxyServer.ws(req, socket, head, {
         target: entry.target,
       });
     });
 
+    const proxyEntries = this.getProxyFromPlugins();
     proxyEntries.forEach((entry) => {
       entry.context.forEach((route) => {
         this._proxyRoutes.add(route);
@@ -304,16 +300,15 @@ export class UIServer {
     return Port.getPortFromRange(portRange || [3100, 3200]);
   }
 
-  private async getProxyFromPlugins(): Promise<ProxyEntry[]> {
-    const proxiesByPlugin = this.plugins.map((plugin) => {
+  private getProxyFromPlugins() {
+    const proxiesByPlugin = this.plugins.flatMap((plugin) => {
       return plugin.getProxy ? plugin.getProxy() : [];
     });
-
-    return flatten(await Promise.all(proxiesByPlugin));
+    return proxiesByPlugin;
   }
 
   private async getProxy(port = 4000) {
-    const proxyEntries = await this.getProxyFromPlugins();
+    const proxyEntries = this.getProxyFromPlugins();
     const catchAllProxies: ProxyEntry[] = [
       {
         context: ['/preview'],
@@ -339,7 +334,6 @@ export class UIServer {
         ws: true,
       },
     ];
-
     return gqlProxies.concat(proxyEntries).concat(catchAllProxies);
   }