From 9b22d102e185e28c5384fd3de224e422c9dfa8bd Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Thu, 30 Jan 2025 16:22:04 -0600
Subject: [PATCH 01/26] Fix linter error

---
 packages/connect-react/src/components/Description.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/connect-react/src/components/Description.tsx b/packages/connect-react/src/components/Description.tsx
index b8b2f8d376c5e..66cd507167799 100644
--- a/packages/connect-react/src/components/Description.tsx
+++ b/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";

From 26fc774d851e59fb762db2cea11fc9e4f1b15ea3 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Fri, 31 Jan 2025 18:10:52 -0600
Subject: [PATCH 02/26] Surface configuration and sdk errors

---
 .../examples/nextjs/package-lock.json         |  2 +-
 .../examples/nextjs/src/app/page.tsx          | 16 +++--
 .../src/components/ComponentForm.tsx          |  1 +
 .../connect-react/src/components/Errors.tsx   | 59 +++++++++++++------
 .../connect-react/src/components/Field.tsx    |  5 +-
 .../src/components/InternalField.tsx          |  3 +-
 .../connect-react/src/hooks/form-context.tsx  | 35 ++++++++++-
 .../src/hooks/form-field-context.tsx          |  1 +
 pnpm-lock.yaml                                |  8 +--
 9 files changed, 99 insertions(+), 31 deletions(-)

