🥇使用 Sentry 跟踪 React 应用程序中的错误

今天我将带您了解 React 应用程序中的实时错误跟踪。前端应用程序通常不用于错误跟踪。一些公司经常把错误跟踪放在一边，在文档、测试等之后再返回。但是，如果您可以使您的产品变得更好，那就去做吧！

1. 为什么需要哨兵？

我假设您对生产过程中的错误跟踪感兴趣。

您认为这还不够吗？

好吧，我们来看看细节。

开发人员使用 Sentry 的主要原因：

让您在部署有错误的代码时摆脱风险
帮助 QA 进行代码测试
快速获取问题通知
快速修复错误的能力
在管理面板中方便地显示错误
按用户/浏览器段对错误进行排序

担任首席执行官/领导项目的主要原因

省钱（Sentry 可以安装在您的服务器上）
获取用户反馈
实时了解您的项目出了什么问题
了解人们在使用您的应用时遇到的问题数量
帮助找到开发人员犯错误的地方

我认为开发人员首先会对这篇文章感兴趣。您还可以使用这一系列理由来说服您的老板集成 Sentry。

请小心业务清单上的最后一项。

您已经感兴趣了吗？

什么是哨兵？

Sentry 是一款开源错误跟踪应用程序，可帮助开发人员实时跟踪和修复崩溃。不要忘记该应用程序还可以让您提高效率并改善用户体验。 Sentry 支持 JavaScript、Node、Python、PHP、Ruby、Java 等编程语言。

2. 登录并创建项目

打开您的哨兵帐户。您可能需要登录。（请注意，Sentry 可以安装在您的服务器上）
下一步是创建一个项目
从列表中选择您的语言。（我们将选择 React。单击“创建项目”）

设置您的应用程序。您可以在下面看到如何将 Sentry 集成到容器中的基本示例：

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https://[email protected]/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app 

class ExampleBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }

    componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.withScope(scope => {
        Object.keys(errorInfo).forEach(key => {
          scope.setExtra(key, errorInfo[key]);
        });
        Sentry.captureException(error);
      });
    }

    render() {
        if (this.state.error) {
            //render fallback UI
            return (
              <a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
            );
        } else {
            //when there's not an error, render children untouched
            return this.props.children;
        }
    }
}

Sentry 有一个有用的向导，可以帮助您了解下一步应该做什么。您可以按照以下步骤操作。我想向您展示如何创建第一个错误处理程序。太棒了，我们已经创建了一个项目！让我们继续下一步

3. 集成 React 和 Sentry

您必须在项目中安装 npm 包。

npm i @sentry/browser

在容器中初始化 Sentry：

Sentry.init({
 // dsn: #dsnUrl,
});

DSN 位于项目 -> 设置 -> 客户端密钥中。您可以在搜索栏中找到客户端密钥。

componentDidCatch(error, errorInfo) {
  Sentry.withScope(scope => {
    Object.keys(errorInfo).forEach(key => {
      scope.setExtra(key, errorInfo[key]);
    });
    Sentry.captureException(error);
 });
}

4. 跟踪第一个错误

例如，我使用了带有 Deezer API 的简单音乐应用程序。你可以看到这里。我们需要创建一个错误。一种方法是访问“未定义”属性

我们需要创建一个调用的按钮 控制台日志 с 用户邮箱。执行此操作后，我们应该收到一条错误消息： 未捕获的类型错误（无法从未定义的属性中读取属性 email) 由于缺少用户对象。您还可以使用 JavaScript 异常.

<button type="button" onClick={() => console.log(user.email)}>   
  Test Error button 
</button>

整个容器看起来像这样：

import React, { Component } from "react";
import { connect } from "react-redux";
import { Input, List, Skeleton, Avatar } from "antd";
import * as Sentry from "@sentry/browser";
import getList from "../store/actions/getList";

const Search = Input.Search;

const mapState = state => ({
  list: state.root.list,
  loading: state.root.loading
});

