[WIP] Elsa 3.x: Dragging a JavaScript activity onto the grid generates console errors

src/framework/Elsa.Studio.Shared/Monaco/Handlers/JavaScriptMonacoHandler.cs

@@ -27,7 +27,15 @@ public async ValueTask InitializeAsync(MonacoContext context)
         if (activityTypeName == null || workflowDefinitionId == null)
             return;
 
-        var data = await typeDefinitionService.GetTypeDefinition(workflowDefinitionId, activityTypeName, propertyName);
-        await jsRuntime.InvokeVoidAsync("monaco.languages.typescript.javascriptDefaults.addExtraLib", data, null);
+        try
+        {
+            var data = await typeDefinitionService.GetTypeDefinition(workflowDefinitionId, activityTypeName, propertyName);
+            await jsRuntime.InvokeVoidAsync("monaco.languages.typescript.javascriptDefaults.addExtraLib", data, null);
+        }
+        catch (JSException ex)
+        {
+            // Log but don't crash on CSP or other JS errors
+            Console.WriteLine($"JavaScript initialization error: {ex.Message}");
+        }
     }
 }

src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/create-graph.ts

@@ -297,9 +297,29 @@ export async function createGraph(containerId: string, componentRef: DotNetCompo
     graph.on('node:click', async args => {
         const {e, node} = args;
         const activity: Activity = node.data;
+
+        // Handle case where activity data might be missing or incomplete
+        if (!activity || !activity.id) {
+            console.warn("Activity or activity ID is missing in node:click event");
+            if (!graph.isSelected(node)) {
+                graph.select(node);
+            }
+            return;
+        }
+
         const activityId = activity.id;
         const activityElementId = `activity-${activityId}`;
         const activityElement = document.getElementById(activityElementId);
+
+        // Handle case where activity element might not be in the DOM yet
+        if (!activityElement) {
+            console.warn(`Activity element with ID ${activityElementId} not found in the DOM`);
+            if (!graph.isSelected(node)) {
+                graph.select(node);
+            }
+            return;
+        }
+
         const embeddedPortElements = activityElement.querySelectorAll('.embedded-port');
         const mousePosition = graph.clientToLocal(e.clientX, e.clientY);
 
@@ -321,7 +341,11 @@ export async function createGraph(containerId: string, componentRef: DotNetCompo
             node.setProp('selected-port', embeddedPortName);
             lastSelectedNode = node;
 
-            await interop.raiseActivityEmbeddedPortSelected(activity, embeddedPortName);
+            try {
+                await interop.raiseActivityEmbeddedPortSelected(activity, embeddedPortName);
+            } catch (error) {
+                console.warn("Error when raising activity embedded port selected:", error);
+            }
             return;
         }
 
@@ -335,13 +359,35 @@ export async function createGraph(containerId: string, componentRef: DotNetCompo
     graph.on('node:dblclick', async args => {
         const {node} = args;
         const activity: Activity = node.data;
-        await interop.raiseActivityDoubleClick(activity);
+
+        // Check if activity data is valid before proceeding
+        if (!activity) {
+            console.warn("Activity data is missing in node:dblclick event");
+            return;
+        }
+
+        try {
+            await interop.raiseActivityDoubleClick(activity);
+        } catch (error) {
+            console.warn("Error when raising activity double click:", error);
+        }
     });
 
     graph.on('node:selected', async args => {
         const {node} = args;
         const activity: Activity = node.data;
-        await interop.raiseActivitySelected(activity);
+
+        // Check if activity data is valid before proceeding
+        if (!activity) {
+            console.warn("Activity data is missing in node:selected event");
+            return;
+        }
+
+        try {
+            await interop.raiseActivitySelected(activity);
+        } catch (error) {
+            console.warn("Error when raising activity selected:", error);
+        }
     });
 
     const onGraphUpdated = async (e: any) => {

src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/internal/create-activity-element.ts

@@ -4,6 +4,18 @@ export const activityTagName = "elsa-activity-wrapper";
 
 export function createActivityElement(activity: Activity, detached?: boolean, selectedPort?: string, stats?: ActivityStats): HTMLElement {
     const activityElement = document.createElement(activityTagName) as any;
+
+    // Make sure we have a valid activity with an id
+    if (!activity || !activity.id) {
+        console.warn("Activity or activity.id is undefined or null");
+        // Create a placeholder activity with a unique id to avoid reference tracking errors
+        if (!activity) {
+            activity = { id: `temp-${Date.now()}` } as Activity;
+        } else if (!activity.id) {
+            activity.id = `temp-${Date.now()}`;
+        }
+    }
+
     const activityId = activity.id;
     const elementId = `activity-${activityId}`;
 
@@ -16,8 +28,20 @@ export function createActivityElement(activity: Activity, detached?: boolean, se
         activityElement.setAttribute("selected-port-name", selectedPort);
 
     activityElement.stats = stats;
-    //activityElement.activity = activity; // activity can be too deeply nested when dealing with workflow definition activities, exceeding the max depth of 32 with JSInterop.
-    activityElement.setAttribute("activity-json", JSON.stringify(activity));
+
+    // Ensure activity is serialized safely
+    try {
+        activityElement.setAttribute("activity-json", JSON.stringify(activity));
+    } catch (error) {
+        console.warn("Error serializing activity:", error);
+        // Provide a minimal safe version of the activity
+        activityElement.setAttribute("activity-json", JSON.stringify({
+            id: activityId,
+            type: activity.type || "Unknown",
+            version: activity.version || 1
+        }));
+    }
+
     activityElement.setAttribute("activity-id", activityId);
 
     return activityElement;

src/modules/Elsa.Studio.Workflows.Designer/ClientLib/webpack.config.js

@@ -40,4 +40,10 @@ module.exports = {
     resolve: {
         extensions: ['.tsx', '.ts', '.js'],
     },
+    // Added to allow Web Workers to use blob URLs
+    devServer: {
+        headers: {
+            'Content-Security-Policy': "default-src 'self'; script-src 'self' 'unsafe-eval' blob:; worker-src blob:;"
+        }
+    }
 };