Biz/dj 2780 add support for configurationerror in connect react

components/buysellads/buysellads.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};

components/humanlayer/humanlayer.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};

components/planhat/planhat.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};

components/storerocket/storerocket.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};

packages/connect-react/CHANGELOG.md

@@ -1,6 +1,10 @@
 <!-- markdownlint-disable MD024 -->
 # Changelog
 
+# [1.0.0-preview.28] - 2025-02-05
+
+- Surface SDK errors in the form
+
 # [1.0.0-preview.27] - 2025-01-30
 
 - Add styling to alerts

packages/connect-react/README.md

@@ -149,6 +149,11 @@ type ComponentFormProps = {
   onUpdateConfiguredProps: (v: Record<string, any>) => void;
   /** Hide optional props section */
   hideOptionalProps: boolean;
+  /** SDK response payload or the error object from catching SDK request failures. 
+   * Used in conjunction with enableDebugging to show errors in the form.*/
+  sdkErrors: unknown[] | unknown | undefined;
+  /** Whether to show show errors in the form. Requires sdkErrors to be set. */
+  enableDebugging?: boolean;
 };
 ```
 

packages/connect-react/examples/nextjs/package.json

@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "@pipedream/connect-react": "file:../..",
-    "@pipedream/sdk": "^1.1.4",
+    "@pipedream/sdk": "^1.3.2",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106"

packages/connect-react/examples/nextjs/src/app/page.tsx

@@ -10,7 +10,6 @@ import { fetchToken } from "./actions";
 export default function Home() {
   const userId = "my-authed-user-id";
   const client = createFrontendClient({
-    environment: "development",
     externalUserId: userId,
     tokenCallback: fetchToken,
   });
@@ -26,6 +25,11 @@ export default function Home() {
     setDynamicPropsId,
   ] = useState<string | undefined>();
 
+  const [
+    sdkErrors,
+    setSdkErrors,
+  ] = useState<unknown[] | unknown | undefined>(undefined);
+
   const handleDynamicProps = (dynamicProps: { id: string | undefined }) => {
     setDynamicPropsId(dynamicProps.id)
   }
@@ -40,15 +44,19 @@ export default function Home() {
           configuredProps={configuredProps}
           onUpdateDynamicProps={handleDynamicProps}
           onUpdateConfiguredProps={setConfiguredProps}
+          sdkErrors={sdkErrors}
+          enableDebugging={true}
           onSubmit={async () => {
             try {
-              await client.actionRun({
+              const result = await client.runAction({
                 userId,
                 actionId: "slack-send-message",
                 configuredProps,
                 dynamicPropsId,
               });
+              setSdkErrors(result)
             } catch (error) {
+              setSdkErrors(error as unknown)
               console.error("Action run failed:", error);
             }
           }}

packages/connect-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.0.0-preview.27",
+  "version": "1.0.0-preview.28",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"

packages/connect-react/src/components/Alert.tsx

@@ -7,8 +7,9 @@ type AlertProps = {
 
 export function Alert({ prop }: AlertProps) {
   const baseStyles = {
+    width: "100%",
     background: "#e2e3e5",
-    borderRadius: "10px",
+    borderRadius: "5px",
     paddingTop: "2px",
     paddingLeft: "10px",
     paddingRight: "10px",

packages/connect-react/src/components/ComponentForm.tsx

@@ -20,6 +20,8 @@ export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<
   onUpdateConfiguredProps?: (v: U) => void; // XXX onChange?
   onUpdateDynamicProps?: (dp: DynamicProps<T>) => void;
   hideOptionalProps?: boolean;
+  sdkErrors?: unknown[] | unknown | undefined;
+  enableDebugging?: string;
 };
 
 export function ComponentForm<T extends ConfigurableProps>(props: ComponentFormProps<T>) {

packages/connect-react/src/components/Description.tsx

@@ -1,6 +1,8 @@
 import type { CSSProperties } from "react";
 import Markdown from "react-markdown";
-import { ConfigurableProp, ConfigurableProps } from "@pipedream/sdk";
+import {
+  ConfigurableProp, ConfigurableProps,
+} from "@pipedream/sdk";
 import { useCustomize } from "../hooks/customization-context";
 import { FormFieldContext } from "../hooks/form-field-context";
 import { FormContext } from "../hooks/form-context";
@@ -14,9 +16,6 @@ export type DescriptionProps<T extends ConfigurableProps, U extends Configurable
 // XXX should we rename to FieldDescription (so shared prefix + clear we need field context
 // eg. cannot be used in OptionalFieldButton, or they need to be set up better)
 export function Description<T extends ConfigurableProps, U extends ConfigurableProp>(props: DescriptionProps<T, U>) {
-  if (!props.field) {
-    console.log("props", props);
-  }
   const {
     field, markdown,
   } = props;