Fix #1548, add styled 404 page.

Does not change 404s for routes which are APIs, i.e., not seen by humans.

Author: ianb

server/src/pages/not-found/model.js

@@ -0,0 +1,5 @@
+exports.createModel = function (req) {
+  return {
+    title: "Page Not Found"
+  };
+};

server/src/pages/not-found/page.js

@@ -0,0 +1,8 @@
+const { Page } = require("../../reactruntime");
+const viewModule = require("./view");
+
+exports.page = new Page({
+  dir: __dirname,
+  viewModule,
+  noBrowserJavascript: true
+});

server/src/pages/not-found/server.js

@@ -0,0 +1,7 @@
+const reactrender = require("../../reactrender");
+
+exports.notFound = function (req, res) {
+  const page = require("./page").page;
+  res.status(404);
+  reactrender.render(req, res, page);
+};

server/src/pages/not-found/view.js

@@ -0,0 +1,43 @@
+/* globals location*/
+const reactruntime = require("../../reactruntime");
+const { Footer } = require("../../footer-view.js");
+const React = require("react");
+
+class Head extends React.Component {
+  render() {
+    return (
+      <reactruntime.HeadTemplate {...this.props}>
+        <link rel="stylesheet" href={this.props.staticLink("css/simple.css")} />
+      </reactruntime.HeadTemplate>
+    );
+  }
+}
+
+class Body extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {defaultSearch: props.defaultSearch};
+  }
+
+  render() {
+    return (
+      <reactruntime.BodyTemplate {...this.props}>
+        <div className="column-space full-height default-color-scheme">
+          <div className="header">
+            <h1><a href="/shots">Page Shot</a></h1>
+          </div>
+          <div className="responsive-wrapper flex-1">
+            <h2>{this.props.title}</h2>
+            <p>
+              The page was not found.
+            </p>
+          </div>
+          <Footer forUrl="legal" {...this.props} />
+        </div>
+      </reactruntime.BodyTemplate>
+    )
+  }
+}
+
+exports.HeadFactory = React.createFactory(Head);
+exports.BodyFactory = React.createFactory(Body);

server/src/server.js

@@ -79,6 +79,7 @@ const escapeHtml = require("escape-html");
 const validUrl = require("valid-url");
 const { createProxyUrl } = require("./proxy-url");
 const statsd = require("./statsd");
+const { notFound } = require("./pages/not-found/server");
 
 const PROXY_HEADER_WHITELIST = {
   "content-type": true,
@@ -708,7 +709,7 @@ app.get("/images/:imageid", function (req, res) {
     req.params.imageid
   ).then((obj) => {
     if (obj === null) {
-      simpleResponse(res, "Not Found", 404);
+      notFound(req, res);
     } else {
       let hasher = require("crypto").createHash("sha1");
       hasher.update(req.params.imageid);
@@ -810,14 +811,14 @@ require("./exporter").setup(app);
 app.get("/:id/:domain", function (req, res) {
   let shotId = `${req.params.id}/${req.params.domain}`;
   Shot.get(req.backend, shotId).then((shot) => {
-    let notFound = false;
+    let noSuchShot = false;
     if (! shot) {
-      notFound = true;
+      noSuchShot = true;
     } else if (shot.clipNames().length === 0 && ! shot.deleted) {
       // Deleted shots always appear to have no clips
     }
-    if (notFound) {
-      simpleResponse(res, "Not found", 404);
+    if (noSuchShot) {
+      notFound(req, res);
       return;
     }
     req.shot = shot;
@@ -862,7 +863,8 @@ app.get("/oembed", function (req, res) {
   let shotId = match[1] + "/" + match[2];
   Shot.get(req.backend, shotId).then((shot) => {
     if (! shot) {
-      return simpleResponse(res, "No such shot", 404);
+      notFound(req, res);
+      return;
     }
     let body = shot.oembedJson({maxheight, maxwidth});
     res.header("Content-Type", "application/json");
@@ -993,7 +995,7 @@ contentApp.get("/content/:id/:domain", function (req, res) {
   let shotId = `${req.params.id}/${req.params.domain}`;
   Shot.getFullShot(req.backend, shotId).then((shot) => {
     if (! shot) {
-      simpleResponse(res, "Not found", 404);
+      notFound(req, res);
       return;
     }
     res.send(shot.staticHtml({
@@ -1142,3 +1144,8 @@ linker.init().then(() => {
 });
 
 require("./jobs").start();
+
+/* General 404 handler: */
+app.use(function(req, res, next) {
+  notFound(req, res);
+});