Nuxt项目接入Sentry监控

1.在Sentry平台新建项目

步骤：Projects→ Create Project→ 选择平台（Vue） → 设置提醒规则（选做）→ 设置Project name、Project所属Team→ 点击
Create Project
获取项目的dsn，后面有用

2.下载sentry-module

npm install @nuxtjs/sentry

3. 在nuxt.config.js中的modules数组中添加@nuxtjs/sentry，用于将$sentry注入nuxt实例

// nuxt.config.js
{
  // ...
  modules: [
    '@nuxtjs/sentry',
  ],
  // ...
}

4. 继续在nuxt.config.js中添加sentry字段，用于添加针对sentry的配置

可用配置文档：github.com/nuxt-commun…

// oneos
// nuxt.config.js
{
    // ...
    sentry: {
      dsn: 'http://xxxxxxxxxxxxxxxx@x.x.x.x:9000/1',
      tracing: {
        tracesSampleRate: 1.0,
        vueOptions: {
        tracing: true,
        tracingOptions: {
          hooks: ['mount', 'update'],
          timeout: 2000,
          trackComponents: true,
      	},
      },
      browserOptions: {},
    },
    clientIntegrations: {
      Vue: {
        attachProps: true, // 允许Sentry上报Vue组件Props
        logErrors: true, // 引入Sentry SDK后，默认不会将报错打印到控制台，将logErrors设为true强制将报错打印到控制台
      },
    },
    config: {
      environment: process.env.NODE_ENV === 'prod'? 'production' : 'development',
    },
  },
  // ...
}

dsn（data source name）

当在Sentry平台新建一个project后，Sentry会自动为该project分配一个dsn
dsn用于告诉Sentry将event发送到哪里
如果不设置dsn，Sentry也不会发送event
dsn遵从下面的格式

{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}{PATH}/{PROJECT_ID}

dsn查看步骤：Settings→ Projects→ 选择你的项目→ Client Keys (DSN)

tracing

用于开启性能监控
详细配置介绍：github.com/nuxt-commun…

config

用于声明其他Sentry配置
详细配置介绍：docs.sentry.io/platforms/j…

5. 下载Sentry Webpack Plugin，用于在构建过程中将sourceMap上传至Sentry平台

npm install @sentry/webpack-plugin --save-dev

*sourceMap用于将压缩后的代码恢复为源代码，更方便我们定位错误

6. 在nuxt.config.js中启用sourceMap，在构建过程中生成sourceMap文件

// nuxt.config.js
{
  // ...
  build: {
    // ...
    extend(config, { isClient }) {
      if (isClient) {
      	config.devtool = 'hidden-source-map', // 避免在生成的js文件末尾添加sourcemap引用
      }
    },
    // ...
  }
  // ...
}

7. 在nuxt.config.js中添加Sentry Webpack Plugin相关配置

// nuxt.config.js
{
  // ...
  build: {
    // ...
    plugins: [
      // ...
      new SentryWebpackPlugin({
        url: 'http://x.x.x.x:9000/',
        authToken: 'xxxxxxxxxxxxxxxxxxxx',
        org: '组织名',
        project: '项目名',
        include: '.nuxt/dist/client',
        urlPrefix: '~/_nuxt/',
        ignore: ['node_modules', 'webpack.config.js'],
      }),
    ],
    // ...
  }
  // ...
}

详细配置文档：github.com/getsentry/s…

url

Sentry服务的base url

authToken

用于Sentry平台鉴权，需要该token包含对相应资源的操作权限
生成步骤：Settings→ Account→ API→ Auth Tokens→ Create New Token→ 通常选择project:read和project:write→ Create Token

org

Sentry平台中Project所属的Organizaiton Slug
查询步骤：点击Sentry平台左上角下拉菜单→ Origanization settings→ Organization Slug

project

Sentry平台中的project name

include

需要上传的路径

urlPrefix

线上js文件的url前缀
Sentry需要完整无误的url前缀来查找线上的js文件所对应的map文件
例如线上js文件的url为：x.com/_nuxt/d954f…'

ignore

上传文件时忽略的路径或文件
如果include字段包含的路径比较详细，则可忽略

8. 在package.json中调整构建命令，构建结束后删除sourceMap文件，避免sourceMap暴露到线上

例如

"scripts": {
  "build": "nuxt build && rimraf .nuxt/dist/**/*.js.map"
}