vite+vue3+sentry フロントエンド監視の統合

導入

最近、記録を作成して落とし穴を回避するために、プロジェクトのセントリー フロントエンド エラー監視に接続しました。

参考：https://docs.sentry.io/platforms/javascript/guides/vue/

統合された

// 用于收集 vue 项目中 错误信息
npm install --save @sentry/vue
// vite 插件 集成 sentry-cli 用于上传 sourceMap
npm install @sentry/vite-plugin --save-dev

Sentry バックグラウンドで vue プロジェクトを作成する

割り当てられた DSN を取得します。これは、後続のプロジェクト エラー レポートに使用されます。

main.tsで初期化される

vite設定ファイル

現時点では、プロジェクトの開始時にエラーを正常にアップロードできますが、本番環境ではエラーの特定の場所が特定できないため、パッケージ化の最後のステップでソースマップをアップロードする必要があります。

パッケージ構成

1. url: 要写成自己后端服务的地址 默认是 sass 免费版的地址 上传会报错
2. urlPrefix 很重要 需要根据项目部署的情况 去修改 不然sentry 后台 sourceMap 会失效

組織:

authToken は project:write 書き込み許可をオンにする必要があります