Sentry là dịch vụ tự động theo dõi và báo lỗi trong source code của chúng ta.

Bạn có thể đăng ký sử dụng gói free tại https://sentry.io/pricing/ .

Bài này mình sẽ trình bày cách deploy server sentry on-premise và upload sourcemaps lên server on-premise đó.

 

1. Tạo server sentry on-premise 

Download source code tại https://github.com/getsentry/onpremise

Yêu cầu hệ thống:

• OS: khuyên dùng Linux hoặc MAC, nếu dùng window phải cài trong WSL.
• Docker 19.03.6+
• Compose 1.24.1+
• RAM >= 3GB

Cấu hình docker máy càng nhiều càng tốt:

  

 

Sau khi download source code của sentry on-premise về, chạy lệnh bash install.sh trong terminal là server sẽ được tự động build cho bạn. Build thành công, terminal sẽ thông báo như sau:

----------------
You're all done! Run the following command to get Sentry running:

  docker-compose up -d

 

Khi terminal thông báo thành công, chạy docker-compose up -d để khởi động các docker của sentry, đợi khoảng 5 phút và truy cập vào http://localhost:9000 để sử dụng sentry server.

 

2. Upload source map lên sentry server

Sau khi tạo server on-premise xong, bạn có thể sẽ muốn upload sourcemaps của javascript để tránh phải public nó lên internet nhằm lý do bảo mật.

Để có thể upload source maps lên server, bạn cần phải có API token.

2.1. Authenticate sentry server từ local

• Click vào Sentry -> API keys:

    

• Ấn vào Create New Token để tạo API token:

     

• Tạo file ~/.sentryclirc với nội dung sau:

[auth]
token=84861d27b87345c4929878f6e7819abd42bdf4abfdaa493fb917e5652ca30c53
[defaults]
url=http://localhost:9000
org=sentry
project=react

Trong đó:

 token là API token bạn vừa tạo.

 url là url của sentry on-premise server. 

 org là organization trên sentry.

 project là tên project của bạn tạo trên sentry (cái này không cần cũng được)

Lưu xong file trên thì chạy lệnh sentry-cli info để kiểm tra đã authicate thành công chưa:

   

 

2.2. Upload source map lên sentry server

Với create-react-app:

• Install package:

// terminal
$ yarn add @sentry/react @sentry/tracing

 

• Tạo React project trên sentry server, lấy dsn token và cấu hình trong code như sau:

import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  dsn: "http://695f0ea89ddc4df09d63534e5470c767@localhost:9000/2",
  integrations: [
    new Integrations.BrowserTracing(),
  ],

  release: "test",
  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

Lưu ý: Để source map có thể hoạt động, bạn phải có trường release như trên, nếu không có nó, source map sẽ không hoạt động.

Sau khi đã cấu hình như trên, chạy lệnh sau để build production:

// terminal
$ yarn build

 

• Tạo release version tên là test trên server và upload source maps:

// terminal
$ sentry-cli releases new test
$ sentry-cli releases files test upload-sourcemaps build/ --rewrite

Sau khi chạy xong 2 câu lệnh trên, truy cập vào http://localhost:9000/settings/sentry/projects/react/source-maps/test/ (url này khác nhau với tên project và tên release khác nhau) để xem kết quả:

  

 

Bạn có thể xoá .map file trong /build/static/js folder và chạy production với câu lệnh sau:

// terminal
$ yarn add -g serve
$ serve -s build

Truy cập vào http://localhost:5000 để xem project của bạn đang chạy ở bản production.

Thế là xong, nếu http://localhost:5000 của bạn phát sinh ra lỗi trong code, lỗi đó sẽ được tự động ném lên sentry server cho bạn: