better_errors 2.8.2 → 2.10.0.beta2

data/lib/better_errors/error_page_style.rb

@@ -0,0 +1,30 @@
+require "sassc"
+
+module BetterErrors
+  # @private
+  module ErrorPageStyle
+    def self.compiled_css(for_deployment = false)
+      style_dir = File.expand_path("style", File.dirname(__FILE__))
+      style_file = "#{style_dir}/main.scss"
+
+      engine = SassC::Engine.new(
+        File.read(style_file),
+        filename: style_file,
+        style: for_deployment ? :compressed : :expanded,
+        line_comments: !for_deployment,
+        load_paths: [style_dir],
+      )
+      engine.render
+    end
+
+    def self.style_tag(csp_nonce)
+      style_file = File.expand_path("templates/main.css", File.dirname(__FILE__))
+      css = if File.exist?(style_file)
+        File.open(style_file).read
+      else
+        compiled_css(false)
+      end
+      "<style type='text/css' nonce='#{csp_nonce}'>\n#{css}\n</style>"
+    end
+  end
+end

data/lib/better_errors/exception_hint.rb

@@ -0,0 +1,29 @@
+module BetterErrors
+  class ExceptionHint
+    def initialize(exception)
+      @exception = exception
+    end
+
+    def hint
+      case exception
+      when NoMethodError
+        /\Aundefined method `(?<method>[^']+)' for (?<val>[^:]+):(?<klass>\w+)/.match(exception.message) do |match|
+          if match[:val] == "nil"
+            return "Something is `nil` when it probably shouldn't be."
+          elsif !match[:klass].start_with? '0x'
+            return "`#{match[:method]}` is being called on a `#{match[:klass]}` object, "\
+              "which might not be the type of object you were expecting."
+          end
+        end
+      when NameError
+        /\Aundefined local variable or method `(?<method>[^']+)' for/.match(exception.message) do |match|
+          return "`#{match[:method]}` is probably misspelled."
+        end
+      end
+    end
+
+    private
+
+    attr_reader :exception
+  end
+end

data/lib/better_errors/middleware.rb

@@ -40,7 +40,7 @@ module BetterErrors
     allow_ip! "127.0.0.0/8"
     allow_ip! "::1/128" rescue nil # windows ruby doesn't have ipv6 support
 
-    CSRF_TOKEN_COOKIE_NAME = "BetterErrors-#{VERSION}-CSRF-Token"
+    CSRF_TOKEN_COOKIE_NAME = "BetterErrors-#{BetterErrors::VERSION}-CSRF-Token"
 
     # A new instance of BetterErrors::Middleware
     #
@@ -94,12 +94,13 @@ module BetterErrors
     def show_error_page(env, exception=nil)
       request = Rack::Request.new(env)
       csrf_token = request.cookies[CSRF_TOKEN_COOKIE_NAME] || SecureRandom.uuid
+      csp_nonce = SecureRandom.base64(12)
 
       type, content = if @error_page
         if text?(env)
-          [ 'plain', @error_page.render('text') ]
+          [ 'plain', @error_page.render_text ]
         else
-          [ 'html', @error_page.render('main', csrf_token) ]
+          [ 'html', @error_page.render_main(csrf_token, csp_nonce) ]
         end
       else
         [ 'html', no_errors_page ]
@@ -110,7 +111,22 @@ module BetterErrors
         status_code = ActionDispatch::ExceptionWrapper.new(env, exception).status_code
       end
 
