map.entry-sentry(二）集成sourcemap

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

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

如果根项目有一个.文件

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

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

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

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

第四步：配置

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

增加，用于上传到。

上传

我们的是基于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( , document.getElementById("root"));

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

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>    } }
export default App;

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

webpack -p

这里可以看到相应的与js文件都已经上传到了。

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

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

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

进入详细页面如下：

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

在这里我们能马上就定位到错误是未定义了。

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

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

初始化：

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

的插件配置

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

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

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

总结

admin会员

打赏 收藏 海报 链接