nuxt sentry source-map

sentry 新建项目

新建一个vue项目

点击 安装指引

plugins 下添加 sentry.js 文件

安装依赖 yarn add raven-js

• 把上图代码复制到此文件

import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';

export default function({ app, isDev }) {
  if(!isDev){
    Raven
      .config('https://e81ca568b8f24db6992d89f5f332f2b5@sentry.****.com/76')
      .addPlugin(RavenVue, Vue)
      .install();
  }
}

nuxt.config把插件引入

  plugins: [
    { src: '@/plugins/sentry', ssr: false },
  ],

• 这样有错误就会上报到系统，但是没有source-map。

build 添加 source-map

nuxt.config.js添加

  build: {
    extend (config, { isDev, isClient }) {
      if (isClient && !isDev) {
        config.devtool = 'source-map'   // 处理client
    }
}

source-map 开发和生产模式常用配置

• dev 模式下 cheap-module-eval-source-map

可以设断点调试，不显示列信息，并在合并后的代码尾部以base64加入map信息

• pro模式下 source-map

可以设断点调试，不显示列信息，生成相应的.Map文件，并在合并后的代码尾部加上注释//# sourceMappingURL=**.js.map ，可以看到模块代码并没有被eval()包裹，此种模式并没有将调试信息放入打包后的代码中，保持了打包后代码的简洁性

生成map成功，再把文件上传到sentry

配置sentry插件

• 安装@sentry/webpack-plugin插件 github.com/getsentry/s…

yarn add @sentry/webpack-plugin

• 根目录创建.sentryclirc文件

[defaults]
url = https://sentry.你公司自己搭的.com

org = sentry
project = gp-blog

[auth]
token = 467ea6d5ab3842918c816a825f5beef341e70f7a68264293acaecbc85d29b5fa

token 生成方法见下图

在nuxt.config.js文件的 build extend 参数添加

    
build: {
    extend (config, { isDev, isClient }) {
      if (isClient && !isDev) {
      
        config.devtool = 'source-map'

        const release = 'demo-test008'; // 可以根据package.json的版本号或者Git的tag命名

        const SentryPlugin = require('@sentry/webpack-plugin')

        config.plugins.push(new SentryPlugin({
          include: '.nuxt/dist/client', // 要上传的文件夹
          release,
          configFile: 'sentry.properties',
          urlPrefix: '~/_nuxt/' // ~/为网站根目录，后续路径须对应source
        }))
    }
},

运行build 上传成功

写个bug试试效果