feat(editor): Implement loading and error states for dynamically loaded components in node parameter list #8477

MiloradFilipovic · 2024-01-29T14:01:52Z

Summary

Adds #fallback slot and error state for dynamically loaded components rendered using Suspense in node parameter list. This improves UX but should also should help us catch errors with these components more easily in the future.

NOTE: Decided to go without tests with this one since I couldn't figure out how to mock failed async component loading in Cypress. We should definitely add tests once we figure out and fix the root problem of this.

To test loading state

Create a workflow that contains Merge node
Reload page
Set network throttling to 2G
Open Merge node's NDV

To test error state:

Throw an error in FixedCollectionParameter component's created hook (here)
Create a new workflow with a Merge node
Open Merge node NDV

Related tickets and issues

Cosses ADO-1756

Review / Merge checklist

PR title and summary are descriptive. Remember, the title automatically goes into the changelog. Use (no-changelog) otherwise. (conventions)
Docs updated or follow-up ticket created.
Tests included.

A bug is not considered fixed, unless a test is added to prevent it from happening again.
A feature is not complete without tests.

…ed components in node parameter list

OlegIvaniv

Seems to works as expected 🎉 Added just two minor comments, also there's some linting issues we should fix

OlegIvaniv · 2024-01-29T15:25:00Z

packages/editor-ui/src/components/ParameterInputList.vue

