Sentry.io là gì? Tại sao lại cần dùng tới Sentry
Sentry.io là một ứng dụng giúp chúng ta tracking lại những error xảy ra bên trong ứng dụng trong quá trình người dùng sử dụng, gửi thông báo lỗi thông qua email, SMS.
Bạn đang xem: Sentry là gì
Trên trang chủ Sentry. io, nói rằng :
When your code breaks.Sentry is here to help you fix it.
Bạn đang đọc: Sử Dụng Sentry Là Gì
Mỗi developer viết ra hàng tấn các bugs, và không thể tránh khỏi có rất nhiều bugs còn tồn tại trên production. Sentry giúp bạn tìm ra những bugs đó trước khi customer nhận ra chúng.
Xem thêm: Photobucket Là Gì – Làm Thế Nào Để Xem Ảnh Trên Photobucket
Tạo một Organization mới trên Sentry.io
Đầu tiên những bạn vào đây để tạo 1 Organization cho những dự án Bất Động Sản của mình ,
Thêm Sentry vào dự án Laravel để ghi lại lỗi
sau khi tạo Organization xong, trang sẽ chuyển tới giao diện cho bạn tạo Project của mình. Có rất nhiều ngôn từ được Sentry tương hỗ, việc của bạn là chỉ cần chọn 1 cái, điền tên và Sentry sẽ đưa bạn tới giao diện hướng dẫn integration và phân phối cho bạn 1 DSN key để bạn sử dụng ở trong ứng dụng của mình .Laravel được tư vấn bởi Sentry trải qua package sentry-laravel, để sử dụng Sentry trong dự án Bất Động Sản bạn chỉ cần cài nói trải qua Composer :USD composer require sentry / sentry-laravel : 1.1.1 Nếu bạn đang dùng Laravel 5.5 trở lên thì bỏ lỡ bước này :
“providers” => array( // … Sentry\Laravel\ServiceProvider::class,)”aliases” => array( // … “Sentry” => Sentry\Laravel\Facade::class,)Thêm Sentry vào App/Exceptions/Handler.php để ứng dụng của bạn report tới Sentry.io mỗi khi có Exception xảy ra:
public function report ( Exception $ exception ) { if ( app ( ) -> bound ( ” sentry ” ) và và USD this -> shouldReport ( USD exception ) ) { app ( ” sentry ” ) -> captureException ( USD exception ) ; } parent :: report ( USD exception ) ; } Tạo file config của Sentry bằng commandUSD php artisan vendor : publish — provider = ” Sentry \ Laravel \ ServiceProvider ” return array ( ” dsn ” => env ( ” SENTRY_LARAVEL_DSN ” ), / / capture release as git sha / / ” release ” => trim ( exec ( ” git log — pretty = ” % h ” – n1 HEAD ” ) ), / / Capture bindings on SQL queries ” breadcrumbs. sql_bindings ” => true, / / Capture default user context ” user_context ” => true, ) ; Cuối cùng, bạn cần bổ trợ vào. env DSN key của dự án Bất Động Sản mà bạn đã tạo ở trên :SENTRY_LARAVEL_DSN = https:///xxxxxĐể kiểm tra xem Sentry đã nhận được lỗi trong ứng dụng Laravel chưa, bạn hoàn toàn có thể test bằng việc vào tạo 1 route throw ra 1 exception :Route :: get ( ” / debug-sentry “, function ( ) { throw new Exception ( ” Laravel Sentry error ! ” ) ; } ) ; và đây Sentry đã capture lại Exception vừa qua :
Thêm Sentry vào dự án React
Để sử dụng Sentry trong React, bạn sử dụng package
sentry/browserTrước kia, mỗi khi xảy ra một Javascript error trong 1 phần của UI, nó sẽ gây crash toàn bộ app. Để giải quyết vấn đề này cho React user, từ phiên bản 16 trở lên, React giới thiệu một concept mới Error Boundary. Error boundaries là một React component sẽ catch Javascript errors xảy ra bên trong các child component, log lại error và hiển thị lỗi ở phần UI đó thay vì crash toàn bộ app.
Xem thêm: Tổng Hợp Tất Tần Tật Các Trò Chơi Ở Vinpearl Nha Trang Đầy Đủ Nhất!
Sentry tận dụng nó để capture các error trên client.
Đầu tiên mình tạo 1 instance của Sentry :import Raven from ” raven-js ” import config from ” config / ” const SENTRY_DSN = ” https:///xxxxx”Raven.config ( SENTRY_DSN, { environment : ” local ” } ). install ( ) export default Ravenimport React, { Component } from ” react ” import sentry from ” sentry ” class ErrorBoundary extends Component { state = { eventId : null } componentDidCatch ( error, errorInfo ) { const eventId = sentry. captureException ( error, { extra : errorInfo } ) this. setState ( { eventId } ) } render ( ) { return this.props. errorStatus ? button onClick = { ( ) => sentry. showReportDialog ( { eventId : this.state. eventId } ) } > Report feedback / button > : this.props.children } } export default ErrorBoundaryCuối cùng bạn chỉ cần bọc hàng loạt những Component trong app của bạn bằng ErrorBoundary ở trên
import React, { Component } from “react”import ErrorBoundary from “ErrorBoundary”class App extends Component { render() { return ( ErrorBoundary> // Các component con /ErrorBoundary> ) }}export default App
Source: https://pokimobile.vn
Category: Hỏi Đáp