add missing error handling

Author: mProjectsCode

exampleVault/Test.md

@@ -1,5 +1,5 @@
 ---
-text: this is some text
+text: this is reactive
 number: 12234234
 ---
 
@@ -164,6 +164,9 @@ You can also create reactive components that re-render based on a specific event
 
 // define a function that takes in some args and returns what should be rendered
 function render(args) {
+	if (args?.text === "this") {
+		throw new Error("not allowed");
+	}
 	return args?.text ?? "undefined";
 }
 

jsEngine/api/API.ts

@@ -79,6 +79,6 @@ export class API {
 	 * @param initialArgs the initial arguments (for the first render) to pass to the function.
 	 */
 	public reactive(fn: JsFunc, ...initialArgs: unknown[]): ReactiveComponent {
-		return new ReactiveComponent(fn, initialArgs);
+		return new ReactiveComponent(this, fn, initialArgs);
 	}
 }

jsEngine/api/reactive/ReactiveComponent.ts

@@ -1,5 +1,7 @@
 import { type ResultRenderer } from '../../engine/ResultRenderer';
 import { type JsFunc } from '../../engine/JsExecution';
+import { MessageType } from 'jsEngine/messages/MessageManager';
+import { type API } from 'jsEngine/api/API';
 
 /**
  * A reactive component is a component that can be refreshed.
@@ -8,14 +10,16 @@ import { type JsFunc } from '../../engine/JsExecution';
  * See {@link API.reactive}
  */
 export class ReactiveComponent {
+	private readonly apiInstance: API;
 	private readonly _render: JsFunc;
 	private readonly initialArgs: unknown[];
 	/**
 	 * @internal
 	 */
 	renderer: ResultRenderer | undefined;
 
-	constructor(_render: JsFunc, initialArgs: unknown[]) {
+	constructor(api: API, _render: JsFunc, initialArgs: unknown[]) {
+		this.apiInstance = api;
 		this._render = _render;
 		this.initialArgs = initialArgs;
 	}
@@ -26,7 +30,25 @@ export class ReactiveComponent {
 	 * @param args
 	 */
 	public async refresh(...args: unknown[]): Promise<void> {
-		void this.renderer?.render(await this._render(...args));
+		let result: unknown;
+
+		try {
+			// eslint-disable-next-line
+			result = await this._render(...args);
+		} catch (e) {
+			console.warn('failed to execute JS', e);
+
+			if (e instanceof Error) {
+				result = this.apiInstance.message.createMessage(
+					MessageType.ERROR,
+					'Failed to execute JS',
+					`Failed to execute JS during reactive execution in execution "${this.apiInstance.instanceId.id}"`,
+					e.stack,
+				);
+			}
+		}
+
+		void this.renderer?.render(result);
 	}
 
 	/**