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

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

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

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à đủ

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.

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.

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.

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ị.

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:

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:

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ị.

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.

1
2
  rescue_from Exception, with: :render500                    # Thực thi thứ 2
  rescue_from ActiveRecord::RecordNotFound, with: :render404 # Thực thi đầu tiên