-      response = Rack::Response.new(content, status_code, { "Content-Type" => "text/#{type}; charset=utf-8" })
+      headers = {
+        "Content-Type" => "text/#{type}; charset=utf-8",
+        "Content-Security-Policy" => [
+          "default-src 'none'",
+          # Specifying nonce makes a modern browser ignore 'unsafe-inline' which could still be set 
+          # for older browsers without nonce support.
+          # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
+          "script-src 'self' 'nonce-#{csp_nonce}' 'unsafe-inline'",
+          "style-src 'self' 'nonce-#{csp_nonce}' 'unsafe-inline'",
+          "img-src data:",
+          "connect-src 'self'",
+          "navigate-to 'self' #{BetterErrors.editor.scheme}",
+        ].join('; '),
+      }
+
+      response = Rack::Response.new(content, status_code, headers)
 
       unless request.cookies[CSRF_TOKEN_COOKIE_NAME]
         response.set_cookie(CSRF_TOKEN_COOKIE_NAME, value: csrf_token, path: "/", httponly: true, same_site: :strict)

data/lib/better_errors/raised_exception.rb

@@ -1,7 +1,9 @@
+require 'better_errors/exception_hint'
+
 # @private
 module BetterErrors
   class RaisedException
-    attr_reader :exception, :message, :backtrace
+    attr_reader :exception, :message, :backtrace, :hint
 
     def initialize(exception)
       if exception.class.name == "ActionView::Template::Error" && exception.respond_to?(:cause)
@@ -23,6 +25,7 @@ module BetterErrors
       @message = exception.message
 
       setup_backtrace
+      setup_hint
       massage_syntax_error
     end
 
@@ -78,5 +81,9 @@ module BetterErrors
         end
       end
     end
+
+    def setup_hint
+      @hint = ExceptionHint.new(exception).hint
+    end
   end
 end

data/lib/better_errors/templates/main.erb

@@ -2,714 +2,14 @@
 <html>
 <head>
     <title><%= exception_type %> at <%= request_path %></title>
+    <link rel="icon" href="data:;base64,=" />
 </head>
-<body>
+<body class="better-errors-javascript-not-loaded">
     <%# Stylesheets are placed in the <body> for Turbolinks compatibility. %>
