Merge pull request #1566 from Shopify/rescue_no_react_server

Use custom error page to wait react server boot
Shopify · Jul 29, 2020 · 9d54dae · 9d54dae
2 parents 7627e34 + 8d08a30
commit 9d54dae
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 13 deletions.
diff --git a/gems/quilt_rails/.gitignore b/gems/quilt_rails/.gitignore
@@ -5,3 +5,5 @@ node_modules
 /test/**/public
 test/integration/fixtures/basic_app/yarn.lock
 test/integration/fixtures/basic_app/tmp
+test/dummy/log/*
+test/dummy/db/*
diff --git a/gems/quilt_rails/CHANGELOG.md b/gems/quilt_rails/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 <!-- ## [Unreleased] -->
 
+- Added a custom error page for `Quilt::ReactRenderable::ReactServerNoResponseError` that automatically refreshes until the react server has started.
+  ([#1566](https://github.com/Shopify/quilt/pull/1566))
+
 ## [3.2.1] - 2020-07-15
 
 ### Added

diff --git a/gems/quilt_rails/Gemfile b/gems/quilt_rails/Gemfile
@@ -8,4 +8,5 @@ group :test do
   gem 'minitest-hooks'
   gem 'mocha'
   gem 'pry'
+  gem 'sqlite3'
 end
diff --git a/gems/quilt_rails/Gemfile.lock b/gems/quilt_rails/Gemfile.lock
@@ -159,6 +159,7 @@ GEM
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
+    sqlite3 (1.4.2)
     statsd-instrument (3.0.1)
     thor (1.0.1)
     thread_safe (0.3.6)
@@ -181,6 +182,7 @@ DEPENDENCIES
   quilt_rails!
   rubocop (~> 0.74)
   rubocop-git (~> 0.1.3)
+  sqlite3
 
 BUNDLED WITH
    2.0.2
diff --git a/gems/quilt_rails/app/controllers/quilt/ui_controller.rb b/gems/quilt_rails/app/controllers/quilt/ui_controller.rb
@@ -3,6 +3,11 @@
 module Quilt
   class UiController < ApplicationController
     include Quilt::ReactRenderable
+    layout(false)
+
+    rescue_from(Quilt::ReactRenderable::ReactServerNoResponseError) do
+      render(:react_render_error, status: :internal_server_error)
+    end
 
     def index
       render_react

diff --git a/gems/quilt_rails/app/views/quilt/ui/react_render_error.html b/gems/quilt_rails/app/views/quilt/ui/react_render_error.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>React Render Error</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta http-equiv="refresh" content="3;URL='/'" />
+  <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@5.1.0/dist/styles.css" />
+</head>
+<body>
+  <div>
+    <div>
+      <h1>Waiting for React Sever to boot up.</h1>
+      <p>This page will refresh automatically.</p>
+    </div>
+    <p>
+      If this error persists, ensure <code>@shopify/react-server</code>
+      is running on <code>http://localhost:8081</code>.
+    </p>
+  </div>
+</body>
+</html>
diff --git a/gems/quilt_rails/test/controllers/quilt/ui_controller_test.rb b/gems/quilt_rails/test/controllers/quilt/ui_controller_test.rb
@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+require "test_helper"
+require "action_controller"
+
+module Quilt
+  class UiControllerTest < ActionDispatch::IntegrationTest
+    include ActiveSupport::Testing::Isolation
+
+    setup { boot_dummy }
+
+    test "react render error" do
+      get("/")
+
+      assert_select("h1", "Waiting for React Sever to boot up.")
+      assert_select("meta[http-equiv='refresh']") do |selector, *|
+        assert_equal("3;URL='/'", selector[:content])
+      end
+    end
+
+    private
+
+    def boot_dummy
+      Rails.env = "development"
+      require_relative "../../dummy/config/environment"
+    end
+  end
+end
diff --git a/gems/quilt_rails/test/dummy/app/controllers/application_controller.rb b/gems/quilt_rails/test/dummy/app/controllers/application_controller.rb
@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class ApplicationController < ActionController::Base
+end
diff --git a/gems/quilt_rails/test/dummy/config/application.rb b/gems/quilt_rails/test/dummy/config/application.rb
@@ -20,5 +20,6 @@ class Application < Rails::Application
     # Application configuration can go into files in config/initializers
     # -- all .rb files in that directory are automatically loaded after loading
     # the framework and any gems in your application.
+    config.hosts << "www.example.com"
   end
 end
diff --git a/gems/quilt_rails/test/dummy/config/environments/development.rb b/gems/quilt_rails/test/dummy/config/environments/development.rb
@@ -47,14 +47,6 @@
   # Highlight code that triggered database queries in logs.
   config.active_record.verbose_query_logs = true
 
-  # Debug mode disables concatenation and preprocessing of assets.
-  # This option may cause significant delays in view rendering with a large
-  # number of complex assets.
-  config.assets.debug = true
-
-  # Suppress logger output for asset requests.
-  config.assets.quiet = true
-
   # Raises error for missing translations.
   # config.action_view.raise_on_missing_translations = true
 

diff --git a/gems/quilt_rails/test/dummy/config/environments/production.rb b/gems/quilt_rails/test/dummy/config/environments/production.rb
@@ -27,9 +27,6 @@
   # Compress CSS using a preprocessor.
   # config.assets.css_compressor = :sass
 
-  # Do not fallback to assets pipeline if a precompiled asset is missed.
-  config.assets.compile = false
-
   # Enable serving of images, stylesheets, and JavaScripts from an asset server.
   # config.action_controller.asset_host = 'http://assets.example.com'
 

diff --git a/gems/quilt_rails/test/test_helper.rb b/gems/quilt_rails/test/test_helper.rb
@@ -3,8 +3,6 @@
 # Configure Rails Environment
 ENV["RAILS_ENV"] = "test"
 
-require_relative "../test/dummy/config/environment"
-
 require 'minitest/autorun'
 require 'rails'
 require 'mocha/minitest'