Vue
要將 Sentry 與 Vue 應用程序一起使用，您將需要使用 Sentry 的 Vue SDK：@sentry/vue.
npm install --save @sentry/vue # or yarn add @sentry/vue
@sentry/vue 會自行報告由您的應用程序觸發的任何未捕獲的異常。
此外，SDK 將捕獲引發錯誤的活動組件的名稱和屬性狀態。這是通過 Vue 的 config.errorHandler hook 報告的。
然後將其添加到您的 app.js 中：
import Vue from "vue"; import * as Sentry from '@sentry/vue'; Sentry.init({ Vue: Vue, dsn: '__PUBLIC_DSN__', });
此外，SDK 接受一些不同的配置選項，可用於更改其行為：
- 傳入
Vue是可選的，如果不傳入，window.Vue必須存在。 - 傳入
attachProps是可選的，如果未提供，則為true。如果將其設置為false，Sentry 將禁止發送所有 Vue 組件的屬性進行記錄。 - 傳入
logErrors是可選的，如果未提供，則為false。如果將其設置為true，Sentry 也將調用原始 Vue 的logError函數。
Vue 錯誤處理
請注意，如果啟用 SDK，Vue 將不會在內部調用其
logError。這意味著在 Vue renderer 中發生的錯誤將不會顯示在開發人員控制檯中。如果要保留此功能，請確保傳遞logErrors: true選項。
如果您使用的是 CDN 版本或 Loader，我們為每個集成提供一個獨立的文件，您可以像這樣使用它：
<script src="https://browser.sentry-cdn.com/5.29.2/vue.min.js" integrity="sha384-FKagncFah3a9nkKNEIDQqXhYnny5Wzc37/AZV5eKKnRVS8uPpeFPdu9dnrvAnRpF" crossorigin="anonymous" ></script> <script> Sentry.init({ Vue, dsn: "https://[email protected]/0", }); </script>
監控性能
npm install --save @sentry/vue @sentry/tracing # or yarn add @sentry/vue @sentry/tracing
跟蹤 Vue 應用程序的最基本配置（僅跟蹤頂級組件）如下所示：
import Vue from "vue"; import * as Sentry from "@sentry/browser"; import { Integrations } from "@sentry/tracing"; Sentry.init({ // ... integrations: [ new Integrations.BrowserTracing(), ], // 我們建議在生產中調整此值，或使用 tracesSampler 進行更精細的控制 tracesSampleRate: 1.0, });
如果要跟蹤子組件，並查看有關渲染過程的更多詳細信息，請配置集成以跟蹤所有子組件：
Sentry.init({ Vue, tracingOptions: { trackComponents: true, }, });