+3

Custom Error Pages trong Rails

Introduction

Khi tạo project Rails, mặc đinh sẽ có các error pages: 404 (file not found), 422 (unprocessable entity), and 500 (internal server error) sẵn. Nó nằm ở trong thư mục public: 404.html, 422.html, and 500.html. Bài này mình sẽ giới thiệu về cách tạo các error page riêng thay page default của nó.

Code Changes

  • Đầu tiên, bạn nên xoá các error pages mặc định đi tránh có sự conflict xảy ra.
  • Modify application.rbfile: để cho rails biết là sẽ không dùng error page mặc định nữa mà sẽ sử dụng routes.
# config/application.rb
config.exceptions_app = self.routes
  • Modify routes.rb như sau:
match "/404", to: "errors#file_not_found", via: :all
match "/422", to: "errors#unprocessable'" via: :all
match "/500", to: "errors#internal_server_error", via: :all

Ở đây mình sử dụng match thay vì get vì các error đó không phải chỉ là với method getmà cũng có thể method khác như post, put, ... nên ở đây thì dùng match với via: :alltức là nó sẽ đúng với mọi http method request.

  • Tạo controller như bình thường:
rails g controller Errors file_not_found unprocessable internal_server_error
#controllers/errors_controller.rb
class ErrorsController < ApplicationController
    def file_not_found
    end

    def unprocessable
    end

    def internal_server_error
    end
end
  • Modify view
#views/errors/file_not_found.html.erb    
<div class="error">
    <h2>Sorry, this page has moved, or doesn't exist!</h2>
</div>
#views/errors/unprocessable.html.erb    
<div class="error">
    <h2>422 error occurs.</h2>
</div>
#views/errors/internal_server_error.html.erb    
<div class="error">
    <%= image_tag("error/alert.png" :width => "150") %>
    <div class="message">
        <strong>Error!</strong>
        We're sorry, but our server is experiencing problems :(
    </div>
    <div class="contact_info">
        <%= link_to image_tag("error/contact/twitter.png"), "", :title => "Follow Updates On Twitter", :target => "_blank" %>
        <%= link_to image_tag("error/contact/facebook.png"), "http://www.facebook.com/", :title => "See Progress On Facebook", :target => "_blank" %>
        <%= link_to image_tag("error/contact/fusion.png"), "", :title => "Catch Our Fusion Feed Updates", :target => "_blank"  %>
        <%= link_to image_tag("error/contact/instagram.png"), "", :title => "See Updates On Instagram", :target => "_blank"  %>
        <%= link_to image_tag("error/contact/youtube.png"), "", :title => "See Updates On YouTube", :target => "_blank"  %>
    </div>
</div>

Verify trong development

Các error pages này chỉ hiển thị lên với môi trường production thôi, còn ở trong development sẽ không. Để biết là code của mình ở trên có chạy đúng hay không, bạn cũng có thể test luôn ở trong development như sau:

#config/development.rb
config.consider_all_requests_local = false

Restart server và thử lại, bạn sẽ nhận được các error page mà minh vừa customize.

References: http://easyactiverecord.com/blog/2014/08/19/redirecting-to-custom-404-and-500-pages-in-rails/ http://blog.grepruby.com/2015/04/custom-error-pages-with-rails-4.html https://thepugautomatic.com/2014/08/404-with-rails-4/


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.