support new replay_console option that allows captured console.* messages during server-side prerendering to be replayed on client to assist in debugging, per #122

Author: Mike Griffith

.gitignore

@@ -3,3 +3,4 @@ Gemfile.lock
 *.log
 test/dummy/tmp
 gemfiles/*.lock
+*.swp

README.md

@@ -306,7 +306,7 @@ end
 
 ### Server Rendering
 
-For performance and thread-safety reasons, a pool of JS VMs are spun up on application start, and the size of the pool and the timeout on requesting a VM from the pool are configurable. You can also say where you want to grab the `react.js` code from, and if you want to change the filenames for the components (this should be an array of filenames that will be requested from the asset pipeline and concatenated together.)
+For performance and thread-safety reasons, a pool of JS VMs are spun up on application start, and the size of the pool and the timeout on requesting a VM from the pool are configurable.
 
 ```ruby
 # config/environments/application.rb
@@ -316,10 +316,15 @@ MyApp::Application.configure do
   config.react.timeout = 20 #seconds
   config.react.react_js = lambda {File.read(::Rails.application.assets.resolve('react.js'))}
   config.react.component_filenames = ['components.js']
+  config.react.replay_console = false
 end
-
 ```
 
+Other configuration options include:
+* `react_js`: where you want to grab the javascript library from
+* `component_filenames`: an array of filenames that will be requested from the asset pipeline and concatenated together
+* `replay_console`: additional debugging by replaying any captured console messages from server-rendering back on the client (note: they will lose their call stack, but it can help point you in right direction)
+
 ## CoffeeScript
 
 It is possible to use JSX with CoffeeScript. The caveat is that you will still need to include the docblock. Since CoffeeScript doesn't allow `/* */` style comments, we need to do something a little different. We also need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:

lib/react-rails.rb

@@ -1,4 +1,5 @@
 require 'react/jsx'
 require 'react/renderer'
 require 'react/rails'
+require 'react/console'
 

lib/react/console.rb

@@ -0,0 +1,30 @@
+module React
+  class Console
+    def self.polyfill_js
+      # Overwrite global `console` object with something that can capture messages
+      # to return to client later for debugging
+      <<-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
+    end
+
+    def self.replay_as_script_js
+      <<-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
+    end
+  end
+end

lib/react/rails/railtie.rb

@@ -71,7 +71,7 @@ class Railtie < ::Rails::Railtie
 
         do_setup = lambda do
           cfg = app.config.react
-          React::Renderer.setup!( cfg.react_js, cfg.components_js,
+          React::Renderer.setup!( cfg.react_js, cfg.components_js, cfg.replay_console,
                                 {:size => cfg.max_renderers, :timeout => cfg.timeout})
         end
 

lib/react/renderer.rb

@@ -12,10 +12,11 @@ def initialize(component_name, props, js_message)
 
     cattr_accessor :pool
 
-    def self.setup!(react_js, components_js, args={})
+    def self.setup!(react_js, components_js, replay_console, args={})
       args.assert_valid_keys(:size, :timeout)
       @@react_js = react_js
       @@components_js = components_js
+      @@replay_console = replay_console
       @@pool.shutdown{} if @@pool
       reset_combined_js!
       default_pool_options = {:size =>10, :timeout => 20}
@@ -43,9 +44,11 @@ def context
     def render(component, args={})
       react_props = React::Renderer.react_props(args)
       jscode = <<-JS
-        function() {
-          return React.renderToString(React.createElement(#{component}, #{react_props}));
-        }()
+        (function () {
+          var result = React.renderToString(React.createElement(#{component}, #{react_props}));
+          #{@@replay_console ? React::Console.replay_as_script_js : ''}
+          return result;
+        })()
       JS
       context.eval(jscode).html_safe
     rescue ExecJS::ProgramError => e
@@ -56,22 +59,15 @@ def render(component, args={})
     private
 
     def self.setup_combined_js
-      <<-CODE
+      <<-JS
         var global = global || this;
         var self = self || this;
         var window = window || this;
-
-        var console = global.console || {};
-        ['error', 'log', 'info', 'warn'].forEach(function (fn) {
-          if (!(fn in console)) {
-            console[fn] = function () {};
-          }
-        });
-
+        #{React::Console.polyfill_js}
         #{@@react_js.call};
         React = global.React;
         #{@@components_js.call};
-      CODE
+      JS
     end
 
     def self.reset_combined_js!

test/dummy/app/assets/javascripts/components/TodoListWithConsoleLog.js.jsx

@@ -0,0 +1,23 @@
+TodoListWithConsoleLog = React.createClass({
+  getInitialState: function() {
+    console.log('got initial state');
+    return({mounted: "nope"});
+  },
+  componentWillMount: function() {
+    console.warn('mounted component');
+    this.setState({mounted: 'yep'});
+  },
+  render: function() {
+    var x = 'foo';
+    console.error('rendered!', x);
+    return (
+      <ul>
+        <li>Console Logged</li>
+        <li id='status'>{this.state.mounted}</li>
+        {this.props.todos.map(function(todo, i) {
+          return (<Todo key={i} todo={todo} />)
+        })}
+      </ul>
+    )
+  }
+})

test/dummy/app/assets/javascripts/example2.js.jsx.coffee

@@ -1,3 +1,5 @@
 Component = React.createClass
   render: ->
     `<ExampleComponent videos={this.props.videos} />`
+
+window.Component = Component

test/dummy/app/controllers/server_controller.rb

@@ -2,4 +2,23 @@ class ServerController < ApplicationController
   def show
     @todos = %w{todo1 todo2 todo3}
   end
+
+  def console_example
+    hack_replay_console_config true
+    @todos = %w{todo1 todo2 todo3}
+  end
+
+  def console_example_suppressed
+    hack_replay_console_config false
+    @todos = %w{todo1 todo2 todo3}
+  end
+
+  private
+  def hack_replay_console_config(value)
+    # Don't do this in your app; just set it how you want it in config/application.rb
+    cfg = ::Rails.application.config.react
+    cfg.replay_console = value
+    React::Renderer.setup!( cfg.react_js, cfg.components_js, cfg.replay_console,
+                        {:size => cfg.max_renderers, :timeout => cfg.timeout})
+  end
 end

test/dummy/app/views/server/console_example.html.erb

@@ -0,0 +1 @@
+<%= react_component "TodoListWithConsoleLog", {todos: @todos}, {prerender: true} %>

test/dummy/app/views/server/console_example_suppressed.html.erb

@@ -0,0 +1 @@
+<%= react_component "TodoListWithConsoleLog", {todos: @todos}, {prerender: true} %>

test/dummy/app/views/server/show.html.erb

@@ -1 +1 @@
-<%= react_component "TodoList", {:todos => @todos}, :prerender => true %>
+<%= react_component "TodoList", {todos: @todos}, {prerender: true} %>

test/dummy/config/routes.rb

@@ -1,4 +1,9 @@
 Dummy::Application.routes.draw do
-  resources :pages, :only => [:show]
-  resources :server, :only => [:show]
+  resources :pages, only: [:show]
+  resources :server, only: [:show] do
+    collection do
+      get :console_example
+      get :console_example_suppressed
+    end
+  end
 end

test/jsxtransform_test.rb

@@ -16,6 +16,7 @@
     }
   });
 
+  window.Component = Component;
 }).call(this);
 eos
 

test/server_rendered_html_test.rb

@@ -16,22 +16,39 @@ def wait_to_ensure_asset_pipeline_detects_changes
 
     FileUtils.cp app_file, file_without_updates
     FileUtils.touch app_file
+    wait_to_ensure_asset_pipeline_detects_changes
 
     begin
       get '/server/1'
       refute_match(/Updated/, response.body)
 
-      wait_to_ensure_asset_pipeline_detects_changes
       FileUtils.cp file_with_updates, app_file
       FileUtils.touch app_file
+      wait_to_ensure_asset_pipeline_detects_changes
 
       get '/server/1'
       assert_match(/Updated/, response.body)
     ensure
       # if we have a test failure, we want to make sure that we revert the dummy file
-      wait_to_ensure_asset_pipeline_detects_changes
       FileUtils.mv file_without_updates, app_file
       FileUtils.touch app_file
+      wait_to_ensure_asset_pipeline_detects_changes
     end
   end
+
+  test 'react server rendering shows console output as html comment' do
+    # Make sure console messages are replayed when requested
+    get '/server/console_example'
+    assert_match(/Console Logged/, response.body)
+    assert_match(/console.log.apply\(console, \["got initial state"\]\)/, response.body)
+    assert_match(/console.warn.apply\(console, \["mounted component"\]\)/, response.body)
+    assert_match(/console.error.apply\(console, \["rendered!","foo"\]\)/, response.body)
+
+    # Make sure they're not when we don't ask for them
+    get '/server/console_example_suppressed'
+    assert_match('Console Logged', response.body)
+    assert_no_match(/console.log/, response.body)
+    assert_no_match(/console.warn/, response.body)
+    assert_no_match(/console.error/, response.body)
+  end
 end