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

今天我們再接著熟悉sentry，按照上一篇的教程我們可以在自己的項目里面安裝sentry的sdk，而且寫了一個異常的例子來觸發(fā)異常，在sentry后臺就能監(jiān)控到異常了，但我們可能會遇到其他的問題。

前端發(fā)布上線為了js體積與請求的開支，通常會合并、混淆js代碼，這樣導(dǎo)致代碼報錯了，我們也只能看到錯誤信息，但非常難定位到具體是哪行代碼出現(xiàn)的錯誤，如圖：

我們無法快速定位到代碼哪一行出錯，這樣即使知道報錯也讓很多開發(fā)人員無法下手，所以這一篇主要和大家探討怎樣將出錯與我們開發(fā)中的代碼結(jié)合起來，這里sentry采取的是業(yè)界方案：sourcemap。

什么是sourcemap， 阮一峰這篇寫的非常詳細(xì)了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文件來做相應(yīng)的配置：

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

這4個屬性是必填項，這里重點講一下這4個屬性。

org可以在sentry的后臺查。

project是當(dāng)時在生成sentry sdk的時候建立的名字

url是sentry的后臺地址，我是本機(jī)自建所以是：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。

需要關(guān)注的可選的屬性：

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是一致的。

但至于為什么需要兩種方式就不知道作者的用意了，如果知道的同學(xué)記得給我留言。

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內(nèi)容

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的時候調(diào)用了<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>} }

代碼準(zhǔn)備好后，我們開始測試一下,在終端執(zhí)行下

webpack -p

我們訪問下那個有異常的頁面可以看到如下錯誤，因為Footer未被引入，所以是未定義的。

接著到sentry后臺去看下有沒有報錯記錄

這個報錯與瀏覽器報的一致

進(jìn)入詳細(xì)頁面如下：

我們可以看到與之前不同的是，sourcemap上傳到sentry后，sentry通過壓縮的js的sourcemap標(biāo)記與上傳的sourcemap，源js做了一個映射，再通過錯誤的行和列真正定位到代碼的錯誤， 這一塊對于開發(fā)人員排錯是非常方便的。
在這里我們能馬上就定位到錯誤是Footer未定義了。

我們繼續(xù)看錯誤詳情頁的其他信息：

這里有一個release的標(biāo)記，從官網(wǎng)得知每次上傳sourcemap其實就是一次release的過程， 如果沒有在sentry初始化時定義release屬性，sentry插件會自動生成一個隨機(jī)數(shù)作為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"})

到了這里，我們已經(jīng)完成了webpack項目與sentry的sourcemap的集成，

對于非webpack的項目，官網(wǎng)介紹了一個通過sentry-cli命令來手動做配置與上傳sourcemap的方式，這里就不展開講了，感興趣的同學(xué)可以讀這篇文章

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

總結(jié)

上一篇我們介紹了sentry的安裝與用法，sentry（一）初探

這一篇我們又講了與sourcemap的集成，從報錯到清晰地定位錯誤已經(jīng)完成了一個閉環(huán)，這時候你可以向公司申請一個服務(wù)器把sentry搭起來并開始做異常監(jiān)控了，但sentry是否可以完全滿足我們異常監(jiān)控的需求還需要更多的使用和實踐，它可能還有哪些坑需要我們一一來填補(bǔ)，后續(xù)我們會再同步sentry的更多的特性，歡迎大家一鍵三連。

更多內(nèi)容歡迎大家關(guān)注：大前端工程師

總結(jié)

以上是生活随笔為你收集整理的sentry 命令_sentry(二）集成sourcemap的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。