const mapDispatch = {
  getList
};

class Container extends Component {
  constructor(props) {
    super(props);

    Sentry.init({
      dsn: "https://[email protected]/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope => {
      Object.keys(errorInfo).forEach(key => {
        scope.setExtra(key, errorInfo[key]);
      });
      Sentry.captureException(error);
    });
  }
  render() {
    const { list, loading, getList } = this.props;
    const user = undefined;
    return (
      <div className="App">
        <button
          type="button"
          onClick={() => console.log(user.email)}
        >
          test error1
        </button>
        <div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
        <h1>Music Finder</h1>
        <br />
        <Search onSearch={value => getList(value)} enterButton />
        {loading && <Skeleton avatar title={false} loading={true} active />}
        {!loading && (
          <List
            itemLayout="horizontal"
            dataSource={list}
            locale={{ emptyText: <div /> }}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.artist.picture} />}
                  title={item.title}
                  description={item.artist.name}
                />
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

export default connect(
  mapState,
  mapDispatch
)(Container);

集成此按钮后，您应该在浏览器中测试它。

我们犯了第一个错误

哇哦！

如果单击标题错误，您将看到堆栈跟踪。

这些消息看起来很糟糕。当然，我们看到了错误消息，但不知道这段代码在哪里。默认情况下，它是关于 ReactJS 中的源映射，因为它们没有配置。

我还想提供有关设置源映射的说明，但这将使本文比我预期的长得多。

你可以研究这个话题这里。如果您对这篇文章感兴趣，德米特里·诺任科将发布有关源地图集成的第二部分。所以点击更多喜欢并订阅德米特里·诺任科不要错过第二部分。

5.用法 SENTRY 有端点 API

好的。我们在前面的段落中已经介绍了 javascript 异常。但是，我们如何处理 XHR 错误呢？

Sentry 还具有自定义错误处理功能。我用它来跟踪 api 错误。

Sentry.captureException(err)

您可以通过应用程序、电子邮件等自定义错误名称、级别、添加数据、唯一用户数据。

superagent
  .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
  .set("X-RapidAPI-Key", #id_key)
  .end((err, response) => {
    if (err) {
      Sentry.configureScope(
        scope => scope
          .setUser({"email": "[email protected]"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

我想对 catch API 使用通用函数。

import * as Sentry from "@sentry/browser";

export const apiCatch = (error, getState) => {
  const store = getState();
  const storeStringify = JSON.stringify(store);
  const { root: { user: { email } } } = store;

  Sentry.configureScope(
    scope => scope
      .setLevel("Error")
      .setUser({ email })
      .setExtra("store", storeStringify)
  );
    // Sentry.showReportDialog(); - If you want get users feedback on error
  return Sentry.captureException(error);
};

在 api 调用中导入此函数。

export default query => (dispatch, getState) => {
  superagent
    .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
    .set("X-RapidAPI-Key", #id_key)
    .end((error, response) => {
      if (error) {
        return apiCatch(error, getState)
      }

      if (response) {
        return dispatch(setList(response.body.data));
      }
    });
};

我们来检查一下方法：

设置级别 允许您在哨兵仪表板中插入级别错误。它具有属性 -“致命”、“错误”、“警告”、“日志”、“信息”、“调试”、“严重”）。
设置用户 有助于保存任何用户数据（ID、电子邮件地址、付款计划等）。
设置额外 允许您设置所需的任何数据，例如商店。

如果您希望用户对错误进行反馈，您应该使用 showReportDialog 函数。

Sentry.showReportDialog();

结论：

今天我们描述了将 Sentry 集成到 React 应用程序中的一种方法。

→ 电报聊天 SENTRY

来源： habr.com

使用 Sentry 跟踪 React 应用程序中的错误

1. 为什么需要哨兵？

什么是哨兵？

2. 登录并创建项目

3. 集成 React 和 Sentry

4. 跟踪第一个错误

添加评论 取消回复

添加评论取消回复