今日は、React アプリケーションにおけるリアルタイムのエラー追跡について説明します。 フロントエンド アプリケーションは通常、エラー追跡には使用されません。 一部の企業では、バグ追跡を延期し、文書化やテストなどの後にバグ追跡に戻ることがよくあります。 ただし、製品をより良い方向に変更できる場合は、すぐに変更してください。
1. セントリーが必要な理由は何ですか?
あなたは制作中のバグの追跡に興味があると思います
これでは不十分だと思いますか?
さて、詳細を見てみましょう。
開発者が Sentry を使用する主な理由:
- エラーのあるコードをデプロイする際のリスクを回避できます。
- コードテストで QA を支援する
- 問題に関する迅速な通知を受け取る
- エラーを迅速に修正する能力
- 管理パネルでのエラーの便利な表示の取得
- ユーザー/ブラウザセグメントごとにエラーを並べ替える
CEO/リードプロジェクトの主な理由
- お金を節約します (Sentry はサーバーにインストールできます)
- ユーザーからのフィードバックを得る
- プロジェクトの問題点をリアルタイムで理解する
- アプリに関して人々が抱えている問題の数を理解する
- 開発者が間違いを犯した場所を見つけるのに役立ちます
開発者はまずこの記事に興味を持つと思います。 この理由リストを使用して、Sentry を統合するよう上司を説得することもできます。
ビジネスリストの最後の項目に注意してください。
すでに興味がありますか？
セントリーとは何ですか？
Sentry は、開発者がリアルタイムでクラッシュを追跡して修正できるようにするオープンソースのバグ追跡アプリケーションです。 このアプリケーションによって効率が向上し、ユーザー エクスペリエンスが向上することを忘れないでください。 Sentry は、JavaScript、Node、Python、PHP、Ruby、Java、およびその他のプログラミング言語をサポートしています。
2. ログインしてプロジェクトを作成する
- Sentry アカウントを開きます。 ログインが必要な場合があります。 (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 を使用したシンプルな音楽アプリケーションを使用しました。 見れば分かります 。 エラーを作成する必要があります。 XNUMX つの方法は、「未定義」プロパティにアクセスすることです。
を呼び出すボタンを作成する必要があります console.log с ユーザー.メールアドレス。 このアクションの後、次のエラー メッセージが表示されます。 Uncaught TypeError (未定義からプロパティを読み取れません) 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 のソース マップは設定されていないため、ここで話します。
ソース マップのセットアップ手順も説明したいと思いますが、その場合、この記事は意図したよりもかなり長くなってしまいます。
このトピックを勉強できます 。 この記事に興味があれば、 ソース マップの統合に関する第 XNUMX 部を公開する予定です。 もっと「いいね！」を押して購読してください 後半部分を見逃さないように。
5。 使用 歩哨 エンドポイント付き 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 アプリケーションに統合する XNUMX つの方法について説明しました。
→ 電報チャット
出所： habr.com