-    <style>
-    /* Basic reset */
-    * {
-        margin: 0;
-        padding: 0;
-    }
-
-    table {
-        width: 100%;
-        border-collapse: collapse;
-    }
-
-    th, td {
-        vertical-align: top;
-        text-align: left;
-    }
-
-    textarea {
-        resize: none;
-    }
-
-    body {
-        font-size: 10pt;
-    }
-
-    body, td, input, textarea {
-        font-family: helvetica neue, lucida grande, sans-serif;
-        line-height: 1.5;
-        color: #333;
-        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-    }
-
-    html {
-        background: #f0f0f5;
-    }
-
-    .clearfix::after{
-        clear: both;
-        content: ".";
-        display: block;
-        height: 0;
-        visibility: hidden;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Basic layout
-     * --------------------------------------------------------------------- */
-
-    /* Small */
-    @media screen and (max-width: 1100px) {
-        html {
-            overflow-y: scroll;
-        }
-
-        body {
-            margin: 0 20px;
-        }
-
-        header.exception {
-            margin: 0 -20px;
-        }
-
-        nav.sidebar {
-            padding: 0;
-            margin: 20px 0;
-        }
-
-        ul.frames {
-            max-height: 200px;
-            overflow: auto;
-        }
-    }
-
-    /* Wide */
-    @media screen and (min-width: 1100px) {
-        header.exception {
-           position: fixed;
-           top: 0;
-           left: 0;
-           right: 0;
-        }
-
-        nav.sidebar,
-        .frame_info {
-            position: fixed;
-            top: 95px;
-            bottom: 0;
-
-            box-sizing: border-box;
-
-            overflow-y: auto;
-            overflow-x: hidden;
-        }
-
-        nav.sidebar {
-            width: 40%;
-            left: 20px;
-            top: 115px;
-            bottom: 20px;
-        }
-
-        .frame_info {
-            right: 0;
-            left: 40%;
-
-            padding: 20px;
-            padding-left: 10px;
-            margin-left: 30px;
-        }
-    }
-
-    nav.sidebar {
-        background: #d3d3da;
-        border-top: solid 3px #a33;
-        border-bottom: solid 3px #a33;
-        border-radius: 4px;
-        box-shadow: 0 0 6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-    }
-
-    /* ---------------------------------------------------------------------
-     * Header
-     * --------------------------------------------------------------------- */
-
-    header.exception {
-        padding: 18px 20px;
-
-        height: 59px;
-        min-height: 59px;
-
-        overflow: hidden;
-
-        background-color: #20202a;
-        color: #aaa;
-        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
-        font-weight: 200;
-        box-shadow: inset 0 -5px 3px -3px rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
-
-        -webkit-text-smoothing: antialiased;
-    }
-
-    /* Heading */
-    header.exception .fix-actions {
-        margin-top: .5em;
-    }
-
-    header.exception .fix-actions input[type=submit] {
-        font-weight: bold;
-    }
-
-    header.exception h2 {
-        font-weight: 200;
-        font-size: 11pt;
-    }
-
-    header.exception h2,
-    header.exception p {
-        line-height: 1.5em;
-        overflow: hidden;
-        white-space: pre;
-        text-overflow: ellipsis;
-    }
-
-    header.exception h2 strong {
-        font-weight: 700;
-        color: #d55;
-    }
-
-    header.exception p {
-        font-weight: 200;
-        font-size: 17pt;
-        color: white;
-    }
-
-    header.exception:hover {
-        height: auto;
-        z-index: 2;
-    }
-
-    header.exception:hover h2,
-    header.exception:hover p {
-        padding-right: 20px;
-        overflow-y: auto;
-        word-wrap: break-word;
-        white-space: pre-wrap;
-        height: auto;
-        max-height: 7.5em;
-    }
-
-    @media screen and (max-width: 1100px) {
-        header.exception {
-            height: auto;
-        }
-
-        header.exception h2,
-        header.exception p {
-            padding-right: 20px;
-            overflow-y: auto;
-            word-wrap: break-word;
-            height: auto;
-            max-height: 7em;
-        }
-    }
-
-    <%#
-    /* Light theme */
-    header.exception {
-        text-shadow: 0 1px 0 rgba(250, 250, 250, 0.6);
-        background: rgba(200,100,50,0.10);
-        color: #977;
-    }
-    header.exception h2 strong {
-        color: #533;
-    }
-    header.exception p {
-        color: #744;
-    }
-    %>
-
-    /* ---------------------------------------------------------------------
-     * Navigation
-     * --------------------------------------------------------------------- */
-
-    nav.tabs {
-        border-bottom: solid 1px #ddd;
-
-        background-color: #eee;
-        text-align: center;
-
-        padding: 6px;
-
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    }
-
-    nav.tabs a {
-        display: inline-block;
-
-        height: 22px;
-        line-height: 22px;
-        padding: 0 10px;
-
-        text-decoration: none;
-        font-size: 8pt;
-        font-weight: bold;
-
-        color: #999;
-        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-    }
-
-    nav.tabs a.selected {
-        color: white;
-        background: rgba(0, 0, 0, 0.5);
-        border-radius: 16px;
-        box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
-        text-shadow: 0 0 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4);
-    }
-
-    nav.tabs a.disabled {
-        text-decoration: line-through;
-        text-shadow: none;
-        cursor: default;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Sidebar
-     * --------------------------------------------------------------------- */
-
-    ul.frames {
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-
-    /* Each item */
-    ul.frames li {
-        background-color: #f8f8f8;
-        background: -webkit-linear-gradient(top, #f8f8f8 80%, #f0f0f0);
-        background: -moz-linear-gradient(top, #f8f8f8 80%, #f0f0f0);
-        background: linear-gradient(top, #f8f8f8 80%, #f0f0f0);
-        box-shadow: inset 0 -1px 0 #e2e2e2;
-        padding: 7px 20px;
-
-        cursor: pointer;
-        overflow: hidden;
-    }
-
-    ul.frames .name,
-    ul.frames .location {
-        overflow: hidden;
-        height: 1.5em;
-
-        white-space: nowrap;
-        word-wrap: none;
-        text-overflow: ellipsis;
-    }
-
-    ul.frames .method {
-        color: #966;
-    }
-
-    ul.frames .location {
-        font-size: 0.85em;
-        font-weight: 400;
-        color: #999;
-    }
-
-    ul.frames .line {
-        font-weight: bold;
-    }
-
-    /* Selected frame */
-    ul.frames li.selected {
-        background: #38a;
-        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.01), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-    }
-
-    ul.frames li.selected .name,
-    ul.frames li.selected .method,
-    ul.frames li.selected .location {
-        color: white;
-        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-    }
-
-    ul.frames li.selected .location {
-        opacity: 0.6;
-    }
-
-    /* Iconography */
-    ul.frames li {
-        padding-left: 60px;
-        position: relative;
-    }
-
-    ul.frames li .icon {
-        display: block;
-        width: 20px;
-        height: 20px;
-        line-height: 20px;
-        border-radius: 15px;
-
-        text-align: center;
-
-        background: white;
-        border: solid 2px #ccc;
-
-        font-size: 9pt;
-        font-weight: 200;
-        font-style: normal;
-
-        position: absolute;
-        top: 14px;
-        left: 20px;
-    }
-
-    ul.frames .icon.application {
-        background: #808090;
-        border-color: #555;
-    }
-
-    ul.frames .icon.application:before {
-        content: 'A';
-        color: white;
-        text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-    }
-
-    /* Responsiveness -- flow to single-line mode */
-    @media screen and (max-width: 1100px) {
-        ul.frames li {
-            padding-top: 6px;
-            padding-bottom: 6px;
-            padding-left: 36px;
-            line-height: 1.3;
-        }
-
-        ul.frames li .icon {
-            width: 11px;
-            height: 11px;
-            line-height: 11px;
-
-            top: 7px;
-            left: 10px;
-            font-size: 5pt;
-        }
-
-        ul.frames .name,
-        ul.frames .location {
-            display: inline-block;
-            line-height: 1.3;
-            height: 1.3em;
-        }
-
-        ul.frames .name {
-            margin-right: 10px;
-        }
-    }
-
-    /* ---------------------------------------------------------------------
-     * Monospace
-     * --------------------------------------------------------------------- */
-
-    pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums {
-        font-family: menlo, lucida console, monospace;
-        font-size: 8pt;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Display area
-     * --------------------------------------------------------------------- */
-
-    .trace_info {
-        background: #fff;
-        padding: 6px;
-        border-radius: 3px;
-        margin-bottom: 2px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.03), 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(0, 0, 0, 0.04);
-    }
-
-    .code_block{
-        background: #f1f1f1;
-        border-left: 1px solid #ccc;
-    }
-
-    /* Titlebar */
-    .trace_info .title {
-        background: #f1f1f1;
-
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
-        overflow: hidden;
-        padding: 6px 10px;
-
-        border: solid 1px #ccc;
-        border-bottom: 0;
-
-        border-top-left-radius: 2px;
-        border-top-right-radius: 2px;
-    }
-
-    .trace_info .title .name,
-    .trace_info .title .location {
-        font-size: 9pt;
-        line-height: 26px;
-        height: 26px;
-        overflow: hidden;
-    }
-
-    .trace_info .title .location {
-        float: left;
-        font-weight: bold;
-        font-size: 10pt;
-    }
-
-    .trace_info .title .location a {
-        color:inherit;
-        text-decoration:none;
-        border-bottom:1px solid #aaaaaa;
-    }
-
-    .trace_info .title .location a:hover {
-        border-color:#666666;
-    }
-
-    .trace_info .title .name {
-        float: right;
-        font-weight: 200;
-    }
-
-    .code, .be-console, .unavailable {
-        background: #fff;
-        padding: 5px;
-
-        box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-    }
-
-    .code_linenums{
-        background:#f1f1f1;
-        padding-top:10px;
-        padding-bottom:9px;
-        float:left;
-    }
-
-    .code_linenums span{
-        display:block;
-        padding:0 12px;
-    }
-
-    .code {
-        margin-bottom: -1px;
-        border-top-left-radius:2px;
-        padding: 10px 0;
-        overflow: auto;
-    }
-
-    .code pre{
-        padding-left:12px;
-        min-height:16px;
-    }
-
-    /* Source unavailable */
-    p.unavailable {
-        padding: 20px 0 40px 0;
-        text-align: center;
-        color: #b99;
-        font-weight: bold;
-    }
-
-    p.unavailable:before {
-        content: '\00d7';
-        display: block;
-
-        color: #daa;
-
-        text-align: center;
-        font-size: 40pt;
-        font-weight: normal;
-        margin-bottom: -10px;
-    }
-
-    @-webkit-keyframes highlight {
-        0%   { background: rgba(220, 30, 30, 0.3); }
-        100% { background: rgba(220, 30, 30, 0.1); }
-    }
-    @-moz-keyframes highlight {
-        0%   { background: rgba(220, 30, 30, 0.3); }
-        100% { background: rgba(220, 30, 30, 0.1); }
-    }
-    @keyframes highlight {
-        0%   { background: rgba(220, 30, 30, 0.3); }
-        100% { background: rgba(220, 30, 30, 0.1); }
-    }
-
-    .code .highlight, .code_linenums .highlight {
-        background: rgba(220, 30, 30, 0.1);
-        -webkit-animation: highlight 400ms linear 1;
-        -moz-animation: highlight 400ms linear 1;
-        animation: highlight 400ms linear 1;
-    }
-
-    /* REPL shell */
-    .be-console {
-        padding: 0 1px 10px 1px;
-        border-bottom-left-radius: 2px;
-        border-bottom-right-radius: 2px;
-    }
-
-    .be-console pre {
-        padding: 10px 10px 0 10px;
-        max-height: 400px;
-        overflow-x: none;
-        overflow-y: auto;
-        margin-bottom: -3px;
-        word-wrap: break-word;
-        white-space: pre-wrap;
-    }
-
-    /* .command-line > span + input */
-    .be-console .command-line {
-        display: table;
-        width: 100%;
-    }
-
-    .be-console .command-line span,
-    .be-console .command-line input {
-        display: table-cell;
-    }
-
-    .be-console .command-line span {
-        width: 1%;
-        padding-right: 5px;
-        padding-left: 10px;
-        white-space: pre;
-    }
-
-    .be-console .command-line input {
-        width: 99%;
-    }
-
-    /* Input box */
-    .be-console input,
-    .be-console input:focus {
-        outline: 0;
-        border: 0;
-        padding: 0;
-        background: transparent;
-        margin: 0;
-    }
-
-    /* Hint text */
-    .hint {
-        margin: 15px 0 20px 0;
-        font-size: 8pt;
-        color: #8080a0;
-        padding-left: 20px;
-    }
-
-    .hint:before {
-        content: '\25b2';
-        margin-right: 5px;
-        opacity: 0.5;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Variable infos
-     * --------------------------------------------------------------------- */
-
-    .sub {
-        padding: 10px 0;
-        margin: 10px 0;
-    }
-
-    .sub:before {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 4px;
-
-        border-radius: 2px;
-        background: rgba(0, 150, 200, 0.05);
-        box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.04), inset 2px 2px 2px rgba(0, 0, 0, 0.07);
-    }
-
-    .sub h3 {
-        color: #39a;
-        font-size: 1.1em;
-        margin: 10px 0;
-        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-
-        -webkit-font-smoothing: antialiased;
-    }
-
-    .sub .inset {
-        overflow-y: auto;
-    }
-
-    .sub table {
-        table-layout: fixed;
-    }
-
-    .sub table td {
-        border-top: dotted 1px #ddd;
-        padding: 7px 1px;
-    }
-
-    .sub table td.name {
-        width: 150px;
-
-        font-weight: bold;
-        font-size: 0.8em;
-        padding-right: 20px;
-
-        word-wrap: break-word;
-    }
-
-    .sub table td pre {
-        max-height: 15em;
-        overflow-y: auto;
-    }
-
-    .sub table td pre {
-        width: 100%;
-
-        word-wrap: break-word;
-        white-space: normal;
-    }
-
-    /* "(object doesn't support inspect)" */
-    .sub .unsupported {
-      font-family: sans-serif;
-      color: #777;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Scrollbar
-     * --------------------------------------------------------------------- */
-
-    nav.sidebar::-webkit-scrollbar,
-    .inset pre::-webkit-scrollbar,
-    .be-console pre::-webkit-scrollbar,
-    .code::-webkit-scrollbar {
-        width: 10px;
-        height: 10px;
-    }
-
-    .inset pre::-webkit-scrollbar-thumb,
-    .be-console pre::-webkit-scrollbar-thumb,
-    .code::-webkit-scrollbar-thumb {
-        background: #ccc;
-        border-radius: 5px;
-    }
-
-    nav.sidebar::-webkit-scrollbar-thumb {
-        background: rgba(0, 0, 0, 0.0);
-        border-radius: 5px;
-    }
-
-    nav.sidebar:hover::-webkit-scrollbar-thumb {
-        background-color: #999;
-        background: -webkit-linear-gradient(left, #aaa, #999);
-    }
-
-    .be-console pre:hover::-webkit-scrollbar-thumb,
-    .inset pre:hover::-webkit-scrollbar-thumb,
-    .code:hover::-webkit-scrollbar-thumb {
-        background: #888;
-    }
-    </style>
+    <%== ErrorPageStyle.style_tag(csp_nonce) %>
 
     <%# IE8 compatibility crap %>
-    <script>
+    <script nonce="<%= csp_nonce %>">
     (function() {
         var elements = ["section", "nav", "header", "footer", "audio"];
         for (var i = 0; i < elements.length; i++) {
@@ -723,7 +23,7 @@
       rendered in the host app's layout. Let's empty out the styles of the
       host app.
     %>
-    <script>
+    <script nonce="<%= csp_nonce %>">
       if (window.Turbolinks) {
           for(var i=0; i < document.styleSheets.length; i++) {
               if(document.styleSheets[i].href)
@@ -748,6 +48,15 @@
       }
     </script>
 
+    <p class='no-inline-style-notice'>
+        <strong>
+            Better Errors can't apply inline style<span class='no-javascript-notice'> (or run Javascript)</span>,
+            possibly because you have a Content Security Policy along with Turbolinks.
+            But you can
+            <a href='/__better_errors' target="_blank">open the interactive console in a new tab/window</a>.
+        </strong>
+    </p>
+
     <div class='top'>
         <header class="exception">
             <h2><strong><%= exception_type %></strong> <span>at <%= request_path %></span></h2>
@@ -764,6 +73,9 @@
                     <% end %>
                 </div>
             <% end %>
+            <% if exception_hint %>
+              <h2>Hint: <%= exception_hint %></h2>
+            <% end %>
         </header>
     </div>
 
@@ -791,21 +103,37 @@
             </ul>
         </nav>
 
-        <% backtrace_frames.each_with_index do |frame, index| %>
-            <div class="frame_info" id="frame_info_<%= index %>" style="display:none;"></div>
-        <% end %>
+        <div class="frameInfos">
+            <div class="frame_info current" data-frame-idx="0">
+                <p class='no-javascript-notice'>
+                    Better Errors can't run Javascript here<span class='no-inline-style-notice'> (or apply inline style)</span>,
+                    possibly because you have a Content Security Policy along with Turbolinks.
+                    But you can
+                    <a href='/__better_errors' target="_blank">open the interactive console in a new tab/window</a>.
+                </p>
+                <!-- this is enough information to show something in case JS doesn't get to load -->
+                <%== ErrorPage.render_template('variable_info', first_frame_variable_info) %>
+            </div>
+        </div>
     </section>
 </body>
-<script>
+<script nonce="<%= csp_nonce %>">
 (function() {
 
     var OID = "<%= id %>";
     var csrfToken = "<%= csrf_token %>";
 
     var previousFrame = null;
-    var previousFrameInfo = null;
     var allFrames = document.querySelectorAll("ul.frames li");
-    var allFrameInfos = document.querySelectorAll(".frame_info");
+    var frameInfos = document.querySelector(".frameInfos");
+
+    document.querySelector('body').classList.remove("better-errors-javascript-not-loaded");
+    document.querySelector('body').classList.add("better-errors-javascript-loaded");
+
+    var noJSNotices = document.querySelectorAll('.no-javascript-notice');
+    for(var i = 0; i < noJSNotices.length; i++) {
+        noJSNotices[i].remove();
+    }
 
     function apiCall(method, opts, cb) {
         var req = new XMLHttpRequest();
@@ -825,6 +153,28 @@
         return html.replace(/&/, "&amp;").replace(/</g, "&lt;");
     }
 
+    function hasConsoleBeenUsedPreviously() {
+      return !!document.cookie.split('; ').find(function(cookie) {
+          return cookie.startsWith('BetterErrors-has-used-console=');
+      });
+    }
+
+    var consoleHasBeenUsed = hasConsoleBeenUsedPreviously();
+
+    function consoleWasJustUsed() {
+        if (consoleHasBeenUsed) {
+            return;
+        }
+
+        hideConsoleHint();
+        consoleHasBeenUsed = true;
+        document.cookie = "BetterErrors-has-used-console=true;path=/;max-age=31536000;samesite"
+    }
+
+    function hideConsoleHint() {
+        document.querySelector('body').className += " console-has-been-used";
+    }
+
     function REPL(index) {
         this.index = index;
 
@@ -846,15 +196,20 @@
         this.inputElement   = this.container.querySelector("input");
         this.outputElement  = this.container.querySelector("pre");
 
+        if (consoleHasBeenUsed) {
+            hideConsoleHint();
+        }
+
         var self = this;
         this.inputElement.onkeydown = function(ev) {
             self.onKeyDown(ev);
+            consoleWasJustUsed();
         };
 
         this.setPrompt(">>");
 
         REPL.all[this.index] = this;
-    }
+    };
 
     REPL.prototype.focus = function() {
         this.inputElement.focus();
@@ -894,7 +249,7 @@
                 self.writeOutput(response.error + "\n");
             }
             self.writeOutput(self._prompt + " ");
-            self.writeRawOutput(response.highlighted_input + "\n");
+            self.writeRawOutput("<span class='syntax-highlighted'>" + response.highlighted_input + "</span>\n");
             self.writeOutput(response.result);
             self.setPrompt(response.prompt);
             self.setInput(response.prefilled_input);
@@ -952,17 +307,25 @@
     };
 
     function switchTo(el) {
-        if(previousFrameInfo) previousFrameInfo.style.display = "none";
-        previousFrameInfo = el;
+        var currentFrameInfo = document.querySelectorAll('.frame_info.current');
+        for(var i = 0; i < currentFrameInfo.length; i++) {
+            currentFrameInfo[i].className = "frame_info";
+        }
 
-        el.style.display = "block";
+        el.className = "frame_info current";
 
         var replInput = el.querySelector('.be-console input');
         if (replInput) replInput.focus();
     }
 
     function selectFrameInfo(index) {
-        var el = allFrameInfos[index];
+        var el = document.querySelector(".frame_info[data-frame-idx='" + index + "']")
+        if (!el) {
+          el = document.createElement("div");
+          el.className = "frame_info";
+          el.setAttribute('data-frame-idx', index);
+          frameInfos.appendChild(el);
+        }
         if(el) {
             if (el.loaded) {
                 return switchTo(el);