Sentry之前端异常监控

Vue项目实现前端异常监控

前言

简单介绍下sentry:

Sentry从根本上讲是一项服务，可以帮助您实时监控和修复崩溃。服务器使用Python，但它包含一个完整的API，用于在任何应用程序中从任何语言发送事件

接下来介绍下SPA页面如何使用sentry异常上报附上sentry文档

这两张图片大概展示下sentry系统的使用 我本人使用的是自己搭建的sentry服务，使用的话其实是一样的，下面开始介绍如何从0开始构建一套sentry的异常监控

第一步：注册sentry账号，不上图了，较简单

第二步：设置组织和项目，也很简单，不上图

第三步：设置[Account] > API

这边要注意的是开启project：write权限，这个狠重要

以上操作都完成的话就开始代码上的配置吧

1·安装sentry的依赖 so easy

npm install raven-js --save 完成之后在main.js增加以下代码

Raven .config("you.dsn", { debug: true }) .addPlugin(RavenVue, Vue) .install();

然后在一个不起眼的地方埋个错误就能在sentry上到错误了

handleCurrentChange: function (index) {

            const postError = [];
            this.$logger.log("抛出错误到sentry", postError[1][1]);
            this.pageNo = index;
            this.refreshData();
}
复制代码

然后在sentry就能看到错误了

虽然报错带了浏览器信息还有页面信息，但是这种提示对我们找错意义不大，这时候就需要上传sourcemaps,sentry会主动把我们压缩后的错映射到source-map，项目源码上，这部分算整个搭建过程中最复杂的，小哥我花了好多时间弄这个，我们来看官方文档对引入sourcemaps的说明。Sentry允许我们通过三种方式使用sourcemaps，releases API, sentry-cli, sentry-webpack-plugin，我个人仅仅实践了最后两种

上传前的工作，我们应在项目打包时候开启生成sourcemaps

我直接贴图

new webpack.optimize.UglifyJsPlugin({

        sourceMap: true,
        compress: {
            warnings: false
        }
}),
复制代码

因为我项目里是用UglifyJsPlugin打包压缩代码的。所以这边开启sourceMap: true,我一开始时候还在output上增加了sourceMap文件重新命名，但是后面发现这样是不对的，所以注释了。我们上传到sentry的压缩代码和源码必须命名一致，才可以被映射到

const config = {

    cache: true,
    entry,
    devtool: devTool,
    // 所有的出口文件，注意，所有的包括图片等本机被放置到了dist目录下，其他文件放置到static目录下
    output: {
        path: resolve("dist"), // 生成目录
        publicPath: appsConfig.config.assetsPublicPath, // 生成的公共目录
        filename: "js/[name].[hash].js", // 文件名,不加chunkhash,以方便调试时使用，生产环境下可以设置为 [name].bundle.[hash:8].js
        chunkFilename: "js/[id].[chunkhash].chunk.js" // 块文件索引
        //sourceMapFilename: "js/[name].[hash].js.map"
    },
    // 配置插件
    plugins: __DEV__
        ? [].concat(plugins.commonPlugins).concat(plugins.devPlugins)
        : [].concat(plugins.commonPlugins).concat(plugins.prodPlugins),
    module: {.....
复制代码

第一种sourcemaps上传----sentry-cli

使用sentry脚手架干滴，这部分相对简单只要看明白文档还算容易

首先安装sentry-cli这边mac和win不太一样

Mac：curl -sL https://sentry.io/get-cli/ | bash

win：npm install @sentry/cli

---

安装完后我们可以查看版本，顺便验证安装成功

这样就安装成功了，接下来三部操作

//这是文档例子
//登陆
$ sentry-cli login
//创建release版本
$ sentry-cli releases -o MY_ORG -p MY_PROJECT new NAME
//上传sourceMaps
$ sentry-cli releases -o MY_ORG -p MY_PROJECT files NAME upload-sourcemaps --url-prefix URL_PREFIX DIR
复制代码

//  这是我的具体解释
$ sentry-cli login
$ sentry-cli releases -o {你的组织名} -p {你的项目名} new
$ sentry-cli releases -o {你的组织名} -p {你的项目名} files {你刚创建的版本号} upload-sourcemaps --url-prefix {你要把上传的js.map文件前加前缀的字符（建议这边用你的项目线上地址但前缀）} {你的sourceMap的物理地址，举例我的：（/Users/ruindong-pro/vk-project/vankely_admin_web/dist/js}
复制代码

只要按我上面的敲命令，就可以看到窗口在上传sourceMap啦。。。。这边就不贴图了，有需要的小伙伴可以底下评论让我补充 当sourceMap上传后，之前那一步操作报错的就可以直接指向源码了，如下图，具体到哪一行出错，有没有很酷

补充一件很重要的示在sentry-cli login时候会让你输入token,这就是我们前面设置的设置[Account] > API啦。 当你输入后，命名窗口会提示你在这个文件夹下生成了一个配置文件.sentryclirc，这个非常重要

这个是sentry-cli上传sourcemap的配置文件，这个文件的配置在后面使用sentry-webpack-plugin上传sourcemap是非常关键的。

这边开始第二中方式上传sourceMaps

这种方式好在项目构建过程中就一并提交sourcemaps

请搬好小板凳认真听?码了这么多文字 有点累 我休息下，明天继续

转载于:https://juejin.im/post/5b693e13f265da0f8364ab65