From 07ea6469fdb1d4ad57657c2406b095c93481a5aa Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 30 Jun 2021 19:37:03 +0100 Subject: [PATCH] Add error handling to builder preview and loading indicator --- packages/builder/assets/error.svg | 34 ++++++++++ .../AppPreview/CurrentItemPreview.svelte | 62 ++++++++++++++++++- .../design/AppPreview/iframeTemplate.js | 17 +++-- .../client/src/components/ClientApp.svelte | 3 + packages/client/src/store/builder.js | 5 +- 5 files changed, 114 insertions(+), 7 deletions(-) create mode 100644 packages/builder/assets/error.svg diff --git a/packages/builder/assets/error.svg b/packages/builder/assets/error.svg new file mode 100644 index 0000000000..4cc1d753c9 --- /dev/null +++ b/packages/builder/assets/error.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte index 5ae4ac0ddf..12f5280b83 100644 --- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte @@ -5,12 +5,16 @@ import { Screen } from "builderStore/store/screenTemplates/utils/Screen" import { FrontendTypes } from "constants" import ConfirmDialog from "components/common/ConfirmDialog.svelte" + import { ProgressCircle, Layout, Heading, Body } from "@budibase/bbui" + import ErrorSVG from "assets/error.svg?raw" let iframe let layout let screen let confirmDeleteDialog let idToDelete + let loading = true + let error // Create screen slot placeholder for use when a page is selected rather // than a screen @@ -68,11 +72,21 @@ onMount(() => { // Initialise the app when mounted iframe.contentWindow.addEventListener( - "bb-ready", + "ready", () => refreshContent(strippedJson), { once: true } ) + // Catch any app errors + iframe.contentWindow.addEventListener( + "error", + event => { + loading = false + error = event.detail || "An unknown error occurred" + }, + { once: true } + ) + // Add listener for events sent by cliebt library in preview iframe.contentWindow.addEventListener("bb-event", event => { const { type, data } = event.detail @@ -83,8 +97,10 @@ } else if (type === "delete-component" && data.id) { idToDelete = data.id confirmDeleteDialog.show() + } else if (type === "preview-loaded") { + loading = false } else { - console.log(data) + console.warning(`Client sent unknown event type: ${type}`) } }) }) @@ -99,11 +115,25 @@
+ {#if loading} +
+ +
+ {:else if error} +
+ + {@html ErrorSVG} + App preview failed to load + {error} + +
+ {/if}