Skip to content
This repository
Browse code

Dynamic error pages, closes #26

  • Loading branch information...
commit 5c2df5a108ad204bc407183b959bb355ff5ed53d 1 parent 2eb1ea0
Adam Stankiewicz authored August 18, 2013
40  app/controllers/errors_controller.rb
... ...
@@ -0,0 +1,40 @@
  1
+class ErrorsController < ActionController::Base
  2
+
  3
+  # Because we don't inherit from ApplicationController
  4
+  layout 'error'
  5
+
  6
+  # You can use these method in views
  7
+  helper_method :status_code, :status_name, :error_message
  8
+
  9
+  # You can edit format.json for proper API response format.
  10
+  def show
  11
+    custom_template = template_exists?(status_code, 'errors')
  12
+
  13
+    respond_to do |format|
  14
+      format.html { render action: custom_template ? status_code.to_s : 'show' }
  15
+      format.json { render json: { status: status_code, message: error_message } }
  16
+    end
  17
+  end
  18
+
  19
+  protected
  20
+
  21
+  def status_code
  22
+    (request.path.match(/\d{3}/) || ['500'])[0].to_i
  23
+  end
  24
+
  25
+  def status_name
  26
+    Rack::Utils::HTTP_STATUS_CODES.fetch(status_code, "Internal Server Error")
  27
+  end
  28
+
  29
+  def error_message
  30
+    if status_code != 500 && exception
  31
+      exception.message
  32
+    else
  33
+      "Our administrator has been notified about this event."
  34
+    end
  35
+  end
  36
+
  37
+  def exception
  38
+    env['action_dispatch.exception']
  39
+  end
  40
+end
4  app/views/errors/500.slim
... ...
@@ -0,0 +1,4 @@
  1
+/ An example of custom error page.
  2
+.dialog
  3
+  h1 We're sorry, but something went wrong.
  4
+p If you are the application owner check the logs for more information.
6  app/views/errors/show.slim
... ...
@@ -0,0 +1,6 @@
  1
+/ Generic template for errors
  2
+.dialog
  3
+  h1
  4
+    = Rack::Utils::HTTP_STATUS_CODES[status_code] || "Internal Server Error"
  5
+    = " (#{status_code})"
  6
+p= error_message
48  app/views/layouts/error.slim
... ...
@@ -0,0 +1,48 @@
  1
+doctype
  2
+html
  3
+  head
  4
+    title We're sorry, but something went wrong (500)
  5
+    css:
  6
+      body {
  7
+        background-color: #EFEFEF;
  8
+        color: #2E2F30;
  9
+        text-align: center;
  10
+        font-family: arial, sans-serif;
  11
+      }
  12
+
  13
+      div.dialog {
  14
+        width: 25em;
  15
+        margin: 4em auto 0 auto;
  16
+        border: 1px solid #CCC;
  17
+        border-right-color: #999;
  18
+        border-left-color: #999;
  19
+        border-bottom-color: #BBB;
  20
+        border-top: #B00100 solid 4px;
  21
+        border-top-left-radius: 9px;
  22
+        border-top-right-radius: 9px;
  23
+        background-color: white;
  24
+        padding: 7px 4em 0 4em;
  25
+      }
  26
+
  27
+      h1 {
  28
+        font-size: 100%;
  29
+        color: #730E15;
  30
+        line-height: 1.5em;
  31
+      }
  32
+
  33
+      body > p {
  34
+        width: 31em;
  35
+        margin: 0 auto 1em;
  36
+        padding: 1em;
  37
+        background-color: #F7F7F7;
  38
+        border: 1px solid #CCC;
  39
+        border-right-color: #999;
  40
+        border-bottom-color: #999;
  41
+        border-bottom-left-radius: 4px;
  42
+        border-bottom-right-radius: 4px;
  43
+        border-top-color: #DADADA;
  44
+        color: #666;
  45
+        box-shadow:0 3px 8px rgba(50, 50, 50, 0.17);
  46
+      }
  47
