1央碟、注冊(cè)賬號(hào)并創(chuàng)建項(xiàng)目

訪問 sentry 的官網(wǎng)：https://sentry.io/
注冊(cè)的時(shí)候會(huì)創(chuàng)建組織，注冊(cè)完成后新建項(xiàng)目均函，選擇 React 創(chuàng)建即可

image.png

image.png

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as Sentry from '@sentry/browser'; 
Sentry.init({
  dsn: "https://c3091a23d06449af9224614f42a1e1ce@o477214.ingest.sentry.io/5908174",
  tracesSampleRate: 1.0,
  release: 'test0003',
});
ReactDOM.render(<App />, document.getElementById('root'));

2、前端啟動(dòng)

首先安裝 sentry 的瀏覽器包

yarn add @sentry/browser

拋出一個(gè)錯(cuò)誤,然后在 App 中加入了一個(gè) button苞也，并且點(diǎn)擊后會(huì)出現(xiàn)錯(cuò)誤代碼洛勉，導(dǎo)致程序報(bào)錯(cuò)

function App() {
  return (
    <button  
      onClick={() => {  
        const a = {}  
      
        // 此處同樣會(huì)報(bào)錯(cuò)  
        console.log(a.name.name)  
      
        // 拋出錯(cuò)誤  
        new Error('拋出錯(cuò)誤')  
      }}  
    >  
      throw error  
    </button>  
  );
}

export default App;

此時(shí)啟動(dòng)該項(xiàng)目，然后點(diǎn)擊 button如迟，查看 console 就可以發(fā)現(xiàn)出現(xiàn)了報(bào)錯(cuò)

image.png

image.png

image.png

首先安裝下面兩個(gè)包

yarn add @sentry/cli @sentry/webpack-plugin

然后在 webpack.config.js 代碼中配置如下代碼

new SentryPlugin({  
   authToken: 'fc5860731d134aa2b30f247734e97fd6bd3fd9d33aa8423987e6d2df46c5844f',
   org: "project-p0",
   project: "react",
   release: 'test0003',

   // webpack-specific configuration
   include: "./build/static/js",
   urlPrefix: '~/',
   ignore: ["node_modules", "webpack.config.js"]  
 })

如果使用creat-react-app創(chuàng)建的項(xiàng)目需要在根目錄創(chuàng)建一個(gè)config-overrides.js

const { override, addWebpackPlugin } = require('customize-cra');
const SentryPlugin = require('@sentry/webpack-plugin');  
  
module.exports = override(addWebpackPlugin(
    new SentryPlugin({  
        authToken: 'fc5860731d134aa2b30f247734e97fd6bd3fd9d33aa8423987e6d2df46c5844f',
        org: "project-p0",
        project: "react",
        release: 'test0003',

        // webpack-specific configuration
        include: "./build/static/js",
        urlPrefix: '~/',
        ignore: ["node_modules", "webpack.config.js"]  
    })
));

image.png

填寫authToken

image.png

填寫org

image.png

image.png

Tips

???1.插件方法SentryWebpackPlugin中要設(shè)置release參數(shù)指定版本,同時(shí)Sentry.init方法中也要release參數(shù)指定版本,兩個(gè)版本號(hào)需要保持一致,sourceMap才會(huì)生效

???2.即便上傳了sourceMap和保持release版本號(hào)一致,還需要一個(gè)文件路徑的配置,方便sourceMap定位到要訪問的文件

???3.需要指定urlPrefix參數(shù)urlPrefix不設(shè)置的話,默認(rèn)為~/,~代表網(wǎng)站的協(xié)議和域名

???4.map文件一般被webpack打包在根目錄/static/js/的文件夾下,如訪問https://dsx2016.com,那么map文件就是https://dsx2016.com/static/js/xxx.map,所以要指定urlPrefix為"~/static/js"

???5.如果經(jīng)過nginx等代理導(dǎo)致目錄更深一級(jí)等,就加入到對(duì)應(yīng)的前綴即可,如果nginx代理網(wǎng)站為https://dsx2016.com/home,那么map文件就是https://dsx2016.com/home/static/js/xxx.map,所以要指定urlPrefix為"~/home/static/js",具體的目錄看具體的場(chǎng)景,直接看打包好部署的map在哪個(gè)文件即可