fix[angular-gen2]: Better error handling on form submissions #4031

anaghav2023 · 2025-04-16T09:00:56Z

Description
Form submissions are causing a lot of errors if the the API fails.
https://www.loom.com/share/6da637e8902b4a76855c45b2a3cb9e5f?sid=220b852b-6fe9-4a8e-a68c-d12672750bf3

Jira:
https://builder-io.atlassian.net/browse/ENG-8731

Loom showing the fix
https://www.loom.com/share/296e9205f60a44a9815b44cae5c08dbe

changeset-bot · 2025-04-16T09:01:00Z

🦋 Changeset detected

Latest commit: 92a354e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages

Name	Type
@builder.io/sdk	Patch
@builder.io/react	Patch
@builder.io/sdk-angular	Patch
@builder.io/sdk-react-nextjs	Patch
@builder.io/sdk-qwik	Patch
@builder.io/sdk-react	Patch
@builder.io/sdk-react-native	Patch
@builder.io/sdk-solid	Patch
@builder.io/sdk-svelte	Patch
@builder.io/sdk-vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

nx-cloud · 2025-04-16T09:04:08Z

View your CI Pipeline Execution ↗ for commit 7e08c64.

Command	Status	Duration	Result
`nx test @e2e/nuxt`	✅ Succeeded	9m 54s	View ↗
`nx test @e2e/nextjs-sdk-next-app`	✅ Succeeded	9m 41s	View ↗
`nx test @e2e/qwik-city`	✅ Succeeded	9m 1s	View ↗
`nx test @e2e/sveltekit`	✅ Succeeded	6m 41s	View ↗
`nx test @e2e/vue`	✅ Succeeded	5m 25s	View ↗
`nx test @e2e/remix`	✅ Succeeded	6m 22s	View ↗
`nx test @e2e/svelte`	✅ Succeeded	5m 42s	View ↗
`nx test @e2e/solid`	✅ Succeeded	6m 20s	View ↗
`Additional runs (36)`	✅ Succeeded	...	View ↗

☁️ Nx Cloud last updated this comment at 2025-04-22 08:43:28 UTC

builder-adi · 2025-04-16T09:07:56Z

packages/sdks/src/blocks/form/form/form.lite.tsx

+        if (
+          props.sendSubmissionsTo === 'email' &&
+          (props.sendSubmissionsToEmail === 'your@email.com' ||
+            props.sendSubmissionsToEmail === '')


what if sendSubmissionsToEmail is null or undefined

Handled it now

builder-adi · 2025-04-16T09:15:32Z

packages/sdks/src/blocks/form/form/form.lite.tsx

+              state.responseData = body;
+              state.formState = 'error';
+
+              let message = props.errorMessagePath


Can we create a small function to get the message?

This code is not repeated anywhere, why do we need a function.

clyde-builderio · 2025-04-16T09:29:48Z

@anaghav2023 Would it be possible to write a test for this?

sanyamkamat · 2025-04-16T10:17:21Z

packages/sdks/src/blocks/form/form/form.lite.tsx

+        if (
+          props.sendSubmissionsTo === 'email' &&
+          (props.sendSubmissionsToEmail === 'your@email.com' ||
+            props.sendSubmissionsToEmail === '')


Suggested change

props.sendSubmissionsToEmail === '')

!props.sendSubmissionsToEmail)

pushed changes

yash-builder · 2025-04-16T12:39:45Z

packages/sdks/src/blocks/form/form/form.lite.tsx

