fix(NoraFloatingInspector): prevent Segment crash when trying to show a Piece with an invalid Nora previewPayload

Author: jstarpl

meteor/client/ui/FloatingInspectors/L3rdFloatingInspector.tsx

@@ -84,7 +84,10 @@ export const L3rdFloatingInspector: React.FunctionComponent<IProps> = ({
 
 	const { style: floatingInspectorStyle } = useInspectorPosition(position, ref, showMiniInspector)
 
-	return noraContent && noraContent.previewPayload && noraContent.previewRenderer ? (
+	const hasValidPreviewPayload =
+		noraContent?.previewPayload && noraContent?.previewPayload && noraContent.previewPayload.toString() !== '{}'
+
+	return hasValidPreviewPayload && noraContent.previewRenderer ? (
 		showMiniInspector ? (
 			<NoraFloatingInspector ref={ref} noraContent={noraContent} style={floatingInspectorStyle} />
 		) : null

meteor/client/ui/FloatingInspectors/NoraFloatingInspector.tsx

@@ -1,4 +1,4 @@
-import { JSONBlobParse, NoraContent } from '@sofie-automation/blueprints-integration'
+import { JSONBlobParse, NoraContent, NoraPayload } from '@sofie-automation/blueprints-integration'
 import React, { useEffect, useImperativeHandle } from 'react'
 import _ from 'underscore'
 import { getNoraContentSteps } from '../SegmentContainer/PieceMultistepChevron'
@@ -86,35 +86,39 @@ export class NoraPreviewRenderer extends React.Component<{}, IStateHeader> {
 	}
 
 	private postNoraEvent(contentWindow: Window, noraContent: NoraContent) {
-		const payload = JSONBlobParse(noraContent.previewPayload)
-
-		contentWindow.postMessage(
-			{
-				event: 'nora',
-				contentToShow: {
-					manifest: payload.manifest,
-					template: {
-						event: 'preview',
-						name: payload.template.name,
-						channel: 'gfx1',
-						layer: payload.template.layer,
-						system: 'html',
+		try {
+			const payload = JSONBlobParse<NoraPayload>(noraContent.previewPayload)
+
+			contentWindow.postMessage(
+				{
+					event: 'nora',
+					contentToShow: {
+						manifest: payload.manifest,
+						template: {
+							event: 'preview',
+							name: payload.template.name,
+							channel: 'gfx1',
+							layer: payload.template.layer,
+							system: 'html',
+						},
+						content: {
+							...payload.content,
+							_valid: false,
+						},
+						timing: {
+							duration: '00:05',
+							in: 'auto',
+							out: 'auto',
+							timeIn: '00:00',
+						},
+						step: payload.step,
 					},
-					content: {
-						...payload.content,
-						_valid: false,
-					},
-					timing: {
-						duration: '00:05',
-						in: 'auto',
-						out: 'auto',
-						timeIn: '00:00',
-					},
-					step: payload.step,
 				},
-			},
-			'*'
-		)
+				'*'
+			)
+		} catch (e) {
+			console.error(`Error in NoraPreviewRenderer.postNoraEvent: ${e}`, e)
+		}
 	}
 
 	private _show() {