feat(component): add error wrapper around preview components

src/component/presentation/preview.tsx

@@ -94,9 +94,10 @@ export class Preview extends React.Component<PreviewProps> {
 				patternFactory = require(patternPath).default;
 				this.patternFactories[patternPath] = patternFactory;
 			}
+			const reactComponent = patternFactory(componentProps);
 
 			// Finally, build the component
-			return patternFactory(componentProps);
+			return <PatternWrapper key={key}>{reactComponent}</PatternWrapper>;
 		} else {
 			// The model is an object, but not a pattern declaration.
 			// Create a new object with recursively processed values.
@@ -111,3 +112,26 @@ export class Preview extends React.Component<PreviewProps> {
 		}
 	}
 }
+
+interface PatternWrapperState {
+	errorMessage?: string;
+}
+
+class PatternWrapper extends React.Component<{}, PatternWrapperState> {
+	public constructor(props: {}) {
+		super(props);
+		this.state = {};
+	}
+
+	public componentDidCatch(error: Error): void {
+		this.setState({ errorMessage: error.message });
+	}
+
+	public render(): React.ReactNode {
+		if (this.state.errorMessage) {
+			return <span>{this.state.errorMessage}</span>;
+		} else {
+			return this.props.children;
+		}
+	}
+}