+
+		// This will catch errors in async components
+		onErrorCaptured((e) => {
+      console.error(e);


Do we need this? It seems to me like it's duplicate-logging the error.

OlegIvaniv · 2024-01-29T15:25:26Z

packages/editor-ui/src/components/ParameterInputList.vue

+      console.error(e);
+			asyncLoadingError.value = true;
+			// Don't propagate the error further
+      return true;


To stop the propagation the return should be false as per Vue docs:

The hook can return false to stop the error from propagating further. See error propagation details below.

Ah, true. Thanks for catching this, it should also prevent double logging

…error-states * master: fix(editor): Send template id as a number in telemetry events (#8484) refactor(core): Replace promisify-d node calls with native promises (no-changelog) (#8464) fix(core): Fix stopping and retrying failed executions (#8480) feat: Add model parameter to OpenAI embeddings (#8481) fix(editor): Disable expression editor modal opening on readonly field (#8457) fix(core): Prevent calling internal hook email event if emailing is disabled (#8462)

…ction in error captured hook

OlegIvaniv

Thanks for addressing my points, LGTM 🎉

cypress · 2024-01-30T12:33:53Z

2 flaky tests on run #3962 ↗︎

0	339	5	0	2

Details:

🌳 🖥️ browsers:node18.12.0-chrome107 🤖 elsmr 🗃️ e2e/*
Project: n8n	Commit: `a4a06df146`
Status: Passed	Duration: 03:32 💡
Started: Jan 30, 2024 4:24 PM	Ended: Jan 30, 2024 4:27 PM

5-ndv.cy.ts • 1 flaky test

View Output Video

Test		Artifacts
NDV > should not retrieve remote options when required params throw errors		`Test Replay` `Screenshots` `Video`

2-credentials.cy.ts • 1 flaky test

View Output Video

Test		Artifacts
Credentials > should show multiple credential types in the same dropdown		`Test Replay` `Screenshots` `Video`

Review all test suite changes for PR #8477 ↗︎

github-actions · 2024-01-30T12:33:57Z

✅ All Cypress E2E specs passed

janober · 2024-02-02T13:24:24Z

Got released with n8n@1.27.2

* refactor(core): Replace promisify-d node calls with native promises (no-changelog) (n8n-io#8464) * fix(editor): Send template id as a number in telemetry events (n8n-io#8484) * refactor(editor): Prevent router.replace from computed property (no-changelog) (n8n-io#8489) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * feat(core): Remove `own` execution-process mode (n8n-io#8490) * feat(editor): Implement loading and error states for dynamically loaded components in node parameter list (n8n-io#8477) * fix(AwsS3 Node): Fix handling of bucket with dot in name (n8n-io#8475) * refactor(core): Modernize credentials controllers and services (no-changelog) (n8n-io#8488) Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in> * fix(core): Don't report executions that have been paused as failed to rudderstack and log streams (n8n-io#8501) * fix: Properly iterate over credentials with expressions (n8n-io#8502) * refactor(core): Move all code related to `onServerStarted` into `InternalHooks` (no-changelog) (n8n-io#8500) * feat(editor): Send template id as string in all telemetry events (n8n-io#8498) * fix(core): Handle possibly invalid `updatedAt` timestamps in source-control (n8n-io#8485) * fix(core): Forward authorization header when on same domain (n8n-io#8507) * fix(core): Improve handling of wrapped errors (n8n-io#8510) * 🚀 Release 1.27.0 (n8n-io#8512) Co-authored-by: ivov <ivov@users.noreply.github.com> * ci: Skip running `postInstall` scripts for all packages except sqlite3 (no-changelog) (n8n-io#8514) * ci: Fix DB tests (no-changelog) (n8n-io#8513) * fix(core): Fix new graceful shutdown env being always overridden by deprecated env (n8n-io#8503) * fix(HTTP Request Node): Support form data when using pagination (n8n-io#8497) * fix(HTTP Request Node): Require parameter with filled name and value to avoid infinite loop (n8n-io#8454) Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <netroy@users.noreply.github.com> Co-authored-by: Elias Meire <elias@meire.dev> * fix(Microsoft Excel 365 Node): Upsert append new rows at the end of used range, option to append at the end of selected range (n8n-io#8461) * fix(Slack Node): Attachments fix (n8n-io#8471) Co-authored-by: Elias Meire <elias@meire.dev> * feat: Azure Open AI chat model & embeddings (n8n-io#8522) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix(core): Fix test runs of triggers that rely on static data (n8n-io#8524) * ci: Replace `pnpm/action-setup` action with corepack (no-changelog) (n8n-io#8504) * fix(MongoDB Node): Fix "Maximum call stack size exceeded" error on too many rows (n8n-io#8530) * fix: Allow Date/Luxon objects and additional formats in DateTime validation (n8n-io#8525) * fix(editor): Prune values that are not in the schema in the ResourceMapper component (n8n-io#8478) * fix(core): Fix PermissionChecker.check, and add additional unit tests (n8n-io#8528) * fix(core): Fix DropRoleMapping migration (n8n-io#8521) * fix(core): Ensure AxiosError status always gets copied over to NodeApiError (n8n-io#8509) * fix(Embeddings OpenAI Node): Fix dynamic models fetching (n8n-io#8533) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix(core): Fix workflow tagging failure due to unique constraint check (n8n-io#8505) * ci: Fix release-create-pr.yml (no-changelog) * fix(core): Upgrade nodemailer to address an exploit (n8n-io#8535) * feat(RabbitMQ Trigger Node): Add options to configure assert of exchanges and queues (n8n-io#8430) * feat(editor): Add delete and disable button to nodes on hover (n8n-io#8482) * feat(Email Trigger (IMAP) Node): Upgrade mailparser (n8n-io#8539) * refactor(core): Streamline flows in multi-main mode (no-changelog) (n8n-io#8446) * fix: Remove ts-node from overrides and typeorm script (no-changelog) (n8n-io#8547) * fix: Update BaseChatModel import checks for MistralAI compatibility (n8n-io#8527) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * docs: Add encryption key check to breaking changes list (n8n-io#8551) * refactor(core): Lock `webhook` process out of multi-main setup (no-changelog) (n8n-io#8549) * refactor(core): Continue breaking dependency cycles (no-changelog) (n8n-io#8545) * fix(core): Use trx manager instead of repository for tags overwrite (n8n-io#8557) * build: Fix outdated import to fix build (no-changelog) (n8n-io#8558) * refactor(core): Couple of refactors on WorkflowRunner and ActiveExecutions (no-changelog) (n8n-io#8487) * feat: Add assignment component with drag and drop to Set node (n8n-io#8283) Co-authored-by: Giulio Andreini <andreini@netseven.it> * ci: Update validate-n8n-pull-request-title action (no-changelog) (n8n-io#8553) * fix(core): Use hostname from URL instead of Host header for SNI (n8n-io#8562) * fix(Microsoft Outlook Node): Download executes more than once per incoming item (n8n-io#8566) * 🚀 Release 1.28.0 (n8n-io#8569) Co-authored-by: ivov <ivov@users.noreply.github.com> * ci(core): Avoid slow bcrypt calls in tests (no-changelog) (n8n-io#8570) * fix(core): Upgrade rudderstack sdk to address npm postInstall issues (n8n-io#8568) * feat: Upgrade typeorm, sqlite3, and pg/pg-promise (n8n-io#8579) * build: Add GitHub issue form for reporting bugs (n8n-io#8585) * fix(Google Sheets Trigger Node): First non-header row is ignored when using on row added event (n8n-io#8580) * fix(RSS Feed Trigger Node): Save last item's date instead of last execution date (n8n-io#8572) * feat(core): Migrate to n8n's typeorm fork (n8n-io#8590) * refactor: Add lint rule for unsafe property access with lodash get/set (no-changelog) (n8n-io#8587) * fix(HTTP Request Node): Errorneous binary object without content-disposition response header (n8n-io#8583) Co-authored-by: Marcus <marcus@n8n.io> * fix(core): Custom workflow tool tweaks (n8n-io#8561) * Fixes imports and enables workers view --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <netroy@users.noreply.github.com> Co-authored-by: Milorad FIlipović <milorad@n8n.io> Co-authored-by: oleg <me@olegivaniv.com> Co-authored-by: Iván Ovejero <ivov.src@gmail.com> Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in> Co-authored-by: Danny Martini <despair.blue@gmail.com> Co-authored-by: Omar Ajoue <krynble@gmail.com> Co-authored-by: Elias Meire <elias@meire.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: ivov <ivov@users.noreply.github.com> Co-authored-by: Michael Kret <88898367+michael-radency@users.noreply.github.com> Co-authored-by: Andrea Ascari <dev.ascariandrea@gmail.com> Co-authored-by: Giulio Andreini <andreini@netseven.it> Co-authored-by: Cornelius Suermann <cornelius@n8n.io> Co-authored-by: Bruno Inec <contact@sweenu.xyz> Co-authored-by: Marcus <marcus@n8n.io>

* Andy/joy 277 mergeupdate n8n 128 (#54) * refactor(core): Replace promisify-d node calls with native promises (no-changelog) (n8n-io#8464) * fix(editor): Send template id as a number in telemetry events (n8n-io#8484) * refactor(editor): Prevent router.replace from computed property (no-changelog) (n8n-io#8489) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * feat(core): Remove `own` execution-process mode (n8n-io#8490) * feat(editor): Implement loading and error states for dynamically loaded components in node parameter list (n8n-io#8477) * fix(AwsS3 Node): Fix handling of bucket with dot in name (n8n-io#8475) * refactor(core): Modernize credentials controllers and services (no-changelog) (n8n-io#8488) Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in> * fix(core): Don't report executions that have been paused as failed to rudderstack and log streams (n8n-io#8501) * fix: Properly iterate over credentials with expressions (n8n-io#8502) * refactor(core): Move all code related to `onServerStarted` into `InternalHooks` (no-changelog) (n8n-io#8500) * feat(editor): Send template id as string in all telemetry events (n8n-io#8498) * fix(core): Handle possibly invalid `updatedAt` timestamps in source-control (n8n-io#8485) * fix(core): Forward authorization header when on same domain (n8n-io#8507) * fix(core): Improve handling of wrapped errors (n8n-io#8510) * 🚀 Release 1.27.0 (n8n-io#8512) Co-authored-by: ivov <ivov@users.noreply.github.com> * ci: Skip running `postInstall` scripts for all packages except sqlite3 (no-changelog) (n8n-io#8514) * ci: Fix DB tests (no-changelog) (n8n-io#8513) * fix(core): Fix new graceful shutdown env being always overridden by deprecated env (n8n-io#8503) * fix(HTTP Request Node): Support form data when using pagination (n8n-io#8497) * fix(HTTP Request Node): Require parameter with filled name and value to avoid infinite loop (n8n-io#8454) Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <netroy@users.noreply.github.com> Co-authored-by: Elias Meire <elias@meire.dev> * fix(Microsoft Excel 365 Node): Upsert append new rows at the end of used range, option to append at the end of selected range (n8n-io#8461) * fix(Slack Node): Attachments fix (n8n-io#8471) Co-authored-by: Elias Meire <elias@meire.dev> * feat: Azure Open AI chat model & embeddings (n8n-io#8522) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix(core): Fix test runs of triggers that rely on static data (n8n-io#8524) * ci: Replace `pnpm/action-setup` action with corepack (no-changelog) (n8n-io#8504) * fix(MongoDB Node): Fix "Maximum call stack size exceeded" error on too many rows (n8n-io#8530) * fix: Allow Date/Luxon objects and additional formats in DateTime validation (n8n-io#8525) * fix(editor): Prune values that are not in the schema in the ResourceMapper component (n8n-io#8478) * fix(core): Fix PermissionChecker.check, and add additional unit tests (n8n-io#8528) * fix(core): Fix DropRoleMapping migration (n8n-io#8521) * fix(core): Ensure AxiosError status always gets copied over to NodeApiError (n8n-io#8509) * fix(Embeddings OpenAI Node): Fix dynamic models fetching (n8n-io#8533) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix(core): Fix workflow tagging failure due to unique constraint check (n8n-io#8505) * ci: Fix release-create-pr.yml (no-changelog) * fix(core): Upgrade nodemailer to address an exploit (n8n-io#8535) * feat(RabbitMQ Trigger Node): Add options to configure assert of exchanges and queues (n8n-io#8430) * feat(editor): Add delete and disable button to nodes on hover (n8n-io#8482) * feat(Email Trigger (IMAP) Node): Upgrade mailparser (n8n-io#8539) * refactor(core): Streamline flows in multi-main mode (no-changelog) (n8n-io#8446) * fix: Remove ts-node from overrides and typeorm script (no-changelog) (n8n-io#8547) * fix: Update BaseChatModel import checks for MistralAI compatibility (n8n-io#8527) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * docs: Add encryption key check to breaking changes list (n8n-io#8551) * refactor(core): Lock `webhook` process out of multi-main setup (no-changelog) (n8n-io#8549) * refactor(core): Continue breaking dependency cycles (no-changelog) (n8n-io#8545) * fix(core): Use trx manager instead of repository for tags overwrite (n8n-io#8557) * build: Fix outdated import to fix build (no-changelog) (n8n-io#8558) * refactor(core): Couple of refactors on WorkflowRunner and ActiveExecutions (no-changelog) (n8n-io#8487) * feat: Add assignment component with drag and drop to Set node (n8n-io#8283) Co-authored-by: Giulio Andreini <andreini@netseven.it> * ci: Update validate-n8n-pull-request-title action (no-changelog) (n8n-io#8553) * fix(core): Use hostname from URL instead of Host header for SNI (n8n-io#8562) * fix(Microsoft Outlook Node): Download executes more than once per incoming item (n8n-io#8566) * 🚀 Release 1.28.0 (n8n-io#8569) Co-authored-by: ivov <ivov@users.noreply.github.com> * ci(core): Avoid slow bcrypt calls in tests (no-changelog) (n8n-io#8570) * fix(core): Upgrade rudderstack sdk to address npm postInstall issues (n8n-io#8568) * feat: Upgrade typeorm, sqlite3, and pg/pg-promise (n8n-io#8579) * build: Add GitHub issue form for reporting bugs (n8n-io#8585) * fix(Google Sheets Trigger Node): First non-header row is ignored when using on row added event (n8n-io#8580) * fix(RSS Feed Trigger Node): Save last item's date instead of last execution date (n8n-io#8572) * feat(core): Migrate to n8n's typeorm fork (n8n-io#8590) * refactor: Add lint rule for unsafe property access with lodash get/set (no-changelog) (n8n-io#8587) * fix(HTTP Request Node): Errorneous binary object without content-disposition response header (n8n-io#8583) Co-authored-by: Marcus <marcus@n8n.io> * fix(core): Custom workflow tool tweaks (n8n-io#8561) * Fixes imports and enables workers view --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <netroy@users.noreply.github.com> Co-authored-by: Milorad FIlipović <milorad@n8n.io> Co-authored-by: oleg <me@olegivaniv.com> Co-authored-by: Iván Ovejero <ivov.src@gmail.com> Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in> Co-authored-by: Danny Martini <despair.blue@gmail.com> Co-authored-by: Omar Ajoue <krynble@gmail.com> Co-authored-by: Elias Meire <elias@meire.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: ivov <ivov@users.noreply.github.com> Co-authored-by: Michael Kret <88898367+michael-radency@users.noreply.github.com> Co-authored-by: Andrea Ascari <dev.ascariandrea@gmail.com> Co-authored-by: Giulio Andreini <andreini@netseven.it> Co-authored-by: Cornelius Suermann <cornelius@n8n.io> Co-authored-by: Bruno Inec <contact@sweenu.xyz> Co-authored-by: Marcus <marcus@n8n.io> * Enables advanced permissions * Fixes workflow statistics update errors --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <netroy@users.noreply.github.com> Co-authored-by: Milorad FIlipović <milorad@n8n.io> Co-authored-by: oleg <me@olegivaniv.com> Co-authored-by: Iván Ovejero <ivov.src@gmail.com> Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in> Co-authored-by: Danny Martini <despair.blue@gmail.com> Co-authored-by: Omar Ajoue <krynble@gmail.com> Co-authored-by: Elias Meire <elias@meire.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: ivov <ivov@users.noreply.github.com> Co-authored-by: Michael Kret <88898367+michael-radency@users.noreply.github.com> Co-authored-by: Andrea Ascari <dev.ascariandrea@gmail.com> Co-authored-by: Giulio Andreini <andreini@netseven.it> Co-authored-by: Cornelius Suermann <cornelius@n8n.io> Co-authored-by: Bruno Inec <contact@sweenu.xyz> Co-authored-by: Marcus <marcus@n8n.io>

MiloradFilipovic added 2 commits January 29, 2024 14:04

feat(editor): Implement loading and error states for dynamically load…

cab82bf

…ed components in node parameter list

💄 Getting notice spacing more in line with components

52e8290

MiloradFilipovic self-assigned this Jan 29, 2024

n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Jan 29, 2024

OlegIvaniv requested changes Jan 29, 2024

View reviewed changes

MiloradFilipovic added 4 commits January 29, 2024 16:34

👕 Updating indents

487ab2f

💄 Visually updating loading and error states to be in line with RMC

8301616

⚡ Stopping errror propagation, adding sentry tagging

082356e

⚡ Only capture errors from components in Suspense

7c8e543

MiloradFilipovic requested a review from OlegIvaniv January 30, 2024 08:19

MiloradFilipovic added 3 commits January 30, 2024 09:53

💄 Adding spacing around new notices

e90d13e

⚡ Improving ParameterInput list imports, updating component name dete…

e024105

…ction in error captured hook

OlegIvaniv approved these changes Jan 30, 2024

View reviewed changes

MiloradFilipovic merged commit e643a12 into master Jan 30, 2024
28 checks passed

MiloradFilipovic deleted the ADO-1756-add-fixed-collection-loading-and-error-states branch January 30, 2024 13:27

github-actions bot mentioned this pull request Jan 31, 2024

🚀 Release 1.27.0 #8512

Merged

janober added the Released label Feb 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(editor): Implement loading and error states for dynamically loaded components in node parameter list #8477

feat(editor): Implement loading and error states for dynamically loaded components in node parameter list #8477

MiloradFilipovic commented Jan 29, 2024 •

edited

OlegIvaniv left a comment

OlegIvaniv Jan 29, 2024

OlegIvaniv Jan 29, 2024 •

edited

MiloradFilipovic Jan 29, 2024

OlegIvaniv left a comment

cypress bot commented Jan 30, 2024 •

edited

github-actions bot commented Jan 30, 2024

janober commented Feb 2, 2024

feat(editor): Implement loading and error states for dynamically loaded components in node parameter list #8477

feat(editor): Implement loading and error states for dynamically loaded components in node parameter list #8477

Conversation

MiloradFilipovic commented Jan 29, 2024 • edited

Summary

To test loading state

To test error state:

Related tickets and issues

Review / Merge checklist

OlegIvaniv left a comment

Choose a reason for hiding this comment

OlegIvaniv Jan 29, 2024

Choose a reason for hiding this comment

OlegIvaniv Jan 29, 2024 • edited

Choose a reason for hiding this comment

MiloradFilipovic Jan 29, 2024

Choose a reason for hiding this comment

OlegIvaniv left a comment

Choose a reason for hiding this comment

cypress bot commented Jan 30, 2024 • edited

2 flaky tests on run #3962 ↗︎

Review all test suite changes for PR #8477 ↗︎

github-actions bot commented Jan 30, 2024

janober commented Feb 2, 2024

MiloradFilipovic commented Jan 29, 2024 •

edited

OlegIvaniv Jan 29, 2024 •

edited

cypress bot commented Jan 30, 2024 •

edited