sentry 命令_sentry(二）集成sourcemap

上一篇介绍了sentry的基本用法，任意门：sentry（一）初探

今天我们再接着熟悉sentry，按照上一篇的教程我们可以在自己的项目里面安装sentry的sdk，而且写了一个异常的例子来触发异常，在sentry后台就能监控到异常了，但我们可能会遇到其他的问题。

前端发布上线为了js体积与请求的开支，通常会合并、混淆js代码，这样导致代码报错了，我们也只能看到错误信息，但非常难定位到具体是哪行代码出现的错误，如图：

我们无法快速定位到代码哪一行出错，这样即使知道报错也让很多开发人员无法下手，所以这一篇主要和大家探讨怎样将出错与我们开发中的代码结合起来，这里sentry采取的是业界方案：sourcemap。

什么是sourcemap，阮一峰这篇写的非常详细了http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html，今天我们重点讲讲sentry怎么集成sourcemap以及需要注意的问题。

安装webpackplugin与配置

为了解决上面的问题，sentry给出了集成sourcemap的方案，从sourcemap生成到上传，sentry官方推荐的是用webpack场景下的webpackplugin。

第一步：安装SentryWebpackPlugin插件

$ npm install --save-dev @sentry/webpack-plugi

第二步：在项目根目录增加一个

.sentryclirc文件来做相应的配置：

[defaults]
project=react-test
org=sentry
url=http://localhost:9000[auth]
token=851d20d9e7e943b191df663643d13f89d8fb6c2d12584c729d0e29f831ec1fd1

这4个属性是必填项，这里重点讲一下这4个属性。

org可以在sentry的后台查。

project是当时在生成sentry sdk的时候建立的名字

url是sentry的后台地址，我是本机自建所以是：localhost:9000

token需要到后台生成：

对于更多的可选配置属性可以参考https://docs.sentry.io/cli/configuration/

第三步：在webpack.config.js增加SentryWebpackPlugin的插件配置

const SentryWebpackPlugin = require("@sentry/webpack-plugin");module.exports = {// other configurationconfigureWebpack: {plugins: [new SentryWebpackPlugin({include: ".", ignore: ["node_modules", "webpack.config.js"],configFile: "sentry.properties",}),],},
};

include, ignoreFile, ignore, configFile 是官方文档demo上的属性，

其中只有include是必填项，其他都是可选。

include：指定路径让sentry-cli来检测有没有.map与.js文件，如果有就会上传到sentry。

需要关注的可选的属性：

ignore： 忽略文件夹或文件不要被检测。一般都会将node_moudules与webpack.config.js忽略掉。

configFile: "sentry.properties"，这是用来替代第二步的.sentryclirc文件。

如果根项目有一个sentry.properties文件

defaults.project=react-test
defaults.org=sentry
defaults.url=http://localhost:9000
auth.token=851d20d9e7e943b191df663643d13f89d8fb6c2d12584c729d0e29f831ec1fd1

这个起的作用与.sentryclirc是一致的。

但至于为什么需要两种方式就不知道作者的用意了，如果知道的同学记得给我留言。

sentry-plugin插件还有很多属性，大家可以参考

https://github.com/getsentry/sentry-webpack-plugin

第四步：output配置

output:{filename:"[name].js",path:path.resolve(__dirname, 'dist/'),sourceMapFilename: "[name].js.map"},

增加sourceMapFilename，用于上传到sentry。

上传sourcemap

我们的project是基于react来建立的，这里我写一个react的demo。目录如下：

index.js内容

import React from 'react';
import ReactDOM from 'react-dom';
import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';
import App from './App';Sentry.init({dsn: "http://c4e5aad16fc942bbaec0dd3ef3903a72@localhost:9000/5",integrations: [new Integrations.BrowserTracing(),],tracesSampleRate: 1.0
});ReactDOM.render(<App /> , document.getElementById("root"));

这里需要造一个异常来验证，我们在app.js里面不import Footer组件,但在 render的时候调用了<Footer/>

import React from 'react';
import Header from './components/header';
import Body from './components/body';
class App extends React.Component {render() {return <div> <Header/><Body/><Footer/></div>}
}

代码准备好后，我们开始测试一下,在终端执行下

webpack -p

我们访问下那个有异常的页面可以看到如下错误，因为Footer未被引入，所以是未定义的。

接着到sentry后台去看下有没有报错记录

这个报错与浏览器报的一致

进入详细页面如下：

我们可以看到与之前不同的是，sourcemap上传到sentry后，sentry通过压缩的js的sourcemap标记与上传的sourcemap，源js做了一个映射，再通过错误的行和列真正定位到代码的错误，这一块对于开发人员排错是非常方便的。
在这里我们能马上就定位到错误是Footer未定义了。

我们继续看错误详情页的其他信息：

这里有一个release的标记，从官网得知每次上传sourcemap其实就是一次release的过程，如果没有在sentry初始化时定义release属性，sentry插件会自动生成一个随机数作为release版本。如果需要指定版本，记得在sentry初始化和webpack.config.js配置的需要一致。
初始化：

Sentry.init({dsn: "http://c4e5aad16fc942bbaec0dd3ef3903a72@localhost:9000/5",release:"v1.0.1",integrations: [new Integrations.BrowserTracing(),],tracesSampleRate: 1.0
});

webpack的插件配置

new SentryWebpackPlugin({release:"v1.0.1",include: ".",ignore: ["node_modules", "webpack.config.js"],configFile: "sentry.properties"})

到了这里，我们已经完成了webpack项目与sentry的sourcemap的集成，

对于非webpack的项目，官网介绍了一个通过sentry-cli命令来手动做配置与上传sourcemap的方式，这里就不展开讲了，感兴趣的同学可以读这篇文章

https://docs.sentry.io/platforms/javascript/guides/react/configuration/sourcemaps/

总结

上一篇我们介绍了sentry的安装与用法，sentry（一）初探

这一篇我们又讲了与sourcemap的集成，从报错到清晰地定位错误已经完成了一个闭环，这时候你可以向公司申请一个服务器把sentry搭起来并开始做异常监控了，但sentry是否可以完全满足我们异常监控的需求还需要更多的使用和实践，它可能还有哪些坑需要我们一一来填补，后续我们会再同步sentry的更多的特性，欢迎大家一键三连。

更多内容欢迎大家关注：大前端工程师