fix: add webiny watch timeout-related error reporting (#4647)

Author: adrians5j

packages/app/src/plugins/NetworkErrorLinkPlugin.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { ApolloLinkPlugin } from "./ApolloLinkPlugin";
+import { onError } from "apollo-link-error";
+import { type ServerError } from "apollo-link-http-common";
+import { print } from "graphql/language";
+import createErrorOverlay from "./NetworkErrorLinkPlugin/createErrorOverlay";
+import { LocalAwsLambdaTimeoutMessage } from "./NetworkErrorLinkPlugin/LocalAwsLambdaTimeoutMessage";
+import { boolean } from "boolean";
+import { config as appConfig } from "~/config";
+import ErrorOverlay from "~/plugins/NetworkErrorLinkPlugin/ErrorOverlay";
+import GqlErrorOverlay from "./NetworkErrorLinkPlugin/GqlErrorOverlay";
+
+const isLocalAwsLambdaFnInvocationTimeoutError = (error: any): error is ServerError => {
+    return error.result && error.result.code === "LOCAL_AWS_LAMBDA_TIMEOUT";
+};
+
+/**
+ * This plugin creates an ApolloLink that checks for `NetworkError` and shows an ErrorOverlay in the browser.
+ */
+export class NetworkErrorLinkPlugin extends ApolloLinkPlugin {
+    public override createLink() {
+        return onError(({ networkError, operation }) => {
+            const debug = appConfig.getKey("DEBUG", boolean(process.env.REACT_APP_DEBUG));
+
+            if (networkError && debug) {
+                if (isLocalAwsLambdaFnInvocationTimeoutError(networkError)) {
+                    createErrorOverlay({
+                        element: (
+                            <ErrorOverlay
+                                message={<LocalAwsLambdaTimeoutMessage />}
+                                closeable={false}
+                            />
+                        ),
+                        closeable: false
+                    });
+                    return;
+                }
+
+                createErrorOverlay({
+                    element: (
+                        <GqlErrorOverlay
+                            query={print(operation.query)}
+                            networkError={networkError}
+                        />
+                    )
+                });
+            }
+
+            // TODO: also print graphQLErrors
+        });
+    }
+}

packages/app/src/plugins/NetworkErrorLinkPlugin.tsx

@@ -1,68 +1,46 @@
 import React, { useState } from "react";
-import get from "lodash/get";
 import { IconButton } from "@webiny/ui/Button";
 import { Typography } from "@webiny/ui/Typography";
 import { i18n } from "../../i18n";
-import { OverlayWrapper, Pre } from "./StyledComponents";
+import { OverlayWrapper } from "./StyledComponents";
 import { ReactComponent as CloseIcon } from "./assets/close_24px.svg";
 
 const t = i18n.ns("app/graphql/error-overlay");
 
 const ENVIRONMENT_VARIABLES_ARTICLE_LINK =
     "https://www.webiny.com/docs/how-to-guides/environment-variables";
 
-interface ErrorOverlayProps {
-    query: string;
-    networkError: {
-        message: string;
-        result?: {
-            error?: {
-                stack?: string;
-            };
-        };
-    };
-}
+type ErrorOverlayProps = Partial<{
+    title: React.ReactNode;
+    message: React.ReactNode;
+    description: React.ReactNode;
+    closeable?: boolean;
+}>;
+
 const ErrorOverlay = (props: ErrorOverlayProps) => {
-    const { query, networkError } = props;
+    const { title = "An error occurred", message, description, closeable } = props;
     const [open, setOpen] = useState(true);
-    // Log error in browser's developer console for further inspection.
-    console.error({ networkError });
-
     if (!open) {
         return null;
     }
 
-    const stackTrace = get(networkError, "result.error.stack");
-
     return (
         <OverlayWrapper>
             <div className="inner">
                 <div className="header">
                     <div className="header__title">
-                        <Typography use={"headline4"}>{networkError.message}</Typography>
+                        <Typography use={"headline4"}>{title}</Typography>
                     </div>
-                    <div className="header__action">
-                        <IconButton icon={<CloseIcon />} onClick={() => setOpen(false)} />
-                    </div>
-                </div>
-                <div className="body">
-                    <div className="body__summary">
-                        <Typography
-                            use={"subtitle1"}
-                        >{t`Error occurred while executing operation:`}</Typography>
-                        <Pre>
-                            <code>{query}</code>
-                        </Pre>
-                    </div>
-                    {stackTrace && (
-                        <div className="body__description">
-                            <Typography use={"subtitle1"}>{t`Complete stack trace:`}</Typography>
-                            <Pre>
-                                <code>{stackTrace}</code>
-                            </Pre>
+                    {closeable !== false && (
+                        <div className="header__action">
+                            <IconButton icon={<CloseIcon />} onClick={() => setOpen(false)} />
                         </div>
                     )}
                 </div>
+                <div className="body">
+                    <div className="body__summary">{message}</div>
+                    {description && <div className="body__description">{description}</div>}
+                </div>
                 <div className="footer">
                     <Typography use={"body2"}>
                         {t`

packages/app/src/plugins/NetworkErrorLinkPlugin/ErrorOverlay.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import get from "lodash/get";
+import { Typography } from "@webiny/ui/Typography";
+import { i18n } from "../../i18n";
+import { Pre } from "./StyledComponents";
+import ErrorOverlay from "./ErrorOverlay";
+
+const t = i18n.ns("app/graphql/error-overlay");
+
+interface ErrorOverlayProps {
+    query: string;
+    networkError: {
+        message: string;
+        result?: {
+            error?: {
+                stack?: string;
+            };
+        };
+    };
+}
+
+const GqlErrorOverlay = (props: ErrorOverlayProps) => {
+    const { query, networkError } = props;
+    const stackTrace = get(networkError, "result.error.stack");
+
+    const title = networkError.message;
+
+    const message = (
+        <>
+            <Typography
+                use={"subtitle1"}
+            >{t`Error occurred while executing operation:`}</Typography>
+            <Pre>
+                <code>{query}</code>
+            </Pre>
+        </>
+    );
+
+    let description: React.ReactNode = null;
+    if (stackTrace) {
+        description = (
+            <>
+                <Typography use={"subtitle1"}>{t`Complete stack trace:`}</Typography>
+                <Pre>
+                    <code>{stackTrace}</code>
+                </Pre>
+            </>
+        );
+    }
+
+    return <ErrorOverlay title={title} message={message} description={description} />;
+};
+
+export default GqlErrorOverlay;

packages/app/src/plugins/NetworkErrorLinkPlugin/GqlErrorOverlay.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const Code = styled.code`
+    font-family: monospace;
+    font-size: 0.85rem;
+    line-height: 1rem;
+`;
+
+export const LocalAwsLambdaTimeoutMessage = () => (
+    <>
+        Local AWS Lambda function execution timed out.
+        <br />
+        <br />
+        Did you stop the&nbsp;
+        <a
+            href={"https://www.webiny.com/docs/core-development-concepts/basics/watch-command"}
+            rel={"noreferrer noopener"}
+            target={"_blank"}
+        >
+            <Code>webiny watch</Code>
+        </a>
+        &nbsp;command? If so, please restart the command or deploy your changes via the&nbsp;
+        <a
+            href={"https://www.webiny.com/docs/core-development-concepts/basics/project-deployment"}
+            rel={"noreferrer noopener"}
+            target={"_blank"}
+        >
+            <Code>webiny deploy</Code>
+        </a>
+        &nbsp;command. For example: <Code>yarn webiny deploy api --env dev</Code>.
+        <br />
+        <br />
+        Learn more:&nbsp;
+        <a
+            href={"https://webiny.link/local-aws-lambda-development"}
+            rel={"noreferrer noopener"}
+            target={"_blank"}
+        >
+            https://webiny.link/local-aws-lambda-development
+        </a>
+    </>
+);

packages/app/src/plugins/NetworkErrorLinkPlugin/LocalAwsLambdaTimeoutMessage.tsx

@@ -4,15 +4,14 @@ import React from "react";
  */
 // eslint-disable-next-line react/no-deprecated
 import { render } from "react-dom";
-import ErrorOverlay from "./ErrorOverlay";
-import { ServerError, ServerParseError } from "apollo-link-http-common";
 
 interface CreateErrorOverlayParams {
-    query: string;
-    networkError: Error | ServerError | ServerParseError;
+    element: React.ReactElement;
+    closeable?: boolean;
 }
+
 const createErrorOverlay = (params: CreateErrorOverlayParams): void => {
-    const { query, networkError } = params;
+    const { element } = params;
     // If the element already present in DOM, return immediately.
     if (document.getElementById("overlay-root")) {
         return;
@@ -24,7 +23,7 @@ const createErrorOverlay = (params: CreateErrorOverlayParams): void => {
     const body: HTMLBodyElement = document.getElementsByTagName("body")[0];
     body.appendChild(container);
     // Mount the ErrorOverlay component into root element.
-    render(<ErrorOverlay query={query} networkError={networkError} />, container);
+    render(element, container);
 };
 
 export default createErrorOverlay;

packages/app/src/plugins/NetworkErrorLinkPlugin/createErrorOverlay.tsx

@@ -251,6 +251,11 @@ export const commands: CliCommandPlugin[] = [
                             describe: `Increase AWS Lambda function timeout (passed as number of seconds, used with local AWS Lambda development)`,
                             type: "number"
                         });
+                        yargs.option("increase-handshake-timeout", {
+                            default: 5,
+                            describe: `Increase timeout for the initial handshake between a single AWS Lambda invocation and local code execution (passed as number of seconds, used with local AWS Lambda development)`,
+                            type: "number"
+                        });
                         yargs.option("allow-production", {
                             default: false,
                             describe: `Enables running the watch command with "prod" and "production" environments (not recommended).`,

packages/cli-plugin-deploy-pulumi/src/commands/index.ts

@@ -181,6 +181,7 @@ export const newWatch = async (inputs: IUserCommandInput, context: Context) => {
     });
     const sessionId = new Date().getTime();
     const increaseTimeout = inputs.increaseTimeout;
+    const localExecutionHandshakeTimeout = inputs.increaseHandshakeTimeout || 5; // Default to 5 seconds.
 
     // We want to ensure a Pulumi refresh is made before the next deploy.
     setMustRefreshBeforeDeploy(context);
@@ -196,7 +197,8 @@ export const newWatch = async (inputs: IUserCommandInput, context: Context) => {
         iotEndpointTopic,
         sessionId,
         functionsList,
-        increaseTimeout
+        increaseTimeout,
+        localExecutionHandshakeTimeout
     });
 
     let inspector: typeof inspectorType | undefined = undefined;

packages/cli-plugin-deploy-pulumi/src/commands/newWatch.ts

@@ -0,0 +1,33 @@
+## About
+
+This folder contains the AWS Lambda function code that gets uploaded by the `webiny watch` command.
+
+The code basically enables forwarding of events from AWS Lambda to the `webiny watch` command, which then runs the actual function code in the local environment.
+
+Learn more: https://webiny.link/local-aws-lambda-development.
+
+## Development
+
+In this folder, you can find the `handler.zip` file, which is what the `webiny watch` command uploads to AWS Lambda.
+
+In the archive, you will find the following files:
+1. `handler.js` - the main handler code that processes incoming events and forwards them to the local environment
+2. `mqtt.js` - a utility for handling MQTT messages (already prepared for direct import in `handler.js`, no NPM install needed).
+
+In case you need to update the handler code, you must manually unzip the file, make the changes, and then zip it again.
+
+To test the changes, build the `@webiny/cli-plugin-deploy-pulumi` package and run the `webiny watch` command. The command will automatically upload the new `handler.zip` file to AWS Lambda.
+
+Repeat the process until you are satisfied with the results.
+
+Note that, to build the `@webiny/cli-plugin-deploy-pulumi` package, run the following command from the root of the Webiny project:
+
+```bash
+yarn build -p @webiny/cli-plugin-deploy-pulumi
+```
+### Development via AWS Lambda Console
+
+Another way to iterate on the code a bit faster is to simply use the AWS Lambda console directly. 
+
+Just run the `webiny watch` command, and then open the AWS Lambda console and find the function you wish to test your changes with. You can then edit the `handler.js` file directly in the console. Once you're done with, just c/p the code from the console and paste it into the `handler.js` file in this folder, and then zip it again.
+