nuxt 使用sentry

npm install --save @sentry/vue @sentry/tracing

1. 创建 src/plugins/sentry.js 并填写以下内容

import Vue from 'vue'
import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";
Sentry.init({
  Vue,
  dsn: process.env.SENTRY_DSN, // 如果传空或不传则不会上报任何 Sentry 错误
  integrations: [
    new BrowserTracing({
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
})

export default (_, inject) => {
  inject('sentry', Sentry)
}

2.配置 nuxt.config.js

  plugins: [
  '@/plugins/sentry',
  ],

 env: {
  SENTRY_DSN: process.env.SENTRY_DSN,
  },

3.在根目录创建.env文件

SENTRY_DSN= 你的DSN

上传sourceMap
1.安装npm install @sentry/webpack-plugin（下载失败运行npm i @sentry/cli@1.72.0 --ignore-scripts 先安装，再重新install一遍）
2.创建.sentryclirc文件

[defaults]
url=sentry服务器地址
org=你的org
project=你的project

[auth]
token=你的token

3.修改webpack配置
nuxt.config.js

const glob = require('glob')
const { removeSync } = require('fs-extra')
const SentryWebpackPlugin = require('@sentry/webpack-plugin')

export default {
  build: {
    extend(config, ctx) {
      
      /** 引入打包时自动上传sourcemap的插件 */
      const { isDev, isClient } = ctx
      if (!isDev &&isClient&& process.env.SENTRY_AUTH_TOKEN) {
        if (isClient) config.devtool = 'hidden-source-map'
        const path = config.output.publicPath
        config.plugins.push(
          new SentryWebpackPlugin({
            include: ['.nuxt/dist/client'],
            ignore: ['node_modules', '.nuxt/dist/client/fonts','.nuxt/dist/server'],
            urlPrefix: path.startsWith('/') ? `~${path}` : path,
              configFile: './.sentryclirc'   // 指定sentry上传配置
          }),
          // 构建完后删除 source map 文件的简易插件
          {
            apply: (compiler) => {
              compiler.hooks.done.tap('CleanJsMapPlugin', () => {
                glob
                  .sync('.nuxt/dist/**/*.js.map')
                  .forEach((f) => removeSync(f))
              })
            },
          },
        )
      }
      
    }
  }
}

3.配置环境变量
打开根目录下的.env文件并输入以下内容

SENTRY_DSN=你的dsn
# 相关认证信息
SENTRY_AUTH_TOKEN=你的token
SENTRY_ORG=你的organization
SENTRY_PROJECT=你的project

token

org组织名称

project项目名称

参考链接
nuxt配置sentry
从零构建Sentry v10 进行异常上报
使用@sentry/webpack-plugin上传SourceMap
前端异常监控平台之Sentry落地
Sentry For Vue 完整接入详解