上传方式：webpack 插件

1. 安装 @sentry/webpack-plugin

  1. npm i -D @sentry/webpack-plugin
  3. yarn add @sentry/webpack-plugin --dev

安装遇到的问题：
image.png
解决：切换taobao源

  1. npm i cnpm -g --registry=https://registry.npm.taobao.org
  2. cnpm install --save-dev @sentry/webpack-plugin

2. 配置 webpack

create-react-app 修改 webpack 配置参考: https://github.com/timarney/react-app-rewired

  1. 安装react-app-rewired

    1. npm install react-app-rewired --save-dev

  2. 在根目录新建config-overrides.js

    1. const SentryCliPlugin = require('@sentry/webpack-plugin');
    2. module.exports = function override(config, env) {
    3. config.devtool = 'source-map';
    4. config.plugins.push(
    5.  new SentryCliPlugin({
    6.    release: '0.0.1',
    7.    authToken: '',
    8.    url: 'http://127.0.0.1:9000',
    9.    org: 'sentry',
    10.    project: 'cra-test-lac',
    11.    urlPrefix: '~/',
    12.    include: './build',
    13.    ignore: ['node_modules'],
    14.  })
    15. );
    16. return config;
    17. }

    authToken的获取
    image.png

  3. 更改package.json ```javascript / package.json /

    “scripts”: {

  • “start”: “react-scripts start”,
  • “start”: “react-app-rewired start”,
  • “build”: “react-scripts build”,
  • “build”: “react-app-rewired build”,
  • “test”: “react-scripts test”,
  • “test”: “react-app-rewired test”, “eject”: “react-scripts eject” } ```

    3. 编译

    ```javascript npm run build

or

yarn build

  1. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/735369/1637210660181-181ad925-290c-45bb-99ed-7ba78c4e7635.png#clientId=u45d8131f-30ef-4&from=paste&height=716&id=ud37189bf&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1432&originWidth=1542&originalType=binary&ratio=1&size=300305&status=done&style=none&taskId=ue009e1e6-7653-4eba-81b3-afb6538e987&width=771)
  2. <a name="hjYJ3"></a>
  3. # 4. 查看报错信息
  5. 1. 通过http-server启动前端服务
  6. ```javascript
  7. cd build 
  8. http-server
  1. 访问http://127.0.0.1:8080

image.png

  1. 在前端项目制造错误并上报
  2. 到 sentry 管理界面 Archive，可以看到 sourcemap 文件已经上传

image.png

  1. 到 sentry 管理界面，查看对应 issue，可以看到具体信息：哪个文件发生了错误，错误的行列数，错误行附近的源代码

image.png

删除sourcemap

在上传完以后，需要删除 sourcemap 文件，不要把它们部署到线上去了

  1. // package.json
  2. {
  3.   "scripts": {
  4.     "build": "react-app-rewired build && rm -rf dist/*.map",
  5.   },
  6. }