+        if (
+          props.sendSubmissionsTo === 'email' &&
+          (props.sendSubmissionsToEmail === 'your@email.com' ||
+            props.sendSubmissionsToEmail === '')


Asking out of curiosity
Are we also responsible to validate if emails are temp emails or an actual email?

No, we are not doing that here. The API will send error response

yash-builder · 2025-04-16T12:51:50Z

packages/sdks/src/blocks/form/form/form.lite.tsx

@@ -187,6 +187,21 @@ export default function FormComponent(props: FormProps) {

        state.formState = 'sending';

+        if (
+          props.sendSubmissionsTo === 'email' &&
+          (props.sendSubmissionsToEmail === 'your@email.com' ||


Suggested change

(props.sendSubmissionsToEmail === 'your@email.com' ||

const isInvalidEmailConfig = () =>

props.sendSubmissionsTo === 'email' &&

(!props.sendSubmissionsToEmail || props.sendSubmissionsToEmail === 'your@email.com');

we can create a function which can validate input emails

@yash-builder This is actually not the email which comes from the form input. This is the email that users set when creating the form. Since this code is not repeating, I'll let it be

anaghav2023 · 2025-04-17T08:31:47Z

@anaghav2023 Would it be possible to write a test for this?

@clyde-builderio I added a test to check the console errors

clyde-builderio · 2025-04-21T04:44:36Z

packages/sdks-tests/src/e2e-tests/form.spec.ts

+    test.skip(
+      excludeTestFor({ reactNative: true, rsc: true }, sdk),
+      'Form not implemented in React Native and NextJS SDKs.'
+    );


instead of the current test.skip() try

test.skip(sdk !== 'angular'));

is your change only for angular?

@clyde-builderio this change is to address issue in angular SDK. But I think the form.lite.tsx is common for all sdks and I want it to work everywhere.

Then instead of test.skip(sdk !== 'angular');
we can do

test.skip(excludeGen1(sdk));

this will make sure the Gen 1 React SDK tests get skipped
I'll check if there is way to make sure the other Gen 2 tests do not fail

If I run yarn g:nx serve @e2e/solid and then hit http://localhost:4173/form in the browser i dont get any console.log() but I get a builder-text below the button

Same outcome happens if i run yarn g:nx serve @e2e/solid-start and hit http://localhost:3000/form

For the qwik-city failure....looks like a flaky test. Maybe re-running the GitHub check should resolve it

@clyde-builderio Thanks. Thats right for solid sdks somehow the error doesn't get printed on console but shows up on screen. I have updated the test to handle that separately for the solid SDK

clyde-builderio · 2025-04-22T05:32:38Z

@anaghav2023 Tried using Cursors AI to figure why it's not working

The below test is passing...don't see a major difference except the Promise.all()

test.only('form submission', async ({ page, sdk }) => {
    test.skip(
      excludeTestFor({ reactNative: true, rsc: true }, sdk),
      'Form not implemented in React Native and NextJS SDKs.'
    );

    test.skip(excludeGen1(sdk));

    // Create console listener before clicking submit
    const consoleMessages: string[] = [];
    page.on('console', async msg => {
      // Get all args and convert them to strings
      const args = await Promise.all(msg.args().map(arg => arg.jsonValue()));
      const messageText = args.join(' ');
      consoleMessages.push(messageText);
    });

    await page.goto('/form');

    const form = page.locator('form');
    await expect(form).toHaveCount(1);

    const inputs = await form.locator('input').all();
    await inputs[0].fill('Test Name');
    await inputs[1].fill('test@example.com');
    await page.locator('select').selectOption('20-30');
    await page.locator('textarea').fill('Test message');

    // Submit the form
    await form.locator('button').click();

    // Wait for any console messages to be processed
    await page.waitForTimeout(100);

    // Verify error message was logged
    if (sdk === 'solid') {
      await expect(page.locator('.builder-text').nth(3)).toHaveText(
        'SubmissionsToEmail is required when sendSubmissionsTo is set to email'
      );
    } else {
      expect(
        consoleMessages.some(msg =>
          msg.includes('SubmissionsToEmail is required when sendSubmissionsTo is set to email')
        )
      ).toBeTruthy();
    }
  });

clyde-builderio · 2025-04-22T08:26:26Z

.changeset/orange-items-notice.md

+"@builder.io/sdk": patch
+"@builder.io/react": patch


These are Gen 1 SDKs. They can be removed from this file

Removed them

@sidmohanty11 just wanted to confirm with you if a patch update is okay for this change

yup should be good!

.changeset/orange-items-notice.md

Co-authored-by: Yash Wadhia <188822535+yash-builder@users.noreply.github.com>

clyde-builderio

LGTM

better error handling

8cbb4ea

anaghav2023 requested review from a team and yash-builder and removed request for a team April 16, 2025 09:01

builder-adi reviewed Apr 16, 2025

View reviewed changes

sanyamkamat reviewed Apr 16, 2025

View reviewed changes

yash-builder reviewed Apr 16, 2025

View reviewed changes

test case

d0ea341

anaghav2023 closed this Apr 17, 2025

anaghav2023 reopened this Apr 17, 2025

clyde-builderio reviewed Apr 21, 2025

View reviewed changes

updating test for solid

07dc220

anaghav2023 added 3 commits April 22, 2025 11:40

test case update

01cb064

remove only

8620a68

changeset

92a354e

clyde-builderio reviewed Apr 22, 2025

View reviewed changes

yash-builder reviewed Apr 22, 2025

View reviewed changes

.changeset/orange-items-notice.md Outdated Show resolved Hide resolved

anaghav2023 and others added 2 commits April 22, 2025 13:59

removed gen1

cf36873

Update .changeset/orange-items-notice.md

7e08c64

Co-authored-by: Yash Wadhia <188822535+yash-builder@users.noreply.github.com>

clyde-builderio approved these changes Apr 22, 2025

View reviewed changes

anaghav2023 merged commit a1e0f69 into BuilderIO:main Apr 22, 2025
46 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix[angular-gen2]: Better error handling on form submissions #4031

fix[angular-gen2]: Better error handling on form submissions #4031

anaghav2023 commented Apr 16, 2025 •

edited

Loading

changeset-bot bot commented Apr 16, 2025 •

edited

Loading

nx-cloud bot commented Apr 16, 2025 •

edited

Loading

builder-adi Apr 16, 2025

anaghav2023 Apr 17, 2025

builder-adi Apr 16, 2025

anaghav2023 Apr 17, 2025

clyde-builderio commented Apr 16, 2025

sanyamkamat Apr 16, 2025

anaghav2023 Apr 17, 2025

yash-builder Apr 16, 2025

anaghav2023 Apr 17, 2025

yash-builder Apr 16, 2025

anaghav2023 Apr 17, 2025

anaghav2023 commented Apr 17, 2025 •

edited

Loading

clyde-builderio Apr 21, 2025 •

edited

Loading

clyde-builderio Apr 21, 2025

anaghav2023 Apr 21, 2025

clyde-builderio Apr 21, 2025 •

edited

Loading

clyde-builderio Apr 21, 2025

clyde-builderio Apr 21, 2025

clyde-builderio Apr 21, 2025

anaghav2023 Apr 22, 2025

clyde-builderio commented Apr 22, 2025

clyde-builderio Apr 22, 2025

anaghav2023 Apr 22, 2025

anaghav2023 Apr 22, 2025

sidmohanty11 Apr 22, 2025

clyde-builderio left a comment

	props.sendSubmissionsToEmail === '')
	!props.sendSubmissionsToEmail)

		"@builder.io/sdk": patch
		"@builder.io/react": patch

fix[angular-gen2]: Better error handling on form submissions #4031

fix[angular-gen2]: Better error handling on form submissions #4031

Conversation

anaghav2023 commented Apr 16, 2025 • edited Loading

changeset-bot bot commented Apr 16, 2025 • edited Loading

🦋 Changeset detected

nx-cloud bot commented Apr 16, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clyde-builderio commented Apr 16, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anaghav2023 commented Apr 17, 2025 • edited Loading

clyde-builderio Apr 21, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clyde-builderio Apr 21, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clyde-builderio commented Apr 22, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clyde-builderio left a comment

Choose a reason for hiding this comment

anaghav2023 commented Apr 16, 2025 •

edited

Loading

changeset-bot bot commented Apr 16, 2025 •

edited

Loading

nx-cloud bot commented Apr 16, 2025 •

edited

Loading

anaghav2023 commented Apr 17, 2025 •

edited

Loading

clyde-builderio Apr 21, 2025 •

edited

Loading

clyde-builderio Apr 21, 2025 •

edited

Loading