Vue2.0 + Sentry 实现错误日志监控

项目采用vue全家桶开发，现在拟嵌入sentry，实现对于线上网站进行错误日志记录。

 1. 登录sentry 网站

官方网址

后续考虑在树莓派上私有化部署，占个坑 树莓派 sentry私有化部署

2. 创建组织和创建项目

3.在项目中安装依赖并引用

项目中安装

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

main.js 中加入

import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  Vue,
  release: '0.0.1',
  dsn: "",
  integrations: [new Integrations.BrowserTracing()],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

 4. 运行项目

启动项目之后，其实我们就可以在issues中查看到错误日志了

5. 生产环境

但是因为我们的代码是webpack打包后的，在生产环境productionSourceMap: false，根本无法定位具体出错代码的位置

6.如何上传sourcemap文件

.如果我们要想看到具体的报错信息，那我们就需要上传sourcemap文件了。 

sourcemap文件的上传方式有两种：

• sentry-cli 手动上传
• 第三方包自动上传，这里采用官方推荐的 @sentry/webpack-plugin

      sentry 手动上传sourcemap文件

     利用@sentry/webpack-plugin自动上传sourcemap

1. npm install --save-dev @sentry/webpack-plugin，如果安装时报错了，请查看此篇文章
2. sentry 获取API Token，不清楚，可查看此篇文章 sentry 获取API Token
3. vue.config.js

   const SentryWebpackPlugin = require("@sentry/webpack-plugin");
   
   module.exports = {
     configureWebpack: config =>  {
       Object.assign(config, {
         plugins:[
           ...config.plugins,
           new SentryWebpackPlugin({
             // webpack specific configuration
             release: '0.0.1',
             include: '.', //需要上传到sentry服务器的资源目录,会自动匹配js 以及map文件
             ignore: ["node_modules", "vue.config.js"],          // 忽略文件目录,当然我们在inlcude中制定了文件路径,这个忽略目录可以不加
             configFile:'.sentryclirc',  
           })
         ]
       })
     },
   };

4. 在项目的根目录下创建一个文件.sentryclirc并配置

   [defaults]
   url=https://sentry.io/
   org=组织名称
   project=项目名称
   
   [auth]
   token=你的sentry账号下生成的API Token
   

  5. 通常情况下，我们在plugun的配置中，还需要额外配置： urlPrefix

urlPrefix : "~/static/js"    //  线上对应的url资源的相对路径

urlPrefix： 关于这个，是要看你线上项目的资源地址，比如
怎么看资源地址呢， 例如谷歌浏览器， F12控制台， 或者去Application里面找到对应资源打开。

完成上述步骤，我们就可以对于线上遇到的问题进行监控了。

Sentry 获取API Token