Khi phát triển ứng dụng chạy song song trên web (Next.js, Vite) và mobile (Expo, React Native CLI), việc theo dõi lỗi ở từng nền tảng riêng lẻ khiến đội ngũ dễ bỏ sót các sự cố quan trọng. Một hệ thống logging tập trung giúp: - Phát hiện sớm lỗi runtime trên cả hai môi trường. - So sánh tần suất và mức độ nghiêm trọng giữa web và mobile. - Giảm thời gian debug nhờ context đầy đủ (user ID, phiên bản app, thiết bị, stack trace). Kiến trúc đề xuất 1. Lớp abstraction logger: Tạo một module `logger.ts` export các hàm `info`, `warn`, `error`, `captureException`. Bên trong module quyết định gửi log đến Sentry, LogRocket hoặc console tùy theo `process.env.NODE_ENV` và `Platform.OS`. 2. Cấu hình Sentry cho từng platform: - Web: `@sentry/nextjs` (hoặc `@sentry/react` cho Vite) với `dsn` từ biến môi trường. - Mobile: `@sentry/react-native` kết hợp `expo-sentry` để tự động upload source map khi build EAS. 3. Enrichment tự động: Gắn thêm `release`, `environment`, `user.id`, `device.model`, `app.version` vào mọi event trước khi gửi. 4. Error Boundary chung: Viết component `ErrorBoundary` dùng `componentDidCatch` (class) hoặc `useErrorHandler` (hook) để bắt lỗi render, sau đó gọi `logger.captureException(error, { componentStack })`. Trên React Native dùng `react-native-error-boundary` với cùng interface. 5. Centralized log viewer: Sentry dashboard cho phép filter theo `platform`, `release`, `environment`. Thiết lập alert khi error rate vượt ngưỡng (ví dụ >1% sessions trong 5 phút). Các bước triển khai nhanh - Cài đặt package: `yarn add @sentry/nextjs @sentry/react-native expo-sentry` (hoặc tương đương npm). - Tạo file `src/utils/logger.ts` với logic điều hướng platform. - Bọc root component của web (`_app.tsx`) và mobile (`App.tsx`) bằng `ErrorBoundary` và gọi `Sentry.init` ở entry point. - Thêm script CI/CD upload source map: `sentry-cli releases files <release> upload-sourcemaps ./build` cho web và `eas build --profile production --auto-submit` cho mobile. - Cấu hình alert rule trong Sentry: `platform:web OR platform:react-native` và `event.type:error`. Lời khuyên thực tế - Luôn test error boundary bằng cách ném lỗi chủ động (`throw new Error('test')`) trên cả hai nền tảng trước khi release. - Giữ source map private: chỉ upload lên Sentry, không commit vào repo. - Sử dụng `breadcrumb` để ghi lại hành động người dùng (navigation, API call) giúp tái hiện bug nhanh hơn. - Định kỳ review dashboard hàng tuần, phân loại lỗi theo `tags` (network, ui, logic) để ưu tiên fix. Với cách tiếp cận này, đội ngũ có cái nhìn toàn cảnh về sức khỏe ứng dụng, giảm thiểu thời gian phản hồi sự cố và duy trì trải nghiệm người dùng mượt mà trên mọi thiết bị.