**React Nativeプロジェクト - エラーは赤でマークされ、パフォーマンスの問題は青でマークされます。Sentry は業界最高のフィンガープリント（スタックトレースやメッセージ名などの情報でイベントを識別するユニークな方法）によって問題をグループ化します。 Sentry は類似した特徴を持つ問題を自動的にグループ化します。 エラーの場合のみ、プロジェクト &gt; 設定 &gt; 課題のグループ化 &gt; フィンガープリント・ルールでカスタム・フィンガープリント・ルールを設定できます。**

**Sentryの検索は、「is」、「user」、「serve」、「browser」などの予約キーワードを提供し、issue、event、replay、releaseのプロパティ検索に使用できます。 検索対象のカスタム・タグを作成することもできます。 カスタムタグは、プロジェクト &gt; 設定 &gt; タグ &gt; カスタムタグの追加で作成できます。**

**Sentryでは、検索結果を保存して後で使用することができます。 検索に名前をつけることで、重要な問題を簡単に特定することができます。 検索を保存すれば、自分だけが見ることも、組織に公開することもできます。**

ここで、特定のリリースから未解決のエラーを検索して保存します。

**Sentryがフロントエンドとバックエンドの両方で利用されている場合、トレースナビゲータはフロントエンドとバックエンド間の分散トレースと関連するエラーを見ることができます。**

**スパンビューでは、トランザクション内の各操作にどれだけの時間が費やされたかを、操作の種類、所要時間、総所要時間に占める割合で表示します。**

browser
74ms
70%
resource.other
26.3ms
25%
resource.link
3.5ms
3%
Other
2.3ms
2%

**オペレーションでフィルタリングして、遅いオペレーションを見つけます。ウォーターフォール図を使って、これらのオペレーションとサービスがどのように相互作用しているかを確認しましょう。**

**Sentryは具体的なコード行を表示し、問題の原因を素早く見つけるのに役立つタグで重要なコンテキストデータを提供します。**

Sentryは問題の原因となっているコード行を表示します。

自動化された計測により、重要な文脈データのためにタグが追加されます。

Githubに直接アクセスするリンク

**Githubのリンクをクリックし、すぐにGithubアカウントの正しいコードリポジトリで問題のコードを見つけます。**

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import './checkout.css';
import * as Sentry from '@sentry/react';
import { connect } from 'react-redux';
import Loader from 'react-loader-spinner';

function Checkout(props) {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  let initialFormValues;
  if (sessionStorage.getItem('se') !== 'tda') {
    initialFormValues = {
      email: 'plant.lover@gardening.com',
      subscribe: '',
      firstName: 'Jane',
      lastName: 'Greenthumb',
      address: '1199 9th Ave',
      city: 'San Francisco',
      country: 'United States of America',
      state: 'CA',
      zipCode: '94122',
    }
  } else {
    // we want form actually filled out in TDA for a realistic-looking Replay 
    initialFormValues = {
      email: '',
      subscribe: '',
      firstName: '',
      lastName: '',
      address: '',
      city: '',
      country: '',
      state: '',
      zipCode: '',
    };
  }
  const [form, setForm] = useState(initialFormValues);

  async function checkout(cart) {
    let se, customerType, email;
    Sentry.withScope(function (scope) {
      [se, customerType] = [scope._tags.se, scope._tags.customerType];
      email = scope._user.email;
    });

    const response = await fetch(props.backend + '/checkout?v2=true', {
      method: 'POST',
      headers: { se, customerType, email, 'Content-Type': 'application/json' },
      body: JSON.stringify({
        cart: cart,
        form: form,
      }),
    }).catch((err) => {
      return { ok: false, status: 500 };
    });
    if (!response.ok) {
      throw new Error(
        [response.status, response.statusText || 'Internal Server Error'].join(
          ' - '
        )
      );
    }
    return response;
  }
  function generateUrl(product_id) {
    return product_id;
  }

  function handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = tar

**Webプロジェクトでは、Sentryセッションリプレイにより、ユーザーセッションをビデオのように再現し、エラーやパフォーマンス問題の発生前、発生中、発生後にユーザーが経験したことを見ることができます。**

Sentryは個人データを難読化し、エラーが発生する前にユーザーがクリックした場所やスクロールした場所を確認します。

**ブレッドクラムは、イベントに至るまでの履歴とタイムラインを提供し、完全にカスタマイズ可能です。業務別に簡単にフィルタリングできるため、どの業務が中核となる問題に影響を与えたかを掘り下げることが可能です。**

**Sentryのトランザクションサマリーは、パフォーマンスに最大の影響を与えるスパンとイベントを提案します。**

**トランザクションのサマリーには、トランザクションのほとんどの時間が費やされた場所に対応する疑わしいスパンのリストが含まれます。**

**ウェブプロジェクトでは、サイトとページのパフォーマンスをGoogle標準（LCP、FCP、FID、CLS）と比較します。Good、Meh、Poor（それぞれ良い、まあまあ、悪い）で評価されます。**

Sentryを使ったReact Nativeエラーのトラブルシューティング