前端debug监控

Sentry框架

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import ErrorBoundary from "./ErrorBoundary";
Sentry.init({
  dsn: "https://700404fedfd9494f98dc9666dde58fa3@o4504830678990848.ingest.sentry.io/4504834473066496",
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
  initialScope: (scope) => {
    scope.setTags({ a: "b" });
    return scope;
  },
});
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js

import logo from "./logo.svg";
import "./App.css";

function App() {
  return <div className="App">{logo.abcdefg.bbb}</div>;
}

export default App;

ErrorBoundary.js

import React from "react";
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }
  // componentDidCatch(error, errorInfo) {
  //   // 你同样可以将错误日志上报给服务器
  //   logErrorToMyService(error, errorInfo);
  // }
  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

刷新页面app.js就会报错，把错误扔到ErrorBoundary里，Sentry调用dsn，Sentry会显示报错信息。

sourceMap配置

1.安装 @sentry/webpack-plugin库 npm install @sentry/webpack-plugin

2.配置webpack.config.js

const SentryWebpackPlugin = require("@sentry/webpack-plugin");

module.exports = function (webpackEnv) {

   plugins: [

      new SentryWebpackPlugin({

        org: "meiyuan",

        project: "javascript-react",

       include: "./build",

        urlPrefix:"~/",

       authToken: "e178e7b54b3446da8bc66b3bd3c9c4f1ffc3c41ee23d4bbd91a4908073dffcde",

      }),

   ]
}

org：display name

settings=>Organization Settings

project:项目名字

authToken:地址meiyuan.sentry.io/settings/ac…

3.打包

4.nginx打开项目

5.点击debug按钮

前端代码：

Heade.js

import "./App.css";

function Header() {
  const a=null;
  const sendError = () => {
    console.log(a.r)
  };

  return (
    <div className="App">
      <button onClick={sendError}>debug</button>
    </div>
  );
}

export default Header;

App.js

import Header from "./Header";

function App() {

  return <Header />;
}

export default App;

前端报错：

sentry报错：

详细信息：

Sentry框架，前端debug监控

前端debug监控

Sentry框架

sourceMap配置