fix(editor): Suppress dev server websocket messages in workflow view (#7808)

packages/editor-ui/src/components/WorkflowPreview.vue

@@ -136,19 +136,21 @@ const onMouseLeave = () => {
 };
 
 const receiveMessage = ({ data }: MessageEvent) => {
-	try {
-		const json = JSON.parse(data);
-		if (json.command === 'n8nReady') {
-			ready.value = true;
-		} else if (json.command === 'openNDV') {
-			nodeViewDetailsOpened.value = true;
-		} else if (json.command === 'closeNDV') {
-			nodeViewDetailsOpened.value = false;
-		} else if (json.command === 'error') {
-			emit('close');
+	if (data?.includes('"command"')) {
+		try {
+			const json = JSON.parse(data);
+			if (json.command === 'n8nReady') {
+				ready.value = true;
+			} else if (json.command === 'openNDV') {
+				nodeViewDetailsOpened.value = true;
+			} else if (json.command === 'closeNDV') {
+				nodeViewDetailsOpened.value = false;
+			} else if (json.command === 'error') {
+				emit('close');
+			}
+		} catch (e) {
+			console.error(e);
 		}
-	} catch (e) {
-		console.error(e);
 	}
 };
 const onDocumentScroll = () => {

packages/editor-ui/src/components/__tests__/WorkflowPreview.test.ts

@@ -12,6 +12,7 @@ const renderComponent = createComponentRenderer(WorkflowPreview);
 let pinia: ReturnType<typeof createPinia>;
 let workflowsStore: ReturnType<typeof useWorkflowsStore>;
 let postMessageSpy: vi.SpyInstance;
+let consoleErrorSpy: vi.SpyInstance;
 
 const sendPostMessageCommand = (command: string) => {
 	window.postMessage(`{"command":"${command}"}`, '*');
@@ -23,6 +24,7 @@ describe('WorkflowPreview', () => {
 		setActivePinia(pinia);
 		workflowsStore = useWorkflowsStore();
 
+		consoleErrorSpy = vi.spyOn(console, 'error');
 		postMessageSpy = vi.fn();
 		Object.defineProperty(HTMLIFrameElement.prototype, 'contentWindow', {
 			writable: true,
@@ -32,6 +34,10 @@ describe('WorkflowPreview', () => {
 		});
 	});
 
+	afterEach(() => {
+		consoleErrorSpy.mockRestore();
+	});
+
 	it('should not call iframe postMessage when it is ready and no workflow or executionId props', async () => {
 		renderComponent({
 			pinia,
@@ -227,4 +233,18 @@ describe('WorkflowPreview', () => {
 			expect(emitted().close).toBeDefined();
 		});
 	});
+
+	it('should not do anything if no "command" is sent in the message', async () => {
+		const { emitted } = renderComponent({
+			pinia,
+			props: {},
+		});
+
+		window.postMessage('commando', '*');
+
+		await waitFor(() => {
+			expect(console.error).not.toHaveBeenCalled();
+			expect(emitted()).toEqual({});
+		});
+	});
 });