Add a better error message for unknown widgets

core/modules/rendertree/renderers/widget.js

@@ -32,10 +32,10 @@ var WidgetRenderer = function(renderTree,renderContext,parseTreeNode) {
 	if(WidgetClass) {
 		this.widget = new WidgetClass(this);
 	} else {
-		// Error if we couldn't find the widget
-		this.children = this.renderTree.createRenderers(this.renderContext,[
-				{type: "text", text: "Unknown widget type '" + this.parseTreeNode.tag + "'"}
-			]);
+		WidgetClass = this.widgetClasses.error;
+		if(WidgetClass) {
+			this.widget = new WidgetClass(this,"Unknown widget '" + this.parseTreeNode.tag + "'");
+		}
 	}
 };
 

core/modules/widgets/error.js

@@ -0,0 +1,41 @@
+/*\
+title: $:/core/modules/widgets/error.js
+type: application/javascript
+module-type: widget
+
+The error widget displays an error message.
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var ErrorWidget = function(renderer,errorMessage) {
+	// Save state
+	this.renderer = renderer;
+	this.errorMessage = errorMessage;
+	// Generate child nodes
+	this.generateChildNodes();
+};
+
+ErrorWidget.prototype.generateChildNodes = function() {
+	// Create the wrapper node
+	var node = {
+		type: "element",
+		tag: "span",
+		children: [{
+			type: "text",
+			text: this.errorMessage
+		}]
+	};
+	// Set up the attributes for the wrapper element
+	$tw.utils.addClassToParseTreeNode(node,"tw-error-widget");
+	// Create the renderers for the wrapper and the children
+	this.children = this.renderer.renderTree.createRenderers(this.renderer.renderContext,[node]);
+};
+
+exports.error = ErrorWidget;
+
+})();

core/styles/tiddlywiki.css

@@ -6079,6 +6079,13 @@ a.tw-tiddlylink-missing {
           box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
 }
 
+.tw-error-widget {
+  padding: 5px 5px 5px 5px;
+  margin: 15px 15px 15px 15px;
+  color: white;
+  background-color: red;
+}
+
 .tw-scrollable .tw-tiddler-frame {
   width: 400px;
   padding: 30px 30px 30px 30px;

core/templates/PageTemplate.tid

@@ -1,7 +1,5 @@
 title: $:/templates/PageTemplate
 
-<$nosuchwidget />
-
 <!-- The navigator catches navigation events and updates the story and history tiddlers -->
 <$navigator story="$:/StoryList" history="$:/HistoryList">
 

cssbuild/tiddlywiki.less

@@ -181,6 +181,13 @@ a.tw-tiddlylink-missing {
 	background: #ccc;
 }
 
+.tw-error-widget {
+	background-color: red;
+	color: white;
+	padding: 5px 5px 5px 5px;
+	margin: 15px 15px 15px 15px;
+}
+
 .tw-scrollable-outer {
 }