专做宠物的网站,做网站要学什么c语言,网站交互效果,建设专业网站哪家更专业起因
项目采用vue全家桶开发#xff0c;现在拟嵌入sentry#xff0c;实现对于线上网站进行错误日志记录。其实上传日志很简单#xff0c;基本配置就可以了#xff0c;但是上传配套的sourcemap则颇为费劲。这里记录一下使用心得。 实施步骤
上传日志
sentry使用文档…起因
项目采用vue全家桶开发现在拟嵌入sentry实现对于线上网站进行错误日志记录。其实上传日志很简单基本配置就可以了但是上传配套的sourcemap则颇为费劲。这里记录一下使用心得。 实施步骤
上传日志
sentry使用文档官方介绍很简单 在 main.js 中引入如下代码 npm install sentry/integrations
# or
yarn add sentry/integrations
import Vue from vue
import * as Sentry from sentry/browser;
import * as Integrations from sentry/integrations;Sentry.init({dsn: your dsn,integrations: [new Integrations.Vue({Vue,attachProps: true,}),],
});
其中 DSN 在项目的下图位置找到 这样之后我们重新打包项目错误就可以自动上传到sentry的项目下issues里面了。
通常我们还会做一步设置release的版本很简单只需要在sentry初始化的时候配置一下release就可以了。后续所有的sourcemap文件上传也需要配置相同的release版本号。
Sentry.init({dsn: your dsn,release: release version,integrations: [new Integrations.Vue({Vue,attachProps: true,}),],
});但是因为我们的代码是webpack打包后的所以你看到的错误日志是这样的根本无法定位具体出错代码的位置。 如果我们要想看到具体的报错信息那我们就需要上传sourcemap文件了。
上传sourcemap文件
sourcemap文件的上传方式有两种 sentry-cli 手动上传第三方包自动上传这里采用官方推荐的 sentry/webpack-plugin 采用sentry-cli的方式上传步骤如下 全局安装 sentry/cli npm i -g sentry/cli 登录 sentry-cli --url 域名地址 login 这里的域名地址是你的host地址包括域名[端口]。因为这一步采用网页形式登录所以需要你提前申请auto Token申请方式如下: 点击 账号 - API keys 点击 Create New Token 记得 project:releases 和 project:write 要勾选上 设置版本号 sentry-cli releases -o 组织名 -p 项目名 new 版本号 其中进入你的项目下查看浏览器地址组织名【sentry】和项目名【your-project-name】。 打包你的项目生成sourcemap 上传sourcemap文件到sentry sentry-cli releases -o 组织名 -p 项目名 files 版本号 upload-sourcemaps 打包后的js目录 --url-prefix 线上js访问地址 其中最需要注意的是线上js访问地址多半上传sourcemap成功但是不能解析的都源于此。成功后的sourcemap文件可以在你的项目下的releases下对应版本查看正确的应该如下图 正常解析后的结果是可以定位到代码行的错误提示如下 其他 删除sourcemap指令 sentry-cli releases files 发布版本号 delete --all利用sentry/webpack-plugin自动上传sourcemap
惯例还是先介绍官网资料
const SentryCliPlugin require(sentry/webpack-plugin);const config {plugins: [new SentryCliPlugin({include: .,ignoreFile: .sentrycliignore,ignore: [node_modules, webpack.config.js],configFile: sentry.properties,}),],
};这里我们还依赖一个配置文件根目录下的sentry 配置文件 .sentryclirc文件内容如下
[defaults]
urlyour url
orgyour organization
projectyour project[auth]
tokenyour auth通常情况下我们在plugun的配置中还需要额外配置两个参数 release 和 urlPrefix, release同前面一样urlPrefix也一样很重要。
其实两种方式都掌握最好因为我们通常会趋向于利用第三方工具自动上传但是遇到问题的时候我们可以选择手动上传的方式进行调试。
结果
完成上述步骤我们就可以对于线上遇到的问题进行监控了。
由于我们的项目需要同时监控**线上版**和**预发布**版本所以project name 和 release 以及 dsn都需要根据环境变量做适配。参考
前端错误监控 -【Vue】与【Sentry】的结合
