feat(SprocketsRenderer) add error handling and console replay

Author: rmosolgo

lib/react/server_rendering/sprockets_renderer.rb

@@ -2,25 +2,29 @@ module React
   module ServerRendering
     class SprocketsRenderer
       def initialize(options={})
-        filenames = options.fetch(:setup, ["react.js", "components.js"])
         @replay_console = options.fetch(:replay_console, true)
 
-        js_code = SetupJavascript.new(filenames).to_s
+        filenames = options.fetch(:files, ["react.js", "components.js"])
+        js_code = SetupJavascript.new(filenames).code
         @context = ExecJS.compile(js_code)
       end
 
       def render(component_name, props)
         if !props.is_a?(String)
           props = props.to_json
         end
+
         js_code = <<-JS
           (function () {
             var result = React.renderToString(React.createElement(#{component_name}, #{props}));
+            #{@replay_console ? CONSOLE_REPLAY : ""}
             return result;
           })()
         JS
+
         @context.eval(js_code).html_safe
-      # handle error
+      rescue ExecJS::ProgramError => err
+        raise PrerenderError.new(component_name, props, err)
       end
 
       class SetupJavascript
@@ -29,16 +33,43 @@ class SetupJavascript
         var self = self || this;
         var window = window || this;
         JS
+
+        attr_reader :code
+
         def initialize(filenames)
-          js_code = ""
+          @code  = GLOBAL_WRAPPER + CONSOLE_POLYFILL
           filenames.each do |filename|
-            js_code << ::Rails.application.assets[filename].to_s
+            @code << ::Rails.application.assets[filename].to_s
           end
-          @wrapped_code = GLOBAL_WRAPPER + js_code
         end
+      end
+
+      CONSOLE_POLYFILL = <<-JS
+        var console = { history: [] };
+        ['error', 'log', 'info', 'warn'].forEach(function (fn) {
+          console[fn] = function () {
+            console.history.push({level: fn, arguments: Array.prototype.slice.call(arguments)});
+          };
+        });
+      JS
+
+      CONSOLE_REPLAY = <<-JS
+      (function (history) {
+        if (history && history.length > 0) {
+          result += '\\n<scr'+'ipt>';
+          history.forEach(function (msg) {
+            result += '\\nconsole.' + msg.level + '.apply(console, ' + JSON.stringify(msg.arguments) + ');';
+          });
+          result += '\\n</scr'+'ipt>';
+        }
+      })(console.history);
+      JS
 
-        def to_s
-          @wrapped_code
+      class PrerenderError < RuntimeError
+        def initialize(component_name, props, js_message)
+          message = ["Encountered error \"#{js_message}\" when prerendering #{component_name} with #{props}",
+                      js_message.backtrace.join("\n")].join("\n")
+          super(message)
         end
       end
     end

test/react/server_rendering/sprockets_renderer_test.rb

@@ -7,7 +7,45 @@ class SprocketsRendererTest < ActiveSupport::TestCase
 
   test '#render returns HTML' do
     result = @renderer.render("Todo", {todo: "write tests"})
-    # skip reactid & checksum:
     assert_match(/<li.*write tests<\/li>/, result)
+    assert_match(/data-react-checksum/, result)
+  end
+
+  test '#render accepts strings' do
+    result = @renderer.render("Todo", {todo: "write more tests"}.to_json)
+    assert_match(/<li.*write more tests<\/li>/, result)
+  end
+
+  test '#render replays console messages' do
+    result = @renderer.render("TodoListWithConsoleLog", {todos: ["log some messages"]})
+    assert_match('console.log.apply(console, ["got initial state"])', result)
+    assert_match('console.warn.apply(console, ["mounted component"])', result)
+    assert_match('console.error.apply(console, ["rendered!","foo"])', result)
+  end
+
+  test '#render console messages can be disabled' do
+    no_log_renderer = React::ServerRendering::SprocketsRenderer.new({replay_console: false})
+    result = no_log_renderer.render("TodoListWithConsoleLog", {todos: ["log some messages"]})
+    assert_no_match('console.log.apply(console, ["got initial state"])', result)
+    assert_no_match('console.warn.apply(console, ["mounted component"])', result)
+    assert_no_match('console.error.apply(console, ["rendered!","foo"])', result)
+  end
+
+  test '#render errors include stack traces' do
+    err = assert_raises React::ServerRendering::SprocketsRenderer::PrerenderError do
+      @renderer.render("NonExistentComponent", {})
+    end
+    assert_match("ReferenceError", err.to_s)
+    assert_match("NonExistentComponent", err.to_s, "it names the component")
+    assert_match(/\n/, err.to_s, "it includes the multi-line backtrace")
+  end
+
+  test '.new accepts any filenames' do
+    limited_renderer = React::ServerRendering::SprocketsRenderer.new(files: ["react.js", "components/Todo.js"])
+    assert_match("get a real job</li>", limited_renderer.render("Todo", {todo: "get a real job"}))
+    err = assert_raises React::ServerRendering::SprocketsRenderer::PrerenderError do
+      limited_renderer.render("TodoList", {todos: []})
+    end
+    assert_match("ReferenceError", err.to_s, "it doesnt load other files")
   end
 end