Scroll to top
Tùy biến trang lỗi 404, 500 trong Ruby on Rails

Tùy biến trang lỗi 404, 500 trong Ruby on Rails

ByYuto 12/10/2024 00:09
6min read

Vì sao phải tùy biến trang lỗi 404 và 500? Tìm hiểu lý do cần phải có trang lỗi 404 và 500 đẹp mắt, hướng dẫn cách tạo trang lỗi 404 và 500 để cải thiện trải nghiệm người dùng và nâng cao thương hiệu.

Trang lỗi tiêu chuẩn trong Ruby on Rails

Khi có lỗi xảy ra thì trang thông báo lỗi sẽ được hiển thị đến người dùng. Trong Ruby on Rails, có nhiều trang lỗi tiêu chuẩn được cung cấp cho các loại lỗi khác nhau.

Lỗi 400 cho biết có lỗi từ phía người dùng, thường là do yêu cầu của người dùng không chính xác. Ngược lại, lỗi 500 cho biết có lỗi từ phía máy chủ, thường là do ứng dụng gặp sự cố khi xử lý yêu cầu.

Trang lỗi mặc định của Rails như sau:

Trang lỗi 404 mặc định

Tùy biến trang lỗi 404, 500 trong Ruby on Rails

Trang lỗi 50x mặc định

Tùy biến trang lỗi 404, 500 trong Ruby on Rails

Tại sao cần phải tùy biến trang lỗi

Sử dụng trang lỗi tùy chỉnh có thể cải thiện trải nghiệm người dùng. Ví dụ, bạn có thể cung cấp thiết kế phù hợp với phong cách thương hiệu hoặc cung cấp thông tin hữu ích về những gì người dùng nên làm tiếp theo.

Cách tạo trang lỗi 404 tùy chỉnh trong Ruby on Rails

Quy trình tạo trang lỗi 404 tùy chỉnh rất đơn giản. Dưới đây là đoạn mã cần thiết cho việc triển khai.

Đầu tiên, bạn cần thiết lập layout cho trang lỗi. Nội dung chỉ cần = yield là đủ

app/views/layouts/error.html.slim
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
doctype html

html lang='en'
  head
    meta charset='utf-8'
    meta name="viewport" content="width=device-width,initial-scale=1"

    title Error

    = csrf_meta_tags
    = csp_meta_tag
    = favicon_link_tag 'favicon.ico'

    = vite_client_tag
    = vite_javascript_tag 'application'

  body
    = yield

Tiếp theo, tạo một action quản lý trang lỗi và file view tương ứng.

app/controllers/application_controller.rb
Copy
1
2
3
4
5
6
7
8
class ApplicationController < ActionController::Base
  rescue_from ActiveRecord::RecordNotFound, with: :render404

  def render404(error = nil)
    Rails.logger.error("❌#{error.message}") if error
    render template: 'errors/error404', status: :not_found, layout: 'error'
  end
end

Tiếp theo, tạo file view cho trang lỗi 400. Nên thêm liên kết trở lại trang chủ, điều này sẽ hữu ích cho người dùng.

app/views/errors/error404.html.slim
Copy
1
2
3
4
div class="mt-12 flex flex-col space-y-8 items-center justify-center"
  div = image_tag 'system_icons/404.png'
  h1 class="text-red-700 text-xl md:text-3xl" Sorry! This page is not available.
  = link_to '<<< Back', root_path, class: 'text-xl text-blue-500'

Cuối cùng, thiết lập router để trang lỗi mới hiển thị chính xác.

config/routes.rb
Copy
1
2
3
4
5
Rails.application.routes.draw do
  # ...

  get '*path', to: 'errors#render404' # <= Để ở cuối cùng
end

Thử kiểm tra bằng cách truy cập vào một trang không tồn tại, chẳng hạn như localhost:3000/fuu/bar, hoặc trang của một record không tồn tại, và bạn sẽ thấy trang lỗi 404 tùy chỉnh được hiển thị.

Tùy biến trang lỗi 404, 500 trong Ruby on Rails

Cách tạo trang lỗi 500 tùy chỉnh trong Ruby on Rails

Thêm action xử lý lỗi 500 vào application controller:

app/controllers/application_controller.rb
Copy
1
2
3
4
5
6
7
8
class ApplicationController < ActionController::Base
  rescue_from Exception, with: :render500

  def render500(error = nil)
    Rails.logger.error("❌#{error.message}") if error
    render template: 'errors/error500', status: :internal_server_error, layout: 'error'
  end
end

Tiếp theo là tạo thêm file view:

app/views/errors/error500.html.slim
Copy
1
2
3
4
5
div class="mt-12 flex flex-col space-y-8 items-center justify-center"
  div = image_tag 'system_icons/500.png'
  h1 class="text-red-700 text-xl md:text-3xl" Oops! Something went wrong
  p class="text-lg" Please be patient or try again later.
  = link_to '<<< Back', root_path, class: 'text-xl text-blue-500'

Khi có lỗi máy chủ, trang lỗi 500 tùy chỉnh sẽ được hiển thị.

Tùy biến trang lỗi 404, 500 trong Ruby on Rails

Lưu ý khi sử dụng rescue_from trong Ruby on Rails

rescue_from trong Ruby on Rails được thực thi theo thứ tự từ dưới lên. Do đó khi khai báo trong ApplicationController bạn phải theo thứ tự như sau, bởi vì Exception là class cấp cao nhất.

app/controllers/application_controller.rb
Copy
1
2
  rescue_from Exception, with: :render500                    # Thực thi thứ 2
  rescue_from ActiveRecord::RecordNotFound, with: :render404 # Thực thi đầu tiên
Đánh giá bài viết: 4.9/5 (18 đánh giá)
Bạn chưa đánh giá

Bình luận

Author
hoclaptrinh.io author
Tác giả:Yuto Yasunaga

Mình là một full stack developer, tốt nghiệp và làm việc tại Nhật Bản. Trang web này là nơi mình tổng hợp, đúc kết và lưu trữ lại những kiến thức trong quá trình học và làm việc liên quan đến IT.
Hy vọng những bài viết ở website này sẽ có ích cho bạn.