Merge pull request #196 from bikegriffith/console_log_server_side

Replay console logging on client after server prerender

Author: Robert Mosolgo

.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} %>