sentry 接入 source map

采用sentry监控前端错误的时候，我们会发现上传的错误很简单，基本上对排除错误没有太大帮助。如下图：

我们可以通过配置生成source map，并将其上传到sentry服务器（建议自建服务器，这样比较安全）。使报错信息更友好。

1、配置你的webpack 的devtool,使其生成source map，建议配置devtool为 hidden-source-map ，而不是网上一些资料推荐的cheap-module-source-map ，webpack文档里面线上环境并没有推荐cheap-module-source-map，且设置cheap-module-source-map呈现出来的错误信息也很简单。

2、采用webpack-sentry-plugin 上传生成的source map到自建sentry服务器

插件地址：https://github.com/40thieves/webpack-sentry-plugin

安装插件

npm install webpack-sentry-plugin --save-dev

将插件添加到webpack配置里，建议只在构建的情况下进行接入，本地开发就别接入插件了。

var config = {plugins: [new SentryPlugin({organization: 'your-organization-name', // 组织名称project: 'your-project-name', // 项目名称apiKey: process.env.SENTRY_API_KEY, release(hash) { // release版本return `${projectName}-${hash.substr(0, 8)}`}，baseSentryURL: '自建服务器地址/api/0', // 配置指到我们的自建服务器，api/0 是固定include: /\.map$/   //正则，匹配哪些文件上传})]
}

3、接入过程中的注意事项：

api key 在下面这个地方获取，如果还没人创建过，自己创建一个，记得勾上project:write

版本号

release(hash) {

return `${projectName}-${hash.substr(0, 8)}`

}

hash使webpack编译后产生的hash，下面的`${projectName}-${hash.substr(0, 8)}`使我自定义的，搭建可以根据自己的需要来。

4、接入过程中遇到的坑：

404 错误：一般是组织或者项目参数写错，导致拼接出来的请求地址找不到。注意组织指的是公司名称，而不是部们名称。

502错误：一般是上传太多文件导致服务器错误，添加include进行过滤，只上传map文件。

409错误：两次上传内容相同。

sentry 接入 source map相关推荐

release 与您的 deploy integrations 或 source map uploads 同步
SDK 将事件发送到哪里.如果没有提供这个值,SDK 将尝试从 SENTRY_DSN 环境变量中读取它.如果这个变量也不存在,SDK 就不会发送任何事件. 在没有进程环境(如浏览器)的运行时中,fal ...
Node.js 中 source map 使用问题总结
起源 Node 应用功能越来越复杂,很多业务都开始尝试使用 TypeScript 来开发.现在前端写的 JS 大部分是经过编译过程的,浏览器中通过 source map 的使用,可以很好的解决源码和编 ...
记录webpack的source map使用详细说明
common.js export const show = () => {console.log(1212121)();document.write('hello webpack 11') } ...
Angular 开发中的 Source Map
SourceMaps Demystified (.js.map) 当我们构建 Angular 应用程序时,会创建 js 文件和 .js.map(源映射文件)文件. 从本质上讲,源映射是一个 JSON ...
你知道source map如何帮你定位源码么？
大家好,我是若川.今天分享一篇我们经常会忽略的定位原始代码位置原理的文章.文章不长,例子不错,可以先收藏,有空时动手试试. 学习源码系列.年度总结.JS基础系列前言我们知道,代码上线前要经过压缩, ...
Source Map调试压缩后代码
在前端开发过程中,无论是样式还是脚本,运行时的文件可能是压缩后的,那这个时候调试起来就很麻烦. 这个时候,可以使用Source Map文件来优化调试,Source Map是一个信息文件,里面储存着原代 ...
【转】webpack中关于source map的配置
Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...
DevTools failed to load source map: Could not load content for…System error: net::ERR_FILE_NOT_FOUN
DevTools failed to load source map: Could not load content for--System error: net::ERR_FILE_NOT_FOUN ...
微信开发者工具 Source Map 的使用
在小程序后台 ->开发管理 ->运维中心 -> 错误日志中可以看到小程序运行中的报错信息,但是代码都是压缩混淆的,那就需要如何去定位,下面说明说如使用微信开发者工具 Source ...

sentry 接入 source map

sentry 接入 source map相关推荐

最新文章

热门文章