Add error handling to builder preview and loading indicator
This commit is contained in:
Andrew Kingston
parent
40e31907da
commit
3a615306a6
34
packages/builder/assets/error.svg
Normal file
34
packages/builder/assets/error.svg
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<?xml version="1.0"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 48 48" height="48px" viewBox="0 0 48 48" width="48px" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M9,42H3c-0.552,0-1-0.449-1-1v-3.5C2,37.224,2.224,37,2.5,37S3,37.224,3,37.5V41h6 c0.276,0,0.5,0.224,0.5,0.5S9.276,42,9,42z"/>
|
||||
<path d="M45,42h-6c-0.276,0-0.5-0.224-0.5-0.5S38.724,41,39,41h6V13H3v27c0,0.276-0.224,0.5-0.5,0.5S2,40.276,2,40 V12h44v29C46,41.551,45.552,42,45,42z"/>
|
||||
<g>
|
||||
<path d="M45.5,13h-43C2.224,13,2,12.776,2,12.5v-5C2,6.673,2.673,6,3.5,6h41C45.327,6,46,6.673,46,7.5v5 C46,12.776,45.776,13,45.5,13z M3,12h42V7.5C45,7.224,44.775,7,44.5,7h-41C3.225,7,3,7.224,3,7.5V12z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M16.5,11c-0.827,0-1.5-0.673-1.5-1.5S15.673,8,16.5,8S18,8.673,18,9.5S17.327,11,16.5,11z M16.5,9 C16.225,9,16,9.224,16,9.5s0.225,0.5,0.5,0.5S17,9.776,17,9.5S16.775,9,16.5,9z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M11.5,11c-0.827,0-1.5-0.673-1.5-1.5S10.673,8,11.5,8S13,8.673,13,9.5S12.327,11,11.5,11z M11.5,9 C11.225,9,11,9.224,11,9.5s0.225,0.5,0.5,0.5S12,9.776,12,9.5S11.775,9,11.5,9z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M6.5,11C5.673,11,5,10.327,5,9.5S5.673,8,6.5,8S8,8.673,8,9.5S7.327,11,6.5,11z M6.5,9 C6.225,9,6,9.224,6,9.5S6.225,10,6.5,10S7,9.776,7,9.5S6.775,9,6.5,9z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M35.696,44H12.304c-0.728,0-1.313-0.284-1.605-0.779c-0.289-0.489-0.259-1.126,0.084-1.749L22.58,19.996 c0.709-1.285,2.132-1.285,2.839,0l11.799,21.477v0c0.343,0.623,0.373,1.26,0.084,1.749C37.01,43.716,36.424,44,35.696,44z M24,20 c-0.176,0-0.379,0.179-0.544,0.478L11.659,41.954c-0.168,0.306-0.205,0.582-0.101,0.758C11.667,42.895,11.938,43,12.304,43 h23.393c0.365,0,0.637-0.105,0.745-0.288c0.104-0.177,0.067-0.453-0.101-0.758v0L24.543,20.478C24.379,20.179,24.176,20,24,20z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M24,36L24,36c-0.225,0-0.421-0.15-0.481-0.366C23.456,35.412,22,30.169,22,28c0-1.103,0.897-2,2-2 s2,0.897,2,2c0,2.232-1.457,7.417-1.519,7.636C24.42,35.851,24.224,36,24,36z M24,27c-0.552,0-1,0.449-1,1 c0,1.266,0.569,3.793,1.002,5.531C24.435,31.806,25,29.301,25,28C25,27.449,24.552,27,24,27z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M24,41c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2S25.103,41,24,41z M24,38c-0.552,0-1,0.449-1,1 s0.448,1,1,1s1-0.449,1-1S24.552,38,24,38z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -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
|
||||
|
|
@ -69,11 +73,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
|
||||
|
|
@ -84,8 +98,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}`)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -100,11 +116,25 @@
|
|||
</script>
|
||||
|
||||
<div class="component-container">
|
||||
{#if loading}
|
||||
<div class="center">
|
||||
<ProgressCircle />
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="center error">
|
||||
<Layout justifyItems="center" gap="S">
|
||||
{@html ErrorSVG}
|
||||
<Heading size="L">App preview failed to load</Heading>
|
||||
<Body size="S">{error}</Body>
|
||||
</Layout>
|
||||
</div>
|
||||
{/if}
|
||||
<iframe
|
||||
style="height: 100%; width: 100%"
|
||||
title="componentPreview"
|
||||
bind:this={iframe}
|
||||
srcdoc={template}
|
||||
class:hidden={loading || error}
|
||||
/>
|
||||
</div>
|
||||
<ConfirmDialog
|
||||
|
|
@ -132,4 +162,32 @@
|
|||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
.center {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
.error :global(svg) {
|
||||
fill: var(--spectrum-global-color-gray-500);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.error :global(h1),
|
||||
.error :global(p) {
|
||||
color: var(--spectrum-global-color-gray-800);
|
||||
}
|
||||
.error :global(p) {
|
||||
font-style: italic;
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
.error :global(h1) {
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,10 @@ export default `
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
html.loaded {
|
||||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
}
|
||||
body {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -66,13 +69,20 @@ export default `
|
|||
window["##BUDIBASE_PREVIEW_THEME##"] = theme
|
||||
|
||||
// Initialise app
|
||||
if (window.loadBudibase) {
|
||||
loadBudibase()
|
||||
try {
|
||||
if (window.loadBudibase) {
|
||||
window.loadBudibase()
|
||||
document.documentElement.classList.add("loaded")
|
||||
} else {
|
||||
throw "The client library couldn't be loaded"
|
||||
}
|
||||
} catch (error) {
|
||||
window.dispatchEvent(new CustomEvent("error", { detail: error }))
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("message", receiveMessage)
|
||||
window.dispatchEvent(new Event("bb-ready"))
|
||||
window.dispatchEvent(new Event("ready"))
|
||||
</script>
|
||||
</head>
|
||||
<body/>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,9 @@
|
|||
await initialise()
|
||||
await authStore.actions.fetchUser()
|
||||
dataLoaded = true
|
||||
if ($builderStore.inBuilder) {
|
||||
builderStore.actions.notifyLoaded()
|
||||
}
|
||||
})
|
||||
|
||||
// Register this as a refreshable datasource so that user changes cause
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { writable, derived } from "svelte/store"
|
||||
import Manifest from "@budibase/standard-components/manifest.json"
|
||||
|
||||
const dispatchEvent = (type, data) => {
|
||||
const dispatchEvent = (type, data = {}) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("bb-event", {
|
||||
detail: { type, data },
|
||||
|
|
@ -64,6 +64,9 @@ const createBuilderStore = () => {
|
|||
deleteComponent: id => {
|
||||
dispatchEvent("delete-component", { id })
|
||||
},
|
||||
notifyLoaded: () => {
|
||||
dispatchEvent("preview-loaded")
|
||||
},
|
||||
}
|
||||
return {
|
||||
...writableStore,
|
||||
|
|
|
|||
Loading…
Reference in a new issue