diff --git a/packages/connect-react/examples/nextjs/package-lock.json b/packages/connect-react/examples/nextjs/package-lock.json
index a68badecb0ec5..4286bd9281628 100644
--- a/packages/connect-react/examples/nextjs/package-lock.json
+++ b/packages/connect-react/examples/nextjs/package-lock.json
@@ -23,7 +23,7 @@
     },
     "../..": {
       "name": "@pipedream/connect-react",
-      "version": "1.0.0-preview.25",
+      "version": "1.0.0-preview.26",
       "license": "MIT",
       "dependencies": {
         "@pipedream/sdk": "workspace:^",
diff --git a/packages/connect-react/examples/nextjs/src/app/page.tsx b/packages/connect-react/examples/nextjs/src/app/page.tsx
index d3b1e1702bff8..dbe7bd518758b 100644
--- a/packages/connect-react/examples/nextjs/src/app/page.tsx
+++ b/packages/connect-react/examples/nextjs/src/app/page.tsx
@@ -8,7 +8,7 @@ import {
 import { fetchToken } from "./actions";
 
 export default function Home() {
-  const userId = "my-authed-user-id";
+  const userId = "demo-32aaf9cd-5df0-4ffe-86b5-db43a61a842c"; //gmail-new-email-received
   const client = createFrontendClient({
     environment: "development",
     externalUserId: userId,
@@ -26,6 +26,11 @@ export default function Home() {
     setDynamicPropsId,
   ] = useState<string | undefined>();
 
+  const [
+    errors,
+    setErrors,
+  ] = useState<unknown[] | unknown | undefined>(undefined);
+
   const handleDynamicProps = (dynamicProps: { id: string | undefined }) => {
     setDynamicPropsId(dynamicProps.id)
   }
@@ -36,19 +41,22 @@ export default function Home() {
       <FrontendClientProvider client={client}>
         <ComponentFormContainer
           userId={userId}
-          componentKey="slack-send-message"
+          componentKey="gmail-new-email-received"
           configuredProps={configuredProps}
           onUpdateDynamicProps={handleDynamicProps}
           onUpdateConfiguredProps={setConfiguredProps}
+          sdkErrors={errors}
           onSubmit={async () => {
             try {
-              await client.actionRun({
+              const result = await client.actionRun({
                 userId,
-                actionId: "slack-send-message",
+                actionId: "gmail-new-email-received",
                 configuredProps,
                 dynamicPropsId,
               });
+              setErrors(result?.os)
             } catch (error) {
+              setErrors(error as unknown)
               console.error("Action run failed:", error);
             }
           }}
diff --git a/packages/connect-react/src/components/ComponentForm.tsx b/packages/connect-react/src/components/ComponentForm.tsx
index e796c34c414f4..220ac81c9ba86 100644
--- a/packages/connect-react/src/components/ComponentForm.tsx
+++ b/packages/connect-react/src/components/ComponentForm.tsx
@@ -20,6 +20,7 @@ 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;
 };
 
 export function ComponentForm<T extends ConfigurableProps>(props: ComponentFormProps<T>) {
diff --git a/packages/connect-react/src/components/Errors.tsx b/packages/connect-react/src/components/Errors.tsx
index 1596a9480d304..ce42d20032cad 100644
--- a/packages/connect-react/src/components/Errors.tsx
+++ b/packages/connect-react/src/components/Errors.tsx
@@ -1,38 +1,63 @@
 import { FormContext } from "../hooks/form-context";
 import type { FormFieldContext } from "../hooks/form-field-context";
 import {
-  ConfigurableProp, ConfigurableProps,
+  ConfigurableProp, ConfigurablePropAlert, ConfigurableProps,
 } from "@pipedream/sdk";
-import { useCustomize } from "../hooks/customization-context";
-import type { CSSProperties } from "react";
+import { Alert } from "./Alert";
 
 export type ErrorsProps<T extends ConfigurableProps, U extends ConfigurableProp> = {
-  errors: string[];
   field: FormFieldContext<U>;
   form: FormContext<T>;
 };
 
 export function Errors<T extends ConfigurableProps, U extends ConfigurableProp>(props: ErrorsProps<T, U>) {
-  const { errors } = props;
-
+  const { field } = props;
   const {
-    getProps, theme,
-  } = useCustomize();
-
-  const baseStyles: CSSProperties = {
-    color: theme.colors.danger,
-    gridArea: "errors",
-  };
+    errors, prop,
+  } = field
 
-  if (!errors.length) {
+  if (!Object.keys(errors || {}).length) {
     return null;
   }
 
+  if (!errors[prop.name]) {
+    return null
+  }
+
   // TODO depending on type does different shit... we might need async loader around the label, etc.?
   // maybe that should just be handled by FormFieldContext instead of container?
+
+  const formattedErrors: ConfigurablePropAlert[] = []
+  // for (const key in fieldErrors) {
+  const key = "xxx"
+  if (key === "sdkErrors") {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    formattedErrors.push(...errors[key].map((e) => {
+      const o = JSON.parse(e)
+      return {
+        type: "alert",
+        alertType: "error",
+        content: `#${o.name}\n${o.message}`,
+      }
+    }))
+  } else {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    formattedErrors.push(...errors[prop.name].map((e) => {
+      return {
+        type: "alert",
+        alertType: "error",
+        content: e,
+      }
+    }))
+  }
+  // }
+
   return (
-    <ul {...getProps("errors", baseStyles, props)}>
-      {errors.map((msg) => <li key={msg} {...getProps("error", baseStyles, props)}>{msg}</li>)}
-    </ul>
+    // <ul {...getProps("errors", baseStyles, props)}>
+    //   {errors.map((msg) => <li key={msg} {...getProps("error", baseStyles, props)}>{msg}</li>)}
+    // </ul>
+    <>{formattedErrors.map((fe, idx: number) => <Alert prop={fe} key={idx}/>)}</>
   );
 }
diff --git a/packages/connect-react/src/components/Field.tsx b/packages/connect-react/src/components/Field.tsx
index 31a553bb9946e..284055797c86f 100644
--- a/packages/connect-react/src/components/Field.tsx
+++ b/packages/connect-react/src/components/Field.tsx
@@ -40,8 +40,6 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
     Label, Description, Errors,
   } = getComponents();
 
-  const errors: string[] = []; // TODO get from field context, can be added or removed by Control, etc.
-
   const app = "app" in field.extra
     ? field.extra.app
     : undefined;
@@ -59,12 +57,13 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
   // maybe that should just be handled by FormFieldContext instead of container?
   // XXX rename to FieldErrors + add FormErrors (to ComponentFormInternal)
   // XXX use similar pattern as app below for boolean and checkboxing DOM re-ordering?
+
   return (
     <div {...getProps("field", baseStyles, props)}>
       <Label text={labelText} field={field} form={form} />
       <Control field={field} form={form} />
       <Description markdown={prop.description} field={field} form={form} />
-      <Errors errors={errors} field={field} form={form} />
+      <Errors field={field} form={form} />
     </div>
   );
 }
diff --git a/packages/connect-react/src/components/InternalField.tsx b/packages/connect-react/src/components/InternalField.tsx
index 047d714914891..e003833819266 100644
--- a/packages/connect-react/src/components/InternalField.tsx
+++ b/packages/connect-react/src/components/InternalField.tsx
@@ -15,7 +15,7 @@ export function InternalField<T extends ConfigurableProp>({
 }: FieldInternalProps<T>) {
   const formCtx = useFormContext();
   const {
-    id: formId, configuredProps, registerField, setConfiguredProp,
+    id: formId, configuredProps, registerField, setConfiguredProp, errors,
   } = formCtx;
 
   const appSlug = prop.type === "app" && "app" in prop
@@ -44,6 +44,7 @@ export function InternalField<T extends ConfigurableProp>({
     extra: {
       app, // XXX fix ts
     },
+    errors,
   };
   useEffect(() => registerField(fieldCtx), [
     fieldCtx,
diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx
index 2f26376e4b3dc..0ef460f74c4a1 100644
--- a/packages/connect-react/src/hooks/form-context.tsx
+++ b/packages/connect-react/src/hooks/form-context.tsx
@@ -73,7 +73,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const id = useId();
 
   const {
-    component, configuredProps: __configuredProps, propNames, userId,
+    component, configuredProps: __configuredProps, propNames, userId, sdkErrors,
   } = formProps;
   const componentId = component.key;
 
@@ -94,6 +94,11 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     setErrors,
   ] = useState<Record<string, string[]>>({});
 
+  const [
+    configurationErrors,
+    setConfigurationErrors,
+  ] = useState<string[]>([]);
+
   const [
     enabledOptionalProps,
     setEnabledOptionalProps,
@@ -264,6 +269,12 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     _configuredProps,
   ]);
 
+  useEffect(() => {
+    handleSdkErrors(sdkErrors)
+  }, [
+    sdkErrors,
+  ]);
+
   useEffect(() => {
     const newConfiguredProps: ConfiguredProps<T> = {};
     for (const prop of configurableProps) {
@@ -395,6 +406,28 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     checkPropsNeedConfiguring()
   };
 
+  const handleSdkErrors = (o: unknown[] | unknown | undefined) => {
+    if (!o) return
+    const os = o
+    if (Array.isArray(os) && os.length > 0) {
+      const newErrors = os.map((it) => {
+        const name = it.err?.name
+        const message = it.err?.message
+        if (name && message) return JSON.stringify({
+          name,
+          message,
+        })
+        return undefined
+      }).filter((e) => e !== undefined)
+      if (newErrors) setErrors({
+        ...errors,
+        sdkErrors: newErrors,
+      })
+    } else if (typeof o === "object") {
+      // TODO: handle rails api errors here
+    }
+  }
+
   // console.log("***", configurableProps, configuredProps)
   const value: FormContext<T> = {
     id,
diff --git a/packages/connect-react/src/hooks/form-field-context.tsx b/packages/connect-react/src/hooks/form-field-context.tsx
index bb05d46d3ddcb..cffd1a6cecb71 100644
--- a/packages/connect-react/src/hooks/form-field-context.tsx
+++ b/packages/connect-react/src/hooks/form-field-context.tsx
@@ -16,6 +16,7 @@ export type FormFieldContext<T extends ConfigurableProp> = {
   value: PropValue<T["type"]> | undefined;
   onChange: (value: PropValue<T["type"]> | undefined) => void;
   extra: FormFieldContextExtra<T>;
+  errors: Record<string, string[]>;
 };
 
 export const FormFieldContext = createContext<FormFieldContext<any /* XXX fix */> | undefined>(undefined); // eslint-disable-line @typescript-eslint/no-explicit-any
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f5858a965ed2..15b4cebcd9e9e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -292,8 +292,7 @@ importers:
         specifier: ^3.0.1
         version: 3.0.3
 
-  components/adobe_document_generation_api:
-    specifiers: {}
+  components/adobe_document_generation_api: {}
 
   components/adobe_pdf_services:
     dependencies:
@@ -10501,8 +10500,7 @@ importers:
 
   components/syncro: {}
 
-  components/synthflow:
-    specifiers: {}
+  components/synthflow: {}
 
   components/t2m_url_shortener: {}
 
@@ -31754,6 +31752,8 @@ snapshots:
       '@putout/operator-filesystem': 5.0.0(putout@36.13.1(eslint@8.57.1)(typescript@5.6.3))
       '@putout/operator-json': 2.2.0
       putout: 36.13.1(eslint@8.57.1)(typescript@5.6.3)
+    transitivePeerDependencies:
+      - supports-color
 
   '@putout/operator-regexp@1.0.0(putout@36.13.1(eslint@8.57.1)(typescript@5.6.3))':
     dependencies:

From b5374a3c6b3e9429314ae7751a086a8e03bbfff9 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Fri, 31 Jan 2025 18:24:11 -0600
Subject: [PATCH 03/26] Update pnpm lock

---
 packages/connect-react/src/components/Alert.tsx | 3 ++-
 pnpm-lock.yaml                                  | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/connect-react/src/components/Alert.tsx b/packages/connect-react/src/components/Alert.tsx
index 3d7bc2db3c6fc..968a177250dc7 100644
--- a/packages/connect-react/src/components/Alert.tsx
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 43f090da3544a..6c9868944a0be 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10285,8 +10285,7 @@ importers:
         specifier: ^3.0.1
         version: 3.0.3
 
-  components/storerocket:
-    specifiers: {}
+  components/storerocket: {}
 
   components/stormboard: {}
 

From 915b0c771cf0a7d5eb263407b64de5f7f6613f3f Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Mon, 3 Feb 2025 14:24:03 -0600
Subject: [PATCH 04/26] Render SDK errors in an alert

---
 .../connect-react/src/components/Errors.tsx   | 41 ++++++-------------
 .../src/components/InternalComponentForm.tsx  | 31 +++++++++++++-
 .../connect-react/src/hooks/form-context.tsx  | 27 ++++++------
 3 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/packages/connect-react/src/components/Errors.tsx b/packages/connect-react/src/components/Errors.tsx
index ce42d20032cad..071c02e62264d 100644
--- a/packages/connect-react/src/components/Errors.tsx
+++ b/packages/connect-react/src/components/Errors.tsx
@@ -27,37 +27,20 @@ export function Errors<T extends ConfigurableProps, U extends ConfigurableProp>(
   // TODO depending on type does different shit... we might need async loader around the label, etc.?
   // maybe that should just be handled by FormFieldContext instead of container?
 
-  const formattedErrors: ConfigurablePropAlert[] = []
-  // for (const key in fieldErrors) {
-  const key = "xxx"
-  if (key === "sdkErrors") {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    formattedErrors.push(...errors[key].map((e) => {
-      const o = JSON.parse(e)
-      return {
-        type: "alert",
-        alertType: "error",
-        content: `#${o.name}\n${o.message}`,
-      }
-    }))
-  } else {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    formattedErrors.push(...errors[prop.name].map((e) => {
-      return {
-        type: "alert",
-        alertType: "error",
-        content: e,
-      }
-    }))
+  const formattedErrors: ConfigurablePropAlert[] = errors[prop.name].map((e) => {
+    return {
+      type: "alert",
+      alertType: "error",
+      content: e,
+    }
+  })
+
+  const baseStyles = {
+    display: "grid",
+    gridTemplateColumns: "max-content",
   }
-  // }
 
   return (
-    // <ul {...getProps("errors", baseStyles, props)}>
-    //   {errors.map((msg) => <li key={msg} {...getProps("error", baseStyles, props)}>{msg}</li>)}
-    // </ul>
-    <>{formattedErrors.map((fe, idx: number) => <Alert prop={fe} key={idx}/>)}</>
+    <div className="pd-errors" style={baseStyles}>{formattedErrors.map((fe, idx: number) => <Alert prop={fe} key={idx}/>)}</div>
   );
 }
diff --git a/packages/connect-react/src/components/InternalComponentForm.tsx b/packages/connect-react/src/components/InternalComponentForm.tsx
index e890b79adc869..de77fb4fc8ccf 100644
--- a/packages/connect-react/src/components/InternalComponentForm.tsx
+++ b/packages/connect-react/src/components/InternalComponentForm.tsx
@@ -1,4 +1,6 @@
-import { Suspense } from "react";
+import {
+  Suspense, useEffect, useState,
+} from "react";
 import type {
   CSSProperties, FormEventHandler,
 } from "react";
@@ -23,12 +25,37 @@ export function InternalComponentForm() {
     optionalPropSetEnabled,
     props: formContextProps,
     setSubmitting,
+    sdkErrors: __sdkErrors,
+    submitting,
   } = formContext;
 
   const {
     hideOptionalProps, onSubmit,
   } = formContextProps;
 
+  const [
+    sdkErrors,
+    setSdkErrors,
+  ] = useState<ConfigurablePropAlert[]>([])
+
+  useEffect(() => {
+    if (submitting) setSdkErrors([])
+    else {
+      if (__sdkErrors && __sdkErrors.length) {
+        setSdkErrors(__sdkErrors.map((e) => {
+          return {
+            type: "alert",
+            alertType: "error",
+            content: `# ${e.name}\n${e.message}`,
+          }
+        }))
+      }
+    }
+  }, [
+    __sdkErrors,
+    submitting,
+  ]);
+
   const {
     getComponents, getProps, theme,
   } = useCustomize();
@@ -96,6 +123,7 @@ export function InternalComponentForm() {
   }
 
   // TODO improve the error boundary thing (use default Alert component maybe)
+
   return (
     <ErrorBoundary fallback={(err) => <p style={{
       color: "red",
@@ -130,6 +158,7 @@ export function InternalComponentForm() {
               </div>
             </div>
             : null}
+          { sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
           {onSubmit && <ControlSubmit form={formContext} />}
         </form>
       </Suspense>
diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx
index 0ef460f74c4a1..c3d0fde48ce8f 100644
--- a/packages/connect-react/src/hooks/form-context.tsx
+++ b/packages/connect-react/src/hooks/form-context.tsx
@@ -24,6 +24,7 @@ export type FormContext<T extends ConfigurableProps> = {
   dynamicProps?: DynamicProps<T>; // lots of calls require dynamicProps?.id, so need to expose
   dynamicPropsQueryIsFetching?: boolean;
   errors: Record<string, string[]>;
+  sdkErrors: Record<string, string>[];
   fields: Record<string, FormFieldContext<ConfigurableProp>>;
   id: string;
   isValid: boolean;
@@ -73,7 +74,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const id = useId();
 
   const {
-    component, configuredProps: __configuredProps, propNames, userId, sdkErrors,
+    component, configuredProps: __configuredProps, propNames, userId, sdkErrors: __sdkErrors,
   } = formProps;
   const componentId = component.key;
 
@@ -95,9 +96,9 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   ] = useState<Record<string, string[]>>({});
 
   const [
-    configurationErrors,
-    setConfigurationErrors,
-  ] = useState<string[]>([]);
+    sdkErrors,
+    setSdkErrors,
+  ] = useState<Record<string, string>[]>([])
 
   const [
     enabledOptionalProps,
@@ -270,9 +271,9 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   ]);
 
   useEffect(() => {
-    handleSdkErrors(sdkErrors)
+    handleSdkErrors(__sdkErrors)
   }, [
-    sdkErrors,
+    __sdkErrors,
   ]);
 
   useEffect(() => {
@@ -411,18 +412,15 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     const os = o
     if (Array.isArray(os) && os.length > 0) {
       const newErrors = os.map((it) => {
-        const name = it.err?.name
-        const message = it.err?.message
-        if (name && message) return JSON.stringify({
+        const name: string = it.err?.name
+        const message: string = it.err?.message
+        if (name && message) return {
           name,
           message,
-        })
+        } as Record<string, string>
         return undefined
       }).filter((e) => e !== undefined)
-      if (newErrors) setErrors({
-        ...errors,
-        sdkErrors: newErrors,
-      })
+      setSdkErrors(newErrors)
     } else if (typeof o === "object") {
       // TODO: handle rails api errors here
     }
@@ -449,6 +447,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     setConfiguredProp,
     setSubmitting,
     submitting,
+    sdkErrors,
   };
   return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
 };

From 506f70e0855c514b3065cab7df6b3effc1663bea Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Mon, 3 Feb 2025 14:54:10 -0600
Subject: [PATCH 05/26] Add getEnvironment to BaseClient

---
 packages/sdk/CHANGELOG.md        | 6 ++++++
 packages/sdk/package.json        | 2 +-
 packages/sdk/src/shared/index.ts | 8 ++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/sdk/CHANGELOG.md b/packages/sdk/CHANGELOG.md
index 453f666b98c9e..3bc01d2347fab 100644
--- a/packages/sdk/CHANGELOG.md
+++ b/packages/sdk/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Changelog
 
+## [1.3.2] - 2025-02-3
+
+### Changed
+
+- Add getEnvironment function to BaseClient
+
 ## [1.3.1] - 2025-01-30
 
 ### Changed
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index 8a0657e7989f6..309b91cf8607f 100644
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@pipedream/sdk",
   "type": "module",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Pipedream SDK",
   "main": "./dist/server.js",
   "module": "./dist/server.js",
diff --git a/packages/sdk/src/shared/index.ts b/packages/sdk/src/shared/index.ts
index 2ee4ebdf31b87..7fcf185e742d0 100644
--- a/packages/sdk/src/shared/index.ts
+++ b/packages/sdk/src/shared/index.ts
@@ -871,6 +871,14 @@ export abstract class BaseClient {
     this.workflowDomain = workflowDomain;
   }
 
+  /**
+   * Retrieves the current environment the client is configured to use.
+   * @returns {string} The current environment.
+   */
+  public getEnvironment(): string {
+    return this.environment;
+  }
+
   /**
    * Makes an HTTP request
    *

From 7e7076e0e63326e93032bf95d7187e88c23c22b1 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Mon, 3 Feb 2025 15:57:21 -0600
Subject: [PATCH 06/26] Add isDevelopment flag to context

---
 packages/connect-react/examples/nextjs/package.json |  2 +-
 .../connect-react/examples/nextjs/src/app/page.tsx  | 13 +++++++------
 .../connect-react/src/components/ComponentForm.tsx  |  1 +
 packages/connect-react/src/components/Field.tsx     |  6 ++++--
 .../src/components/InternalComponentForm.tsx        |  3 ++-
 .../connect-react/src/components/InternalField.tsx  |  3 ++-
 packages/connect-react/src/hooks/form-context.tsx   |  9 ++++++++-
 .../connect-react/src/hooks/form-field-context.tsx  |  1 +
 8 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/connect-react/examples/nextjs/package.json b/packages/connect-react/examples/nextjs/package.json
index 02aa363bb7538..c520feccd93dd 100644
--- a/packages/connect-react/examples/nextjs/package.json
+++ b/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"
diff --git a/packages/connect-react/examples/nextjs/src/app/page.tsx b/packages/connect-react/examples/nextjs/src/app/page.tsx
index dbe7bd518758b..fe21ffd15c75d 100644
--- a/packages/connect-react/examples/nextjs/src/app/page.tsx
+++ b/packages/connect-react/examples/nextjs/src/app/page.tsx
@@ -27,8 +27,8 @@ export default function Home() {
   ] = useState<string | undefined>();
 
   const [
-    errors,
-    setErrors,
+    sdkErrors,
+    setSdkErrors,
   ] = useState<unknown[] | unknown | undefined>(undefined);
 
   const handleDynamicProps = (dynamicProps: { id: string | undefined }) => {
@@ -45,18 +45,19 @@ export default function Home() {
           configuredProps={configuredProps}
           onUpdateDynamicProps={handleDynamicProps}
           onUpdateConfiguredProps={setConfiguredProps}
-          sdkErrors={errors}
+          sdkErrors={sdkErrors}
+          environment={client.getEnvironment()}
           onSubmit={async () => {
             try {
-              const result = await client.actionRun({
+              const result = await client.runAction({
                 userId,
                 actionId: "gmail-new-email-received",
                 configuredProps,
                 dynamicPropsId,
               });
-              setErrors(result?.os)
+              setSdkErrors(result?.os)
             } catch (error) {
-              setErrors(error as unknown)
+              setSdkErrors(error as unknown)
               console.error("Action run failed:", error);
             }
           }}
diff --git a/packages/connect-react/src/components/ComponentForm.tsx b/packages/connect-react/src/components/ComponentForm.tsx
index 220ac81c9ba86..65a941c6f87a4 100644
--- a/packages/connect-react/src/components/ComponentForm.tsx
+++ b/packages/connect-react/src/components/ComponentForm.tsx
@@ -21,6 +21,7 @@ export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<
   onUpdateDynamicProps?: (dp: DynamicProps<T>) => void;
   hideOptionalProps?: boolean;
   sdkErrors?: unknown[] | unknown | undefined;
+  environment?: string;
 };
 
 export function ComponentForm<T extends ConfigurableProps>(props: ComponentFormProps<T>) {
diff --git a/packages/connect-react/src/components/Field.tsx b/packages/connect-react/src/components/Field.tsx
index 284055797c86f..6ffa8161910d1 100644
--- a/packages/connect-react/src/components/Field.tsx
+++ b/packages/connect-react/src/components/Field.tsx
@@ -21,7 +21,9 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
   const {
     form, field,
   } = props;
-  const { prop } = field;
+  const {
+    prop, isDevelopment,
+  } = field;
   const {
     getProps, getComponents,
   } = useCustomize();
@@ -63,7 +65,7 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
       <Label text={labelText} field={field} form={form} />
       <Control field={field} form={form} />
       <Description markdown={prop.description} field={field} form={form} />
-      <Errors field={field} form={form} />
+      { isDevelopment && <Errors field={field} form={form} /> }
     </div>
   );
 }
diff --git a/packages/connect-react/src/components/InternalComponentForm.tsx b/packages/connect-react/src/components/InternalComponentForm.tsx
index de77fb4fc8ccf..93ac97b2228ba 100644
--- a/packages/connect-react/src/components/InternalComponentForm.tsx
+++ b/packages/connect-react/src/components/InternalComponentForm.tsx
@@ -27,6 +27,7 @@ export function InternalComponentForm() {
     setSubmitting,
     sdkErrors: __sdkErrors,
     submitting,
+    isDevelopment,
   } = formContext;
 
   const {
@@ -158,7 +159,7 @@ export function InternalComponentForm() {
               </div>
             </div>
             : null}
-          { sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
+          { isDevelopment && sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
           {onSubmit && <ControlSubmit form={formContext} />}
         </form>
       </Suspense>
diff --git a/packages/connect-react/src/components/InternalField.tsx b/packages/connect-react/src/components/InternalField.tsx
index e003833819266..4167df58906ff 100644
--- a/packages/connect-react/src/components/InternalField.tsx
+++ b/packages/connect-react/src/components/InternalField.tsx
@@ -15,7 +15,7 @@ export function InternalField<T extends ConfigurableProp>({
 }: FieldInternalProps<T>) {
   const formCtx = useFormContext();
   const {
-    id: formId, configuredProps, registerField, setConfiguredProp, errors,
+    id: formId, configuredProps, registerField, setConfiguredProp, errors, isDevelopment,
   } = formCtx;
 
   const appSlug = prop.type === "app" && "app" in prop
@@ -45,6 +45,7 @@ export function InternalField<T extends ConfigurableProp>({
       app, // XXX fix ts
     },
     errors,
+    isDevelopment,
   };
   useEffect(() => registerField(fieldCtx), [
     fieldCtx,
diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx
index c3d0fde48ce8f..85a9ffeb4b4d7 100644
--- a/packages/connect-react/src/hooks/form-context.tsx
+++ b/packages/connect-react/src/hooks/form-context.tsx
@@ -38,6 +38,7 @@ export type FormContext<T extends ConfigurableProps> = {
   setSubmitting: (submitting: boolean) => void;
   submitting: boolean;
   userId: string;
+  isDevelopment: boolean;
 };
 
 export const skippablePropTypes = [
@@ -74,7 +75,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const id = useId();
 
   const {
-    component, configuredProps: __configuredProps, propNames, userId, sdkErrors: __sdkErrors,
+    component, configuredProps: __configuredProps, propNames, userId, sdkErrors: __sdkErrors, environment,
   } = formProps;
   const componentId = component.key;
 
@@ -100,6 +101,11 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     setSdkErrors,
   ] = useState<Record<string, string>[]>([])
 
+  const [
+    isDevelopment,
+    setIsDevelopment,
+  ] = useState<boolean>(environment === "development")
+
   const [
     enabledOptionalProps,
     setEnabledOptionalProps,
@@ -448,6 +454,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     setSubmitting,
     submitting,
     sdkErrors,
+    isDevelopment,
   };
   return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
 };
diff --git a/packages/connect-react/src/hooks/form-field-context.tsx b/packages/connect-react/src/hooks/form-field-context.tsx
index cffd1a6cecb71..4101e389ab9b2 100644
--- a/packages/connect-react/src/hooks/form-field-context.tsx
+++ b/packages/connect-react/src/hooks/form-field-context.tsx
@@ -17,6 +17,7 @@ export type FormFieldContext<T extends ConfigurableProp> = {
   onChange: (value: PropValue<T["type"]> | undefined) => void;
   extra: FormFieldContextExtra<T>;
   errors: Record<string, string[]>;
+  isDevelopment: boolean;
 };
 
 export const FormFieldContext = createContext<FormFieldContext<any /* XXX fix */> | undefined>(undefined); // eslint-disable-line @typescript-eslint/no-explicit-any

From f6462856ee0732ebc68706be76bf69431ce28d06 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Mon, 3 Feb 2025 15:58:12 -0600
Subject: [PATCH 07/26] Set sdk version to 1.3.1 in example app

---
 packages/connect-react/examples/nextjs/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/connect-react/examples/nextjs/package.json b/packages/connect-react/examples/nextjs/package.json
index c520feccd93dd..a0c0459deb31c 100644
--- a/packages/connect-react/examples/nextjs/package.json
+++ b/packages/connect-react/examples/nextjs/package.json
@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "@pipedream/connect-react": "file:../..",
-    "@pipedream/sdk": "^1.3.2",
+    "@pipedream/sdk": "^1.3.1",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106"

From b5f97514929e154869ac096ebae0e826b39f6e99 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Mon, 3 Feb 2025 15:58:59 -0600
Subject: [PATCH 08/26] Update pnpm

---
 pnpm-lock.yaml | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6c9868944a0be..d293e7bdc3208 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12682,8 +12682,8 @@ importers:
         specifier: file:../..
         version: file:packages/connect-react(@types/react@18.3.12)(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)
       '@pipedream/sdk':
-        specifier: ^1.1.4
-        version: 1.1.5
+        specifier: ^1.3.1
+        version: 1.3.1
       next:
         specifier: 15.0.3
         version: 15.0.3(@babel/core@8.0.0-alpha.13)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)
@@ -15568,8 +15568,8 @@ packages:
     resolution: {integrity: sha512-f8FXEaoBqIOQpI4vVOO8OrHRAjwQYO4pKIwMUcGRkzS5KJ6cZ/7JYYGyXEu7NcS+y1VfyegtbJWu4tWacDjQZg==}
     engines: {node: '>=18.0.0'}
 
-  '@pipedream/sdk@1.1.5':
-    resolution: {integrity: sha512-q+dGMsNSvIcDCi6JZES7pwNBW8Ms318WMNavO71Cye0bCtloeDSj5TiFbScy64/2FHja9keKAZ9ev8yVSsM+ew==}
+  '@pipedream/sdk@1.3.1':
+    resolution: {integrity: sha512-4DJsXxx6bpaeDdQTz9bLt61T2WUBBN/d/aJtjIuaQZEe+B+E0akFVSw1FFOKpu6JfiXe7RH+pnhdqbBs3PM95A==}
     engines: {node: '>=18.0.0'}
 
   '@pipedream/sftp@0.4.1':
@@ -31714,15 +31714,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@pipedream/sdk@1.1.5':
+  '@pipedream/sdk@1.3.1':
     dependencies:
       '@rails/actioncable': 8.0.0
       commander: 12.1.0
-      simple-oauth2: 5.1.0
+      oauth4webapi: 3.1.4
       ws: 8.18.0
     transitivePeerDependencies:
       - bufferutil
-      - supports-color
       - utf-8-validate
 
   '@pipedream/sftp@0.4.1':

From 3d8d64ac2ed165306c7b73484cb9bec7fc0bd485 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Tue, 4 Feb 2025 12:11:56 -0600
Subject: [PATCH 09/26] Bump sdk version in nextjs app

---
 .../examples/nextjs/package-lock.json         | 132 ++----------------
 .../examples/nextjs/package.json              |   2 +-
 pnpm-lock.yaml                                |  10 +-
 3 files changed, 20 insertions(+), 124 deletions(-)

diff --git a/packages/connect-react/examples/nextjs/package-lock.json b/packages/connect-react/examples/nextjs/package-lock.json
index 602bed07c206e..f9ec772454954 100644
--- a/packages/connect-react/examples/nextjs/package-lock.json
+++ b/packages/connect-react/examples/nextjs/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "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"
@@ -53,47 +53,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@hapi/boom": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/@hapi/boom/-/boom-10.0.1.tgz",
-      "integrity": "sha512-ERcCZaEjdH3OgSJlyjVk8pHIFeus91CjKP3v+MpgBNp5IvGzP2l/bRiD78nqYcKPaZdbKkK5vDBVPd2ohHBlsA==",
-      "dependencies": {
-        "@hapi/hoek": "^11.0.2"
-      }
-    },
-    "node_modules/@hapi/bourne": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@hapi/bourne/-/bourne-3.0.0.tgz",
-      "integrity": "sha512-Waj1cwPXJDucOib4a3bAISsKJVb15MKi9IvmTI/7ssVEm6sywXGjVJDhl6/umt1pK1ZS7PacXU3A1PmFKHEZ2w=="
-    },
-    "node_modules/@hapi/hoek": {
-      "version": "11.0.7",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-11.0.7.tgz",
-      "integrity": "sha512-HV5undWkKzcB4RZUusqOpcgxOaq6VOAH7zhhIr2g3G8NF/MlFO75SjOr2NfuSx0Mh40+1FqCkagKLJRykUWoFQ=="
-    },
-    "node_modules/@hapi/topo": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
-      "integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
-      "dependencies": {
-        "@hapi/hoek": "^9.0.0"
-      }
-    },
-    "node_modules/@hapi/topo/node_modules/@hapi/hoek": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
-      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
-    },
-    "node_modules/@hapi/wreck": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/@hapi/wreck/-/wreck-18.1.0.tgz",
-      "integrity": "sha512-0z6ZRCmFEfV/MQqkQomJ7sl/hyxvcZM7LtuVqN3vdAO4vM9eBbowl0kaqQj9EJJQab+3Uuh1GxbGIBFy4NfJ4w==",
-      "dependencies": {
-        "@hapi/boom": "^10.0.1",
-        "@hapi/bourne": "^3.0.0",
-        "@hapi/hoek": "^11.0.2"
-      }
-    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
@@ -566,14 +525,14 @@
       "link": true
     },
     "node_modules/@pipedream/sdk": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@pipedream/sdk/-/sdk-1.1.5.tgz",
-      "integrity": "sha512-q+dGMsNSvIcDCi6JZES7pwNBW8Ms318WMNavO71Cye0bCtloeDSj5TiFbScy64/2FHja9keKAZ9ev8yVSsM+ew==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@pipedream/sdk/-/sdk-1.3.2.tgz",
+      "integrity": "sha512-50/eSDsR5fV2pyScgbAmfMiZ4kGxxvN2Zrg9RZa/Dt11VsQAcRNza1Vy8cGD6rc3luPeXwlGk+Diu0ynAtAKlA==",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
         "@rails/actioncable": "^8.0.0",
         "commander": "^12.1.0",
-        "simple-oauth2": "^5.1.0",
+        "oauth4webapi": "^3.1.4",
         "ws": "^8.18.0"
       },
       "engines": {
@@ -585,29 +544,6 @@
       "resolved": "https://registry.npmjs.org/@rails/actioncable/-/actioncable-8.0.0.tgz",
       "integrity": "sha512-9IXyJeaBggOzlD3pF4/yWELdyUWZm/KTyKBRqxNf9laLBXPqxJt3t6fO+X4s0WajMR8cIhzkxvq1gxsXVbn3LA=="
     },
-    "node_modules/@sideway/address": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
-      "integrity": "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==",
-      "dependencies": {
-        "@hapi/hoek": "^9.0.0"
-      }
-    },
-    "node_modules/@sideway/address/node_modules/@hapi/hoek": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
-      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
-    },
-    "node_modules/@sideway/formula": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
-      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
-    },
-    "node_modules/@sideway/pinpoint": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
-      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
-    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -745,22 +681,6 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "dev": true
     },
-    "node_modules/debug": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
-      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/detect-libc": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@@ -776,28 +696,6 @@
       "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
       "optional": true
     },
-    "node_modules/joi": {
-      "version": "17.13.3",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.3.tgz",
-      "integrity": "sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==",
-      "dependencies": {
-        "@hapi/hoek": "^9.3.0",
-        "@hapi/topo": "^5.1.0",
-        "@sideway/address": "^4.1.5",
-        "@sideway/formula": "^3.0.1",
-        "@sideway/pinpoint": "^2.0.0"
-      }
-    },
-    "node_modules/joi/node_modules/@hapi/hoek": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
-      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
-    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -868,6 +766,15 @@
         }
       }
     },
+    "node_modules/oauth4webapi": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/oauth4webapi/-/oauth4webapi-3.1.4.tgz",
+      "integrity": "sha512-eVfN3nZNbok2s/ROifO0UAc5G8nRoLSbrcKJ09OqmucgnhXEfdIQOR4gq1eJH1rN3gV7rNw62bDEgftsgFtBEg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -975,17 +882,6 @@
         "@img/sharp-win32-x64": "0.33.5"
       }
     },