+  body
  48
+    = yield
2  config/application.rb
@@ -13,4 +13,6 @@ class Application < Rails::Application
13 13
     g.javascripts = false
14 14
     g.helper = false
15 15
   end
  16
+
  17
+  config.exceptions_app = self.routes
16 18
 end
5  config/routes.rb
@@ -53,4 +53,9 @@
53 53
   #     # (app/controllers/admin/products_controller.rb)
54 54
   #     resources :products
55 55
   #   end
  56
+  
  57
+  match '(errors)/:status', to: 'errors#show',
  58
+    constraints: { status: /\d{3}/ },
  59
+    defaults: { status: '500' },
  60
+    via: :all
56 61
 end
58  public/404.html
... ...
@@ -1,58 +0,0 @@
1  
-<!DOCTYPE html>
2  
-<html>
3  
-<head>
4  
-  <title>The page you were looking for doesn't exist (404)</title>
5  
-  <style>
6  
-  body {
7  
-    background-color: #EFEFEF;
8  
-    color: #2E2F30;
9  
-    text-align: center;
10  
-    font-family: arial, sans-serif;
11  
-  }
12  
-
13  
-  div.dialog {
14  
-    width: 25em;
15  
-    margin: 4em auto 0 auto;
16  
-    border: 1px solid #CCC;
17  
-    border-right-color: #999;
18  
-    border-left-color: #999;
19  
-    border-bottom-color: #BBB;
20  
-    border-top: #B00100 solid 4px;
21  
-    border-top-left-radius: 9px;
22  
-    border-top-right-radius: 9px;
23  
-    background-color: white;
24  
-    padding: 7px 4em 0 4em;
25  
-  }
26  
-
27  
-  h1 {
28  
-    font-size: 100%;
29  
-    color: #730E15;
30  
-    line-height: 1.5em;
31  
-  }
32  
-
33  
-  body > p {
34  
-    width: 33em;
35  
-    margin: 0 auto 1em;
36  
-    padding: 1em 0;
37  
-    background-color: #F7F7F7;
38  
-    border: 1px solid #CCC;
39  
-    border-right-color: #999;
40  
-    border-bottom-color: #999;
41  
-    border-bottom-left-radius: 4px;
42  
-    border-bottom-right-radius: 4px;
43  
-    border-top-color: #DADADA;
44  
-    color: #666;
45  
-    box-shadow:0 3px 8px rgba(50, 50, 50, 0.17);
46  
-  }
47  
-  </style>
48  
-</head>
49  
-
50  
-<body>
51  
-  <!-- This file lives in public/404.html -->
52  
-  <div class="dialog">
53  
-    <h1>The page you were looking for doesn't exist.</h1>
54  
-    <p>You may have mistyped the address or the page may have moved.</p>
55  
-  </div>
56  
-  <p>If you are the application owner check the logs for more information.</p>
57  
-</body>
58  
-</html>
58  public/422.html
... ...
@@ -1,58 +0,0 @@
1  
-<!DOCTYPE html>
2  
-<html>
3  
-<head>
4  
-  <title>The change you wanted was rejected (422)</title>
5  
-  <style>
6  
-  body {
7  
-    background-color: #EFEFEF;
8  
-    color: #2E2F30;
9  
-    text-align: center;
10  
-    font-family: arial, sans-serif;
11  
-  }
12  
-
13  
-  div.dialog {
14  
-    width: 25em;
15  
-    margin: 4em auto 0 auto;
16  
-    border: 1px solid #CCC;
17  
-    border-right-color: #999;
18  
-    border-left-color: #999;
19  
-    border-bottom-color: #BBB;
20  
-    border-top: #B00100 solid 4px;
21  
-    border-top-left-radius: 9px;
22  
-    border-top-right-radius: 9px;
23  
-    background-color: white;
24  
-    padding: 7px 4em 0 4em;
25  
-  }
26  
-
27  
-  h1 {
28  
-    font-size: 100%;
29  
-    color: #730E15;
30  
-    line-height: 1.5em;
31  
-  }
32  
-
33  
-  body > p {
34  
-    width: 33em;
35  
-    margin: 0 auto 1em;
36  
-    padding: 1em 0;
37  
-    background-color: #F7F7F7;
38  
-    border: 1px solid #CCC;
39  
-    border-right-color: #999;
40  
-    border-bottom-color: #999;
41  
-    border-bottom-left-radius: 4px;
42  
-    border-bottom-right-radius: 4px;
43  
-    border-top-color: #DADADA;
44  
-    color: #666;
45  
-    box-shadow:0 3px 8px rgba(50, 50, 50, 0.17);
46  
-  }
47  
-  </style>
48  
-</head>
49  
-
50  
-<body>
51  
-  <!-- This file lives in public/422.html -->
52  
-  <div class="dialog">
53  
-    <h1>The change you wanted was rejected.</h1>
54  
-    <p>Maybe you tried to change something you didn't have access to.</p>
55  
-  </div>
56  
-  <p>If you are the application owner check the logs for more information.</p>
57  
-</body>
58  
-</html>
57  public/500.html
... ...
@@ -1,57 +0,0 @@
1  
-<!DOCTYPE html>
2  
-<html>
3  
-<head>
4  
-  <title>We're sorry, but something went wrong (500)</title>
5  
-  <style>
6  
-  body {
7  
-    background-color: #EFEFEF;
8  
-    color: #2E2F30;
9  
-    text-align: center;
10  
-    font-family: arial, sans-serif;
11  
-  }
12  
-
13  
-  div.dialog {
14  
-    width: 25em;
15  
-    margin: 4em auto 0 auto;
16  
-    border: 1px solid #CCC;
17  
-    border-right-color: #999;
18  
-    border-left-color: #999;
19  
-    border-bottom-color: #BBB;
20  
-    border-top: #B00100 solid 4px;
21  
-    border-top-left-radius: 9px;
22  
-    border-top-right-radius: 9px;
23  
-    background-color: white;
24  
-    padding: 7px 4em 0 4em;
25  
-  }
26  
-
27  
-  h1 {
28  
-    font-size: 100%;
29  
-    color: #730E15;
30  
-    line-height: 1.5em;
31  
-  }
32  
-
33  
-  body > p {
34  
-    width: 33em;
35  
-    margin: 0 auto 1em;
36  
-    padding: 1em 0;
37  
-    background-color: #F7F7F7;
38  
-    border: 1px solid #CCC;
39  
-    border-right-color: #999;
40  
-    border-bottom-color: #999;
41  
-    border-bottom-left-radius: 4px;
42  
-    border-bottom-right-radius: 4px;
43  
-    border-top-color: #DADADA;
44  
-    color: #666;
45  
-    box-shadow:0 3px 8px rgba(50, 50, 50, 0.17);
46  
-  }
47  
-  </style>
48  
-</head>
49  
-
50  
-<body>
51  
-  <!-- This file lives in public/500.html -->
52  
-  <div class="dialog">
53  
-    <h1>We're sorry, but something went wrong.</h1>
54  
-  </div>
55  
-  <p>If you are the application owner check the logs for more information.</p>
56  
-</body>
57  
-</html>

3 notes on commit 5c2df5a

Richard Peck

This is great! But does it ensure stable error reporting? I've found if I got to http://mysite.com/404, it uses the old error pages still

Adam Stankiewicz
Owner

@richpeck Maybe you didn't remove html files. It works for me.

I've tested it with getsentry and it works. It also logs exceptions. I guess I can call it stable error reporting ;)

Richard Peck

@sheerun Thanks Adam :+1:

Please sign in to comment.
Something went wrong with that request. Please try again.