diff --git a/frontend/src/lib/components/apps/components/display/AppDownload.svelte b/frontend/src/lib/components/apps/components/display/AppDownload.svelte
index 75220114be..fc07ff339f 100644
--- a/frontend/src/lib/components/apps/components/display/AppDownload.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppDownload.svelte
@@ -10,6 +10,7 @@
 	import { AlignWrapper } from '../helpers'
 	import { Button } from '$lib/components/common'
 	import { loadIcon } from '../icon'
+	import ComponentErrorHandler from '../helpers/ComponentErrorHandler.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -19,7 +20,7 @@
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export let noWFull = false
 
-	let resolvedConfig = initConfig(
+	const resolvedConfig = initConfig(
 		components['downloadcomponent'].initialData.configuration,
 		configuration
 	)
@@ -63,30 +64,37 @@
 
 {#if render}
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
-		<Button
-			on:pointerdown={(e) => e.stopPropagation()}
-			btnClasses={twMerge(css?.button?.class, resolvedConfig.fillContainer ? 'w-full h-full' : '')}
-			wrapperClasses={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
-			style={css?.button?.style}
-			disabled={resolvedConfig.source == undefined}
-			size={resolvedConfig.size}
-			color={resolvedConfig.color}
-			download={resolvedConfig.filename}
-			href={transformBareBase64IfNecessary(resolvedConfig.source)}
-			target="_self"
-			nonCaptureEvent
+		<ComponentErrorHandler
+			hasError={resolvedConfig?.source != undefined && typeof resolvedConfig.source !== 'string'}
 		>
-			<span class="truncate inline-flex gap-2 items-center">
-				{#if resolvedConfig.beforeIcon && beforeIconComponent}
-					<svelte:component this={beforeIconComponent} size={14} />
-				{/if}
-				{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
-					<div>{resolvedConfig.label}</div>
-				{/if}
-				{#if resolvedConfig.afterIcon && afterIconComponent}
-					<svelte:component this={afterIconComponent} size={14} />
-				{/if}
-			</span>
-		</Button>
+			<Button
+				on:pointerdown={(e) => e.stopPropagation()}
+				btnClasses={twMerge(
+					css?.button?.class,
+					resolvedConfig.fillContainer ? 'w-full h-full' : ''
+				)}
+				wrapperClasses={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
+				style={css?.button?.style}
+				disabled={resolvedConfig.source == undefined}
+				size={resolvedConfig.size}
+				color={resolvedConfig.color}
+				download={resolvedConfig.filename}
+				href={transformBareBase64IfNecessary(resolvedConfig.source)}
+				target="_self"
+				nonCaptureEvent
+			>
+				<span class="truncate inline-flex gap-2 items-center">
+					{#if resolvedConfig.beforeIcon && beforeIconComponent}
+						<svelte:component this={beforeIconComponent} size={14} />
+					{/if}
+					{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
+						<div>{resolvedConfig.label}</div>
+					{/if}
+					{#if resolvedConfig.afterIcon && afterIconComponent}
+						<svelte:component this={afterIconComponent} size={14} />
+					{/if}
+				</span>
+			</Button>
+		</ComponentErrorHandler>
 	</AlignWrapper>
 {/if}
diff --git a/frontend/src/lib/components/apps/components/helpers/ComponentErrorHandler.svelte b/frontend/src/lib/components/apps/components/helpers/ComponentErrorHandler.svelte
new file mode 100644
index 0000000000..6be7c5e191
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/helpers/ComponentErrorHandler.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import Popover from '$lib/components/Popover.svelte'
+	import Alert from '$lib/components/common/alert/Alert.svelte'
+	import { classNames } from '$lib/utils'
+	import { Bug } from 'lucide-svelte'
+
+	export let hasError: boolean = false
+</script>
+
+{#if hasError}
+	<div class={classNames('bg-red-100 w-full h-full flex items-center justify-center text-red-500')}>
+		<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+			<Bug size={14} />
+			<span slot="text">
+				<div class="bg-white">
+					<Alert type="error" title="Error during execution">
+						<div class="flex flex-col gap-2">
+							One of the configuration of the component is invalid. Please check the configuration
+							and try again.
+						</div>
+					</Alert>
+				</div>
+			</span>
+		</Popover>
+	</div>
+{:else}
+	<slot />
+{/if}