-    "node_modules/simple-oauth2": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/simple-oauth2/-/simple-oauth2-5.1.0.tgz",
-      "integrity": "sha512-gWDa38Ccm4MwlG5U7AlcJxPv3lvr80dU7ARJWrGdgvOKyzSj1gr3GBPN1rABTedAYvC/LsGYoFuFxwDBPtGEbw==",
-      "dependencies": {
-        "@hapi/hoek": "^11.0.4",
-        "@hapi/wreck": "^18.0.0",
-        "debug": "^4.3.4",
-        "joi": "^17.6.4"
-      }
-    },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
diff --git a/packages/connect-react/examples/nextjs/package.json b/packages/connect-react/examples/nextjs/package.json
index a0c0459deb31c..c520feccd93dd 100644
--- a/packages/connect-react/examples/nextjs/package.json
+++ b/packages/connect-react/examples/nextjs/package.json
@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "@pipedream/connect-react": "file:../..",
-    "@pipedream/sdk": "^1.3.1",
+    "@pipedream/sdk": "^1.3.2",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a326d12c058d..b624007f0fc86 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12714,8 +12714,8 @@ importers:
         specifier: file:../..
         version: file:packages/connect-react(@types/react@18.3.12)(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)
       '@pipedream/sdk':
-        specifier: ^1.3.1
-        version: 1.3.1
+        specifier: ^1.3.2
+        version: 1.3.2
       next:
         specifier: 15.0.3
         version: 15.0.3(@babel/core@8.0.0-alpha.13)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)
@@ -15603,8 +15603,8 @@ packages:
     resolution: {integrity: sha512-f8FXEaoBqIOQpI4vVOO8OrHRAjwQYO4pKIwMUcGRkzS5KJ6cZ/7JYYGyXEu7NcS+y1VfyegtbJWu4tWacDjQZg==}
     engines: {node: '>=18.0.0'}
 
-  '@pipedream/sdk@1.3.1':
-    resolution: {integrity: sha512-4DJsXxx6bpaeDdQTz9bLt61T2WUBBN/d/aJtjIuaQZEe+B+E0akFVSw1FFOKpu6JfiXe7RH+pnhdqbBs3PM95A==}
+  '@pipedream/sdk@1.3.2':
+    resolution: {integrity: sha512-50/eSDsR5fV2pyScgbAmfMiZ4kGxxvN2Zrg9RZa/Dt11VsQAcRNza1Vy8cGD6rc3luPeXwlGk+Diu0ynAtAKlA==}
     engines: {node: '>=18.0.0'}
 
   '@pipedream/sftp@0.4.1':
@@ -31764,7 +31764,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@pipedream/sdk@1.3.1':
+  '@pipedream/sdk@1.3.2':
     dependencies:
       '@rails/actioncable': 8.0.0
       commander: 12.1.0

From 3c89a950a074677409d599c79fc1bed91ebe2b3d Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Tue, 4 Feb 2025 16:29:50 -0600
Subject: [PATCH 10/26] Json stringify sdk errors

---
 packages/sdk/src/shared/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/sdk/src/shared/index.ts b/packages/sdk/src/shared/index.ts
index 7fcf185e742d0..fa75ade0a5a12 100644
--- a/packages/sdk/src/shared/index.ts
+++ b/packages/sdk/src/shared/index.ts
@@ -960,7 +960,10 @@ export abstract class BaseClient {
     if (!response.ok) {
       const errorBody = await response.text();
       throw new Error(
-        `HTTP error! status: ${response.status}, body: ${errorBody}`,
+        JSON.stringify({
+          message: `HTTP error! status: ${response.status}`,
+          data: errorBody,
+        }),
       );
     }
 

From 4b3d60e90ce732bd72b3d792643bc6bf71c5f4cd Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Tue, 4 Feb 2025 17:22:08 -0600
Subject: [PATCH 11/26] Update sdk version

---
 packages/sdk/CHANGELOG.md | 6 ++++++
 packages/sdk/package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/sdk/CHANGELOG.md b/packages/sdk/CHANGELOG.md
index 3bc01d2347fab..3891c1c840f6f 100644
--- a/packages/sdk/CHANGELOG.md
+++ b/packages/sdk/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Changelog
 
+## [1.3.3] - 2025-02-4
+
+### Changed
+
+- Fix SDK error handler so that it throws a JSON string instead of an unparseable string object
+
 ## [1.3.2] - 2025-02-3
 
 ### Changed
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index 13ad64555d8b7..40c7645b2b206 100644
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@pipedream/sdk",
   "type": "module",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Pipedream SDK",
   "main": "./dist/server.js",
   "module": "./dist/server.js",

From 03b0c25dad853a2d7d66d3bafc1ee53e4622d98f Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Tue, 4 Feb 2025 17:23:59 -0600
Subject: [PATCH 12/26] Handle sdk errors

---
 .../connect-react/src/hooks/form-context.tsx  | 109 +++++++++++++++---
 1 file changed, 94 insertions(+), 15 deletions(-)

diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx
index 85a9ffeb4b4d7..2c41c4ecf7860 100644
--- a/packages/connect-react/src/hooks/form-context.tsx
+++ b/packages/connect-react/src/hooks/form-context.tsx
@@ -155,7 +155,20 @@ export const FormContextProvider = <T extends ConfigurableProps>({
       queryKeyInput,
     ],
     queryFn: async () => {
-      const { dynamicProps } = await client.componentReloadProps(componentReloadPropsInput);
+      const result = await client.componentReloadProps(componentReloadPropsInput);
+      const {
+        dynamicProps, observations, errors: __errors,
+      } = result
+      const errorsAndObservations = []
+      if (observations) {
+        errorsAndObservations.push(...observations)
+      }
+      if (__errors) {
+        errorsAndObservations.push(...__errors)
+      }
+      if (errorsAndObservations) {
+        handleSdkErrors(errorsAndObservations)
+      }
       // XXX what about if null?
       // TODO observation errors, etc.
       if (dynamicProps) {
@@ -255,6 +268,10 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const updateConfiguredProps = (configuredProps: ConfiguredProps<T>) => {
     setConfiguredProps(configuredProps);
     updateConfiguredPropsQueryDisabledIdx(configuredProps);
+    updateConfigurationErrors(configuredProps)
+  };
+
+  const updateConfigurationErrors = (configuredProps: ConfiguredProps<T>) => {
     const _errors: typeof errors = {};
     for (let idx = 0; idx < configurableProps.length; idx++) {
       const prop = configurableProps[idx];
@@ -276,6 +293,14 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     _configuredProps,
   ]);
 
+  useEffect(() => {
+    updateConfigurationErrors(configuredProps)
+  }, [
+    configuredProps,
+    reloadPropIdx,
+    queryDisabledIdx,
+  ]);
+
   useEffect(() => {
     handleSdkErrors(__sdkErrors)
   }, [
@@ -414,22 +439,76 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   };
 
   const handleSdkErrors = (o: unknown[] | unknown | undefined) => {
+    const newErrors = [
+      ...sdkErrors,
+    ]
     if (!o) return
-    const os = o
-    if (Array.isArray(os) && os.length > 0) {
-      const newErrors = os.map((it) => {
-        const name: string = it.err?.name
-        const message: string = it.err?.message
-        if (name && message) return {
-          name,
-          message,
-        } as Record<string, string>
-        return undefined
-      }).filter((e) => e !== undefined)
-      setSdkErrors(newErrors)
-    } else if (typeof o === "object") {
-      // TODO: handle rails api errors here
+    const handleObservationErrors = (observation: never) => {
+      const name: string = observation.err?.name
+      const message: string = observation.err?.message
+      if (name && message) return {
+        name,
+        message,
+      } as Record<string, string>
+    }
+
+    if (Array.isArray(o) && o.length > 0) {
+      for (let i = 0; i < o.length; i++) {
+        const item = o[i]
+        if (typeof item === "string") {
+          try {
+            const json = JSON.parse(item)
+            const name = json.name
+            const message = json.message
+            if (name && message) {
+              newErrors.push({
+                name,
+                message,
+              } as Record<string, string>)
+            }
+          } catch (e) {
+            // pass
+          }
+        } else if (typeof item === "object" && "name" in item && "message" in item) {
+          const name = item.name
+          const message = item.message
+          if (name && message) {
+            newErrors.push({
+              name,
+              message,
+            } as Record<string, string>)
+          }
+        } else if (typeof item === "object" && item.k === "error") {
+          const res = handleObservationErrors(item)
+          if (res) newErrors.push(res)
+        }
+      }
+    } else if (typeof o === "object" && "os" in o || "observations" in o) {
+      const os = o.os || o.observations
+      if (Array.isArray(os) && os.length > 0) {
+        newErrors.push(
+          ...os.filter((it) => it.k === "error")
+            .map(handleObservationErrors)
+            .filter((e) => e !== undefined),
+        )
+      }
+    } else if (typeof o === "object" && "message" in o) {
+      // Handle HTTP errors thrown by the SDK
+      try {
+        const json = JSON.parse(o.message)
+        const obs = json.data?.observations || []
+        if (obs && obs.length > 0) {
+          newErrors.push(
+            ...obs?.filter((it) => it.k === "error")
+              .map(handleObservationErrors)
+              .filter((e) => e !== undefined),
+          )
+        }
+      } catch (e) {
+        // pass
+      }
     }
+    setSdkErrors(newErrors)
   }
 
   // console.log("***", configurableProps, configuredProps)

From efbe72706f1869789b69e77011f65ab4a0d3516c Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Tue, 4 Feb 2025 18:21:15 -0600
Subject: [PATCH 13/26] Cleanup

---
 .../examples/nextjs/src/app/page.tsx          |  9 +++---
 .../connect-react/src/hooks/form-context.tsx  | 32 ++++++++++++++-----
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/packages/connect-react/examples/nextjs/src/app/page.tsx b/packages/connect-react/examples/nextjs/src/app/page.tsx
index fe21ffd15c75d..58838fa278c48 100644
--- a/packages/connect-react/examples/nextjs/src/app/page.tsx
+++ b/packages/connect-react/examples/nextjs/src/app/page.tsx
@@ -8,7 +8,8 @@ import {
 import { fetchToken } from "./actions";
 
 export default function Home() {
-  const userId = "demo-32aaf9cd-5df0-4ffe-86b5-db43a61a842c"; //gmail-new-email-received
+  // const userId = "demo-32aaf9cd-5df0-4ffe-86b5-db43a61a842c"; //gmail-new-email-received
+  const userId = "demo-937d4e64-100a-4e32-9dbb-a73c279e91b3"; // goole_sheets add new row
   const client = createFrontendClient({
     environment: "development",
     externalUserId: userId,
@@ -41,7 +42,7 @@ export default function Home() {
       <FrontendClientProvider client={client}>
         <ComponentFormContainer
           userId={userId}
-          componentKey="gmail-new-email-received"
+          componentKey="google_sheets-add-single-row"
           configuredProps={configuredProps}
           onUpdateDynamicProps={handleDynamicProps}
           onUpdateConfiguredProps={setConfiguredProps}
@@ -51,11 +52,11 @@ export default function Home() {
             try {
               const result = await client.runAction({
                 userId,
-                actionId: "gmail-new-email-received",
+                actionId: "google_sheets-add-single-row",
                 configuredProps,
                 dynamicPropsId,
               });
-              setSdkErrors(result?.os)
+              setSdkErrors(result)
             } catch (error) {
               setSdkErrors(error as unknown)
               console.error("Action run failed:", error);
diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx
index 2c41c4ecf7860..4b8c70cb24337 100644
--- a/packages/connect-react/src/hooks/form-context.tsx
+++ b/packages/connect-react/src/hooks/form-context.tsx
@@ -439,7 +439,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   };
 
   const handleSdkErrors = (o: unknown[] | unknown | undefined) => {
-    const newErrors = [
+    let newErrors = [
       ...sdkErrors,
     ]
     if (!o) return
@@ -496,17 +496,33 @@ export const FormContextProvider = <T extends ConfigurableProps>({
       // Handle HTTP errors thrown by the SDK
       try {
         const json = JSON.parse(o.message)
-        const obs = json.data?.observations || []
-        if (obs && obs.length > 0) {
-          newErrors.push(
-            ...obs?.filter((it) => it.k === "error")
-              .map(handleObservationErrors)
-              .filter((e) => e !== undefined),
-          )
+        const data = json.data
+        if (data && "observations" in data) {
+          const obs = data.observations || []
+          if (obs && obs.length > 0) {
+            newErrors.push(
+              ...obs?.filter((it) => it.k === "error")
+                .map(handleObservationErrors)
+                .filter((e) => e !== undefined),
+            )
+          }
+        } else if (data && "error" in data && "details" in data) {
+          newErrors.push({
+            name: data.error,
+            message: JSON.stringify(data.details),
+            //     message: ` // TODO: It would be nice to render the JSON in markdown
+            // \`\`\`json
+            // ${JSON.stringify(data.details)}
+            // \`\`\`
+            // `,
+            //   })
+          })
         }
       } catch (e) {
         // pass
       }
+    } else {
+      newErrors = []
     }
     setSdkErrors(newErrors)
   }

From 412ba84729486686a1ca8433e6a698796682db88 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Tue, 4 Feb 2025 18:22:16 -0600
Subject: [PATCH 14/26] Cleanup page.tsx

---
 packages/connect-react/examples/nextjs/src/app/page.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/connect-react/examples/nextjs/src/app/page.tsx b/packages/connect-react/examples/nextjs/src/app/page.tsx
index 58838fa278c48..53226cb17dc1e 100644
--- a/packages/connect-react/examples/nextjs/src/app/page.tsx
+++ b/packages/connect-react/examples/nextjs/src/app/page.tsx
@@ -8,10 +8,8 @@ import {
 import { fetchToken } from "./actions";
 
 export default function Home() {
-  // const userId = "demo-32aaf9cd-5df0-4ffe-86b5-db43a61a842c"; //gmail-new-email-received
-  const userId = "demo-937d4e64-100a-4e32-9dbb-a73c279e91b3"; // goole_sheets add new row
+  const userId = "my-authed-user-id";
   const client = createFrontendClient({
-    environment: "development",
     externalUserId: userId,
     tokenCallback: fetchToken,
   });
@@ -42,7 +40,7 @@ export default function Home() {
       <FrontendClientProvider client={client}>
         <ComponentFormContainer
           userId={userId}
-          componentKey="google_sheets-add-single-row"
+          componentKey="slack-send-message"
           configuredProps={configuredProps}
           onUpdateDynamicProps={handleDynamicProps}
           onUpdateConfiguredProps={setConfiguredProps}
@@ -52,7 +50,7 @@ export default function Home() {
             try {
               const result = await client.runAction({
                 userId,
-                actionId: "google_sheets-add-single-row",
+                actionId: "slack-send-message",
                 configuredProps,
                 dynamicPropsId,
               });

From 5e3468e075039560caa2d149d35c6329ef7f67af Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Tue, 4 Feb 2025 18:23:49 -0600
Subject: [PATCH 15/26] Commit pnpm-lock.yaml

---
 pnpm-lock.yaml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8e88d4fea5326..3b766f47f2b7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5690,8 +5690,7 @@ importers:
         specifier: ^3.0.3
         version: 3.0.3
 
-  components/klipy:
-    specifiers: {}
+  components/klipy: {}
 
   components/knack:
     dependencies:

From 8a0d67560fb5ab3df7255833f77aa345180f07d1 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Wed, 5 Feb 2025 11:30:04 -0600
Subject: [PATCH 16/26] Undo sdk changes

---
 packages/sdk/CHANGELOG.md        | 6 ------
 packages/sdk/package.json        | 2 +-
 packages/sdk/src/shared/index.ts | 5 +----
 3 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/sdk/CHANGELOG.md b/packages/sdk/CHANGELOG.md
index 3891c1c840f6f..3bc01d2347fab 100644
--- a/packages/sdk/CHANGELOG.md
+++ b/packages/sdk/CHANGELOG.md
@@ -2,12 +2,6 @@
 
 # Changelog
 
-## [1.3.3] - 2025-02-4
-
-### Changed
-
-- Fix SDK error handler so that it throws a JSON string instead of an unparseable string object
-
 ## [1.3.2] - 2025-02-3
 
 ### Changed
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index 40c7645b2b206..13ad64555d8b7 100644
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@pipedream/sdk",
   "type": "module",
-  "version": "1.3.3",
+  "version": "1.3.2",
   "description": "Pipedream SDK",
   "main": "./dist/server.js",
   "module": "./dist/server.js",
diff --git a/packages/sdk/src/shared/index.ts b/packages/sdk/src/shared/index.ts
index fa75ade0a5a12..7fcf185e742d0 100644
--- a/packages/sdk/src/shared/index.ts
+++ b/packages/sdk/src/shared/index.ts
@@ -960,10 +960,7 @@ export abstract class BaseClient {
     if (!response.ok) {
       const errorBody = await response.text();
       throw new Error(
-        JSON.stringify({
-          message: `HTTP error! status: ${response.status}`,
-          data: errorBody,
-        }),
+        `HTTP error! status: ${response.status}, body: ${errorBody}`,
       );
     }
 

From 313cb4962588b970674b5030a91ac6285bfe029f Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Wed, 5 Feb 2025 12:37:13 -0600
Subject: [PATCH 17/26] Use enableDebugging flag instead of environment

---
 .../examples/nextjs/src/app/page.tsx          |  2 +-
 .../src/components/ComponentForm.tsx          |  2 +-
 .../connect-react/src/components/Field.tsx    |  4 +--
 .../src/components/InternalComponentForm.tsx  |  4 +--
 .../src/components/InternalField.tsx          |  4 +--
 .../connect-react/src/hooks/form-context.tsx  | 28 +++++++++----------
 .../src/hooks/form-field-context.tsx          |  2 +-
 7 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/packages/connect-react/examples/nextjs/src/app/page.tsx b/packages/connect-react/examples/nextjs/src/app/page.tsx
index 53226cb17dc1e..c019daad94c98 100644
--- a/packages/connect-react/examples/nextjs/src/app/page.tsx
+++ b/packages/connect-react/examples/nextjs/src/app/page.tsx
@@ -45,7 +45,7 @@ export default function Home() {
           onUpdateDynamicProps={handleDynamicProps}
           onUpdateConfiguredProps={setConfiguredProps}
           sdkErrors={sdkErrors}
-          environment={client.getEnvironment()}
+          enableDebugging={true}
           onSubmit={async () => {
             try {
               const result = await client.runAction({
diff --git a/packages/connect-react/src/components/ComponentForm.tsx b/packages/connect-react/src/components/ComponentForm.tsx
index 65a941c6f87a4..b41f16d89bce8 100644
--- a/packages/connect-react/src/components/ComponentForm.tsx
+++ b/packages/connect-react/src/components/ComponentForm.tsx
@@ -21,7 +21,7 @@ export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<
   onUpdateDynamicProps?: (dp: DynamicProps<T>) => void;
   hideOptionalProps?: boolean;
   sdkErrors?: unknown[] | unknown | undefined;
-  environment?: string;
+  enableDebugging?: string;
 };
 
 export function ComponentForm<T extends ConfigurableProps>(props: ComponentFormProps<T>) {
diff --git a/packages/connect-react/src/components/Field.tsx b/packages/connect-react/src/components/Field.tsx
index 6ffa8161910d1..90265ea7a6ad2 100644
--- a/packages/connect-react/src/components/Field.tsx
+++ b/packages/connect-react/src/components/Field.tsx
@@ -22,7 +22,7 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
     form, field,
   } = props;
   const {
-    prop, isDevelopment,
+    prop, enableDebugging,
   } = field;
   const {
     getProps, getComponents,
@@ -65,7 +65,7 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
       <Label text={labelText} field={field} form={form} />
       <Control field={field} form={form} />
       <Description markdown={prop.description} field={field} form={form} />
-      { isDevelopment && <Errors field={field} form={form} /> }
+      { enableDebugging && <Errors field={field} form={form} /> }
     </div>
   );
 }
diff --git a/packages/connect-react/src/components/InternalComponentForm.tsx b/packages/connect-react/src/components/InternalComponentForm.tsx
index 93ac97b2228ba..d23cff61d5642 100644
--- a/packages/connect-react/src/components/InternalComponentForm.tsx
+++ b/packages/connect-react/src/components/InternalComponentForm.tsx
@@ -27,7 +27,7 @@ export function InternalComponentForm() {
     setSubmitting,
     sdkErrors: __sdkErrors,
     submitting,
-    isDevelopment,
+    enableDebugging,
   } = formContext;
 
   const {
@@ -159,7 +159,7 @@ export function InternalComponentForm() {
               </div>
             </div>
             : null}
-          { isDevelopment && sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
+          { enableDebugging && sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
           {onSubmit && <ControlSubmit form={formContext} />}
         </form>
       </Suspense>
diff --git a/packages/connect-react/src/components/InternalField.tsx b/packages/connect-react/src/components/InternalField.tsx
index 4167df58906ff..24081bf818a73 100644
--- a/packages/connect-react/src/components/InternalField.tsx
+++ b/packages/connect-react/src/components/InternalField.tsx
@@ -15,7 +15,7 @@ export function InternalField<T extends ConfigurableProp>({
 }: FieldInternalProps<T>) {
   const formCtx = useFormContext();
   const {
-    id: formId, configuredProps, registerField, setConfiguredProp, errors, isDevelopment,
+    id: formId, configuredProps, registerField, setConfiguredProp, errors, enableDebugging,
   } = formCtx;
 
   const appSlug = prop.type === "app" && "app" in prop
@@ -45,7 +45,7 @@ export function InternalField<T extends ConfigurableProp>({
       app, // XXX fix ts
     },
     errors,
-    isDevelopment,
+    enableDebugging,
   };
   useEffect(() => registerField(fieldCtx), [
     fieldCtx,
diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx
index 4b8c70cb24337..5780d4fecddbd 100644
--- a/packages/connect-react/src/hooks/form-context.tsx
+++ b/packages/connect-react/src/hooks/form-context.tsx
@@ -38,7 +38,7 @@ export type FormContext<T extends ConfigurableProps> = {
   setSubmitting: (submitting: boolean) => void;
   submitting: boolean;
   userId: string;
-  isDevelopment: boolean;
+  enableDebugging: boolean;
 };
 
 export const skippablePropTypes = [
@@ -75,7 +75,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const id = useId();
 
   const {
-    component, configuredProps: __configuredProps, propNames, userId, sdkErrors: __sdkErrors, environment,
+    component, configuredProps: __configuredProps, propNames, userId, sdkErrors: __sdkErrors, enableDebugging: __enableDebugging,
   } = formProps;
   const componentId = component.key;
 
@@ -102,9 +102,9 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   ] = useState<Record<string, string>[]>([])
 
   const [
-    isDevelopment,
-    setIsDevelopment,
-  ] = useState<boolean>(environment === "development")
+    enableDebugging,
+    setEnableDebugging,
+  ] = useState<boolean>(__enableDebugging === true)
 
   const [
     enabledOptionalProps,
@@ -159,16 +159,14 @@ export const FormContextProvider = <T extends ConfigurableProps>({
       const {
         dynamicProps, observations, errors: __errors,
       } = result
-      const errorsAndObservations = []
-      if (observations) {
-        errorsAndObservations.push(...observations)
-      }
-      if (__errors) {
-        errorsAndObservations.push(...__errors)
-      }
-      if (errorsAndObservations) {
-        handleSdkErrors(errorsAndObservations)
+
+      // Prioritize errors from observations over the errors array
+      if (observations && observations.filter((o) => o.k === "error").length > 0) {
+        handleSdkErrors(observations)
+      } else {
+        handleSdkErrors(__errors)
       }
+
       // XXX what about if null?
       // TODO observation errors, etc.
       if (dynamicProps) {
@@ -549,7 +547,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     setSubmitting,
     submitting,
     sdkErrors,
-    isDevelopment,
+    enableDebugging,
   };
   return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
 };
diff --git a/packages/connect-react/src/hooks/form-field-context.tsx b/packages/connect-react/src/hooks/form-field-context.tsx
index 4101e389ab9b2..4ec30019f4ac8 100644
--- a/packages/connect-react/src/hooks/form-field-context.tsx
+++ b/packages/connect-react/src/hooks/form-field-context.tsx
@@ -17,7 +17,7 @@ export type FormFieldContext<T extends ConfigurableProp> = {
   onChange: (value: PropValue<T["type"]> | undefined) => void;
   extra: FormFieldContextExtra<T>;
   errors: Record<string, string[]>;
-  isDevelopment: boolean;
+  enableDebugging: boolean;
 };
 
 export const FormFieldContext = createContext<FormFieldContext<any /* XXX fix */> | undefined>(undefined); // eslint-disable-line @typescript-eslint/no-explicit-any

From 6ce06f9295c1c4cbb0c7a5b45fdb080b6889d8f9 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Wed, 5 Feb 2025 12:47:11 -0600
Subject: [PATCH 18/26] Update version and README

---
 packages/connect-react/CHANGELOG.md | 4 ++++
 packages/connect-react/README.md    | 5 +++++
 packages/connect-react/package.json | 2 +-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/connect-react/CHANGELOG.md b/packages/connect-react/CHANGELOG.md
index 74bf96e59f6fe..dd7cc6f26bd54 100644
--- a/packages/connect-react/CHANGELOG.md
+++ b/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
diff --git a/packages/connect-react/README.md b/packages/connect-react/README.md
index 8a82c3064bedb..86d708b20f838 100644
--- a/packages/connect-react/README.md
+++ b/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;
 };
 ```
 
diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json
index a9b76237249a2..22638596162b7 100644
--- a/packages/connect-react/package.json
+++ b/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"

From 04e09cf0663051de2581061739e91466a2ebf3c6 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Wed, 5 Feb 2025 12:54:45 -0600
Subject: [PATCH 19/26] Cleanup

---
 .../src/components/InternalComponentForm.tsx        |  4 +++-
 packages/connect-react/src/hooks/form-context.tsx   | 13 ++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/connect-react/src/components/InternalComponentForm.tsx b/packages/connect-react/src/components/InternalComponentForm.tsx
index d23cff61d5642..00626c94b4ef1 100644
--- a/packages/connect-react/src/components/InternalComponentForm.tsx
+++ b/packages/connect-react/src/components/InternalComponentForm.tsx
@@ -13,7 +13,9 @@ import { InternalField } from "./InternalField";
 import { Alert } from "./Alert";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { ControlSubmit } from "./ControlSubmit";
-import type { ConfigurableProp } from "@pipedream/sdk";
+import type {
+  ConfigurableProp, ConfigurablePropAlert,
+} from "@pipedream/sdk";
 
 export function InternalComponentForm() {
   const formContext = useFormContext();
diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx
index 5780d4fecddbd..06987b7971f6f 100644
--- a/packages/connect-react/src/hooks/form-context.tsx
+++ b/packages/connect-react/src/hooks/form-context.tsx
@@ -102,8 +102,8 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   ] = useState<Record<string, string>[]>([])
 
   const [
-    enableDebugging,
-    setEnableDebugging,
+    enableDebugging
+    ,
   ] = useState<boolean>(__enableDebugging === true)
 
   const [
@@ -464,6 +464,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
                 message,
               } as Record<string, string>)
             }
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
           } catch (e) {
             // pass
           }
@@ -498,10 +499,11 @@ export const FormContextProvider = <T extends ConfigurableProps>({
         if (data && "observations" in data) {
           const obs = data.observations || []
           if (obs && obs.length > 0) {
+            const res = obs.filter((it) => it.k === "error")
+              ?.map(handleObservationErrors)
+              ?.filter((e) => e !== undefined) || []
             newErrors.push(
-              ...obs?.filter((it) => it.k === "error")
-                .map(handleObservationErrors)
-                .filter((e) => e !== undefined),
+              ...res,
             )
           }
         } else if (data && "error" in data && "details" in data) {
@@ -516,6 +518,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
             //   })
           })
         }
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
       } catch (e) {
         // pass
       }

From ce4af02c1f61917e9738f0dcec7db0aaa6584c17 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Wed, 5 Feb 2025 13:01:59 -0600
Subject: [PATCH 20/26] Update version

---
 packages/connect-react/examples/nextjs/package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/connect-react/examples/nextjs/package-lock.json b/packages/connect-react/examples/nextjs/package-lock.json
index f9ec772454954..70ee75eb7ff46 100644
--- a/packages/connect-react/examples/nextjs/package-lock.json
+++ b/packages/connect-react/examples/nextjs/package-lock.json
@@ -23,7 +23,7 @@
     },
     "../..": {
       "name": "@pipedream/connect-react",
-      "version": "1.0.0-preview.27",
+      "version": "1.0.0-preview.28",
       "license": "MIT",
       "dependencies": {
         "@pipedream/sdk": "workspace:^",

From e469a8994f1e48a9f5c8cf1b588535f32c53753a Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Wed, 5 Feb 2025 13:08:27 -0600
Subject: [PATCH 21/26] Cleanup

---
 packages/connect-react/src/components/Description.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/connect-react/src/components/Description.tsx b/packages/connect-react/src/components/Description.tsx
index 4b57a4ce50841..abd04cdde795a 100644
--- a/packages/connect-react/src/components/Description.tsx
+++ b/packages/connect-react/src/components/Description.tsx
@@ -16,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;

From 1a718b0e4e58d1003f3bcb8ac5e670c85b489578 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Wed, 5 Feb 2025 13:10:25 -0600
Subject: [PATCH 22/26] Merge pnpm changes

---
 pnpm-lock.yaml | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d66742efa5ea7..9a6c102ba17e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1522,8 +1522,7 @@ importers:
         specifier: ^0.1.4
         version: 0.1.6
 
-  components/buysellads:
-    specifiers: {}
+  components/buysellads: {}
 
   components/bybit:
     dependencies:
@@ -5697,8 +5696,7 @@ importers:
         specifier: ^3.0.3
         version: 3.0.3
 
-  components/klipy:
-    specifiers: {}
+  components/klipy: {}
 
   components/knack:
     dependencies:

From d8140cc432a186cfc66968546791a0d93cc8b54b Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Wed, 5 Feb 2025 18:13:00 -0600
Subject: [PATCH 23/26] Refactor sdk error handler

---
 packages/connect-react/README.md              |   6 +-
 .../examples/nextjs/src/app/page.tsx          |  13 +-
 .../src/components/ComponentForm.tsx          |   4 +-
 .../src/components/InternalComponentForm.tsx  |   2 +-
 .../connect-react/src/hooks/form-context.tsx  | 161 ++++++++++--------
 types/src/index.ts                            |  12 ++
 6 files changed, 111 insertions(+), 87 deletions(-)

diff --git a/packages/connect-react/README.md b/packages/connect-react/README.md
index 86d708b20f838..4dee51914cc70 100644
--- a/packages/connect-react/README.md
+++ b/packages/connect-react/README.md
@@ -149,9 +149,9 @@ 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;
+  /** SDK response payload. Used in conjunction with enableDebugging to 
+   * show errors in the form. */
+  sdkResponse: unknown[] | unknown | undefined;
   /** Whether to show show errors in the form. Requires sdkErrors to be set. */
   enableDebugging?: boolean;
 };
diff --git a/packages/connect-react/examples/nextjs/src/app/page.tsx b/packages/connect-react/examples/nextjs/src/app/page.tsx
index c019daad94c98..2d51d322f4d9b 100644
--- a/packages/connect-react/examples/nextjs/src/app/page.tsx
+++ b/packages/connect-react/examples/nextjs/src/app/page.tsx
@@ -26,9 +26,9 @@ export default function Home() {
   ] = useState<string | undefined>();
 
   const [
-    sdkErrors,
-    setSdkErrors,
-  ] = useState<unknown[] | unknown | undefined>(undefined);
+    sdkResponse,
+    setSdkResponse,
+  ] = useState<unknown | undefined>(undefined);
 
   const handleDynamicProps = (dynamicProps: { id: string | undefined }) => {
     setDynamicPropsId(dynamicProps.id)
@@ -44,19 +44,18 @@ export default function Home() {
           configuredProps={configuredProps}
           onUpdateDynamicProps={handleDynamicProps}
           onUpdateConfiguredProps={setConfiguredProps}
-          sdkErrors={sdkErrors}
+          sdkResponse={sdkResponse}
           enableDebugging={true}
           onSubmit={async () => {
             try {
-              const result = await client.runAction({
+              const response = await client.runAction({
                 userId,
                 actionId: "slack-send-message",
                 configuredProps,
                 dynamicPropsId,
               });
-              setSdkErrors(result)
+              setSdkResponse(response)
             } catch (error) {
-              setSdkErrors(error as unknown)
               console.error("Action run failed:", error);
             }
           }}
diff --git a/packages/connect-react/src/components/ComponentForm.tsx b/packages/connect-react/src/components/ComponentForm.tsx
index b41f16d89bce8..47c19f9cac8f2 100644
--- a/packages/connect-react/src/components/ComponentForm.tsx
+++ b/packages/connect-react/src/components/ComponentForm.tsx
@@ -20,8 +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;
+  sdkResponse?: unknown | undefined;
+  enableDebugging?: boolean;
 };
 
 export function ComponentForm<T extends ConfigurableProps>(props: ComponentFormProps<T>) {
diff --git a/packages/connect-react/src/components/InternalComponentForm.tsx b/packages/connect-react/src/components/InternalComponentForm.tsx
index 00626c94b4ef1..a15b27af53cb9 100644
--- a/packages/connect-react/src/components/InternalComponentForm.tsx
+++ b/packages/connect-react/src/components/InternalComponentForm.tsx
@@ -50,7 +50,7 @@ export function InternalComponentForm() {
             type: "alert",
             alertType: "error",
             content: `# ${e.name}\n${e.message}`,
-          }
+          } as ConfigurablePropAlert
         }))
       }
     }
diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx
index 06987b7971f6f..e980f0b65ea93 100644
--- a/packages/connect-react/src/hooks/form-context.tsx
+++ b/packages/connect-react/src/hooks/form-context.tsx
@@ -14,6 +14,9 @@ import {
   stringPropErrors,
 } from "../utils/component";
 import _ from "lodash";
+import type {
+  SdkError, Observation,
+} from "@pipedream/types"
 
 export type DynamicProps<T extends ConfigurableProps> = { id: string; configurableProps: T; }; // TODO
 
@@ -24,7 +27,7 @@ export type FormContext<T extends ConfigurableProps> = {
   dynamicProps?: DynamicProps<T>; // lots of calls require dynamicProps?.id, so need to expose
   dynamicPropsQueryIsFetching?: boolean;
   errors: Record<string, string[]>;
-  sdkErrors: Record<string, string>[];
+  sdkErrors: SdkError[];
   fields: Record<string, FormFieldContext<ConfigurableProp>>;
   id: string;
   isValid: boolean;
@@ -75,7 +78,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const id = useId();
 
   const {
-    component, configuredProps: __configuredProps, propNames, userId, sdkErrors: __sdkErrors, enableDebugging: __enableDebugging,
+    component, configuredProps: __configuredProps, propNames, userId, sdkResponse, enableDebugging: __enableDebugging,
   } = formProps;
   const componentId = component.key;
 
@@ -99,7 +102,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const [
     sdkErrors,
     setSdkErrors,
-  ] = useState<Record<string, string>[]>([])
+  ] = useState<SdkError[]>([])
 
   const [
     enableDebugging
@@ -300,9 +303,9 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   ]);
 
   useEffect(() => {
-    handleSdkErrors(__sdkErrors)
+    handleSdkErrors(sdkResponse)
   }, [
-    __sdkErrors,
+    sdkResponse,
   ]);
 
   useEffect(() => {
@@ -436,92 +439,102 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     checkPropsNeedConfiguring()
   };
 
-  const handleSdkErrors = (o: unknown[] | unknown | undefined) => {
+  const handleSdkErrors = (sdkResponse: unknown[] | unknown | undefined) => {
+    if (!sdkResponse) return
+
     let newErrors = [
       ...sdkErrors,
     ]
-    if (!o) return
-    const handleObservationErrors = (observation: never) => {
-      const name: string = observation.err?.name
-      const message: string = observation.err?.message
-      if (name && message) return {
-        name,
-        message,
-      } as Record<string, string>
-    }
 
-    if (Array.isArray(o) && o.length > 0) {
-      for (let i = 0; i < o.length; i++) {
-        const item = o[i]
-        if (typeof item === "string") {
-          try {
-            const json = JSON.parse(item)
-            const name = json.name
-            const message = json.message
-            if (name && message) {
-              newErrors.push({
-                name,
-                message,
-              } as Record<string, string>)
-            }
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          } catch (e) {
-            // pass
-          }
-        } else if (typeof item === "object" && "name" in item && "message" in item) {
-          const name = item.name
-          const message = item.message
-          if (name && message) {
-            newErrors.push({
-              name,
-              message,
-            } as Record<string, string>)
-          }
-        } else if (typeof item === "object" && item.k === "error") {
-          const res = handleObservationErrors(item)
-          if (res) newErrors.push(res)
+    const errorFromString = (item: string, ret: SdkError[]) => {
+      try {
+        const json = JSON.parse(item)
+        const err: SdkError = {
+          name: json.name,
+          message: json.message,
         }
+        if (err.name && err.message) {
+          ret.push(err)
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      } catch (e) {
+        // pass
+      }
+    }
+
+    const errorFromObject = (item: unknown, ret: SdkError[]) => {
+      const err: SdkError = {
+        name: item.name,
+        message: item.message,
+      }
+      if (err.name && err.message) {
+        ret.push(err)
       }
-    } else if (typeof o === "object" && "os" in o || "observations" in o) {
-      const os = o.os || o.observations
+    }
+
+    const errorFromObservationError = (item: Error, ret: SdkError[]) => {
+      const err: SdkError = {
+        name: item.err?.name,
+        message: item.err?.message,
+      }
+      if (err.name && err.message) {
+        ret.push(err)
+      }
+    }
+
+    const errorFromObservation = (payload: Observation, ret: SdkError[]) => {
+      const os = payload.os || payload.observations
       if (Array.isArray(os) && os.length > 0) {
-        newErrors.push(
-          ...os.filter((it) => it.k === "error")
-            .map(handleObservationErrors)
-            .filter((e) => e !== undefined),
-        )
+        for (let i = 0; i < os.length; i++) {
+          if (os[i].k !== "error") continue
+          errorFromObservationError(os[i], ret)
+        }
       }
-    } else if (typeof o === "object" && "message" in o) {
+    }
+
+    const errorFromDetails = (data: unknown, ret: SdkError[]) => {
+      ret.push({
+        name: data.error,
+        message: JSON.stringify(data.details),
+        //     message: ` // TODO: It would be nice to render the JSON in markdown
+        // \`\`\`json
+        // ${JSON.stringify(data.details)}
+        // \`\`\`
+        // `,
+        //   })
+      })
+    }
+
+    const errorFromHttpError = (payload: Error, ret: SdkError[]) => {
       // Handle HTTP errors thrown by the SDK
       try {
-        const json = JSON.parse(o.message)
-        const data = json.data
+        const data = JSON.parse(payload.message)?.data
         if (data && "observations" in data) {
-          const obs = data.observations || []
-          if (obs && obs.length > 0) {
-            const res = obs.filter((it) => it.k === "error")
-              ?.map(handleObservationErrors)
-              ?.filter((e) => e !== undefined) || []
-            newErrors.push(
-              ...res,
-            )
-          }
+          errorFromObservation(data, ret)
         } else if (data && "error" in data && "details" in data) {
-          newErrors.push({
-            name: data.error,
-            message: JSON.stringify(data.details),
-            //     message: ` // TODO: It would be nice to render the JSON in markdown
-            // \`\`\`json
-            // ${JSON.stringify(data.details)}
-            // \`\`\`
-            // `,
-            //   })
-          })
+          errorFromDetails(data, ret)
         }
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
       } catch (e) {
         // pass
       }
+    }
+
+    if (Array.isArray(sdkResponse) && sdkResponse.length > 0) {
+      for (let i = 0; i < sdkResponse.length; i++) {
+        const item = sdkResponse[i]
+        if (typeof item === "string") {
+          errorFromString(item, newErrors)
+        } else if (typeof item === "object" && "name" in item && "message" in item) {
+          errorFromObject(item, newErrors)
+        } else if (typeof item === "object" && item.k === "error") {
+          errorFromObservationError(item, newErrors)
+        }
+      }
+    } else if (typeof sdkResponse === "object" && "os" in sdkResponse || "observations" in sdkResponse) {
+      errorFromObservation(sdkResponse, newErrors)
+    } else if (typeof sdkResponse === "object" && "message" in sdkResponse) {
+      errorFromHttpError(sdkResponse, newErrors)
     } else {
       newErrors = []
     }
diff --git a/types/src/index.ts b/types/src/index.ts
index efcf1b25083d7..57de252edb1e5 100644
--- a/types/src/index.ts
+++ b/types/src/index.ts
@@ -397,3 +397,15 @@ export function defineAction<
 (component: Action<Methods, ActionPropDefinitions>): Action<Methods, ActionPropDefinitions> {
   return component;
 }
+
+export type SdkError = {
+  name: string;
+  message: string;
+}
+
+export type Observation = {
+  ts: number;
+  k: string;
+  h?: string;
+  err?: Error;
+}

From e79b262faf1550a6c618eeefe361e606feb2ce27 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Thu, 6 Feb 2025 12:39:13 -0600
Subject: [PATCH 24/26] Add types file

---
 packages/connect-react/src/components/Errors.tsx     |  6 +-----
 packages/connect-react/src/hooks/form-context.tsx    |  6 +++---
 .../connect-react/src/hooks/form-field-context.tsx   |  2 +-
 packages/connect-react/src/types.ts                  | 11 +++++++++++
 types/src/index.ts                                   | 12 ------------
 5 files changed, 16 insertions(+), 21 deletions(-)
 create mode 100644 packages/connect-react/src/types.ts

diff --git a/packages/connect-react/src/components/Errors.tsx b/packages/connect-react/src/components/Errors.tsx
index 071c02e62264d..168ced8e96ea1 100644
--- a/packages/connect-react/src/components/Errors.tsx
+++ b/packages/connect-react/src/components/Errors.tsx
@@ -13,13 +13,9 @@ export type ErrorsProps<T extends ConfigurableProps, U extends ConfigurableProp>
 export function Errors<T extends ConfigurableProps, U extends ConfigurableProp>(props: ErrorsProps<T, U>) {
   const { field } = props;
   const {
-    errors, prop,
+    errors = {}, prop = {},
   } = field
 
-  if (!Object.keys(errors || {}).length) {
-    return null;
-  }
-
   if (!errors[prop.name]) {
     return null
   }
diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx
index e980f0b65ea93..0c9ed391c6927 100644
--- a/packages/connect-react/src/hooks/form-context.tsx
+++ b/packages/connect-react/src/hooks/form-context.tsx
@@ -14,9 +14,9 @@ import {
   stringPropErrors,
 } from "../utils/component";
 import _ from "lodash";
-import type {
-  SdkError, Observation,
-} from "@pipedream/types"
+import {
+  Observation, SdkError,
+} from "../types";
 
 export type DynamicProps<T extends ConfigurableProps> = { id: string; configurableProps: T; }; // TODO
 
diff --git a/packages/connect-react/src/hooks/form-field-context.tsx b/packages/connect-react/src/hooks/form-field-context.tsx
index 4ec30019f4ac8..9fd3abefb491c 100644
--- a/packages/connect-react/src/hooks/form-field-context.tsx
+++ b/packages/connect-react/src/hooks/form-field-context.tsx
@@ -17,7 +17,7 @@ export type FormFieldContext<T extends ConfigurableProp> = {
   onChange: (value: PropValue<T["type"]> | undefined) => void;
   extra: FormFieldContextExtra<T>;
   errors: Record<string, string[]>;
-  enableDebugging: boolean;
+  enableDebugging?: boolean;
 };
 
 export const FormFieldContext = createContext<FormFieldContext<any /* XXX fix */> | undefined>(undefined); // eslint-disable-line @typescript-eslint/no-explicit-any
diff --git a/packages/connect-react/src/types.ts b/packages/connect-react/src/types.ts
new file mode 100644
index 0000000000000..cae72eb2cc1c0
--- /dev/null
+++ b/packages/connect-react/src/types.ts
@@ -0,0 +1,11 @@
+export type SdkError = {
+    name: string;
+    message: string;
+}
+
+export type Observation = {
+    ts: number;
+    k: string;
+    h?: string;
+    err?: Error;
+}
diff --git a/types/src/index.ts b/types/src/index.ts
index 57de252edb1e5..efcf1b25083d7 100644
--- a/types/src/index.ts
+++ b/types/src/index.ts
@@ -397,15 +397,3 @@ export function defineAction<
 (component: Action<Methods, ActionPropDefinitions>): Action<Methods, ActionPropDefinitions> {
   return component;
 }
-
-export type SdkError = {
-  name: string;
-  message: string;
-}
-
-export type Observation = {
-  ts: number;
-  k: string;
-  h?: string;
-  err?: Error;
-}

From 745ca5a2cb312ee80b557f95056b682494e38075 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Thu, 6 Feb 2025 12:48:11 -0600
Subject: [PATCH 25/26] Refactor Errors.tsx

---
 packages/connect-react/src/components/Errors.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/connect-react/src/components/Errors.tsx b/packages/connect-react/src/components/Errors.tsx
index 168ced8e96ea1..8d21fb0f4fddb 100644
--- a/packages/connect-react/src/components/Errors.tsx
+++ b/packages/connect-react/src/components/Errors.tsx
@@ -36,7 +36,11 @@ export function Errors<T extends ConfigurableProps, U extends ConfigurableProp>(
     gridTemplateColumns: "max-content",
   }
 
+  const FormattedErrors = () => {
+    return <>{formattedErrors.map((fe, idx: number) => <Alert prop={fe} key={idx}/>)}</>
+  }
+
   return (
-    <div className="pd-errors" style={baseStyles}>{formattedErrors.map((fe, idx: number) => <Alert prop={fe} key={idx}/>)}</div>
+    <div className="pd-errors" style={baseStyles}><FormattedErrors/></div>
   );
 }

From 83daf26ee062f554c55ab2d9f104abe7c5f67b44 Mon Sep 17 00:00:00 2001
From: Biz Melesse <bizmelesse@gmail.com>
Date: Thu, 6 Feb 2025 16:02:49 -0600
Subject: [PATCH 26/26] Always show ConfigurationError

---
 packages/connect-react/src/components/Errors.tsx          | 6 +++++-
 packages/connect-react/src/components/Field.tsx           | 6 ++----
 .../src/components/InternalComponentForm.tsx              | 8 +++++++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/connect-react/src/components/Errors.tsx b/packages/connect-react/src/components/Errors.tsx
index 8d21fb0f4fddb..0ebf460ffa3af 100644
--- a/packages/connect-react/src/components/Errors.tsx
+++ b/packages/connect-react/src/components/Errors.tsx
@@ -13,9 +13,13 @@ export type ErrorsProps<T extends ConfigurableProps, U extends ConfigurableProp>
 export function Errors<T extends ConfigurableProps, U extends ConfigurableProp>(props: ErrorsProps<T, U>) {
   const { field } = props;
   const {
-    errors = {}, prop = {},
+    errors = {}, prop = {}, enableDebugging,
   } = field
 
+  if (!enableDebugging) {
+    return null
+  }
+
   if (!errors[prop.name]) {
     return null
   }
diff --git a/packages/connect-react/src/components/Field.tsx b/packages/connect-react/src/components/Field.tsx
index 90265ea7a6ad2..284055797c86f 100644
--- a/packages/connect-react/src/components/Field.tsx
+++ b/packages/connect-react/src/components/Field.tsx
@@ -21,9 +21,7 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
   const {
     form, field,
   } = props;
-  const {
-    prop, enableDebugging,
-  } = field;
+  const { prop } = field;
   const {
     getProps, getComponents,
   } = useCustomize();
@@ -65,7 +63,7 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
       <Label text={labelText} field={field} form={form} />
       <Control field={field} form={form} />
       <Description markdown={prop.description} field={field} form={form} />
-      { enableDebugging && <Errors field={field} form={form} /> }
+      <Errors field={field} form={form} />
     </div>
   );
 }
diff --git a/packages/connect-react/src/components/InternalComponentForm.tsx b/packages/connect-react/src/components/InternalComponentForm.tsx
index a15b27af53cb9..2257c5f8087b3 100644
--- a/packages/connect-react/src/components/InternalComponentForm.tsx
+++ b/packages/connect-react/src/components/InternalComponentForm.tsx
@@ -17,6 +17,10 @@ import type {
   ConfigurableProp, ConfigurablePropAlert,
 } from "@pipedream/sdk";
 
+const alwaysShowSdkErrors = [
+  "ConfigurationError",
+]
+
 export function InternalComponentForm() {
   const formContext = useFormContext();
   const {
@@ -32,6 +36,8 @@ export function InternalComponentForm() {
     enableDebugging,
   } = formContext;
 
+  const showSdkErrors = enableDebugging || __sdkErrors.filter((e) => alwaysShowSdkErrors.includes(e.name)).length > 0
+
   const {
     hideOptionalProps, onSubmit,
   } = formContextProps;
@@ -161,7 +167,7 @@ export function InternalComponentForm() {
               </div>
             </div>
             : null}
-          { enableDebugging && sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
+          { showSdkErrors && sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
           {onSubmit && <ControlSubmit form={formContext} />}
         </form>
       </Suspense>