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插件

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试试效果

原文链接:juejin.im

上一篇:JS:平时添加的都是数据属性
下一篇:初探 WebGL

相关推荐

官方社区

扫码加入 JavaScript 社区