在sentry.io创建账号，并按照文档接入相关 API。

以 vue 项目为例：

1. 首先安装第三方插件 @sentry/vue：

yarn add @sentry/vue

2. 配置上述 SDK：

import Vue from "vue";
import Router from "vue-router";
import * as Sentry from "@sentry/vue";

Vue.use(Router);

const router = new Router({
  // ...
});

Sentry.init({
  Vue,
  dsn: "https://71b9df1545ea5dace43ae53e40fc38c3@o4507303699808256.ingest.us.sentry.io/4507304161705984",
  integrations: [
    // 性能监控
    Sentry.browserTracingIntegration(),
    // 错误重播
    Sentry.replayIntegration(),
  ],
  // Performance Monitoring
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
  // Session Replay
  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

3. 为了在控制台更好的分析错误来源，需要将 source map 上传到 sentry 平台。此处利用 sentry 提供的 @sentry/wizard 工具，将上传集成到 webpack 等工具打包过程中。直接执行下述代码，按照指引操作：

npx @sentry/wizard@latest -i sourcemaps