**React Native Project - Errors Marked in Red. Performance issues marked in blue.** **Sentry Groups issues by best in class fingerprint - a unique way to identity an event with information like stacktrace, message name.  Sentry automatically groups issues with similar characteristics.  For errors only, you can set up custom fingerprint rules under Project &gt; Settings &gt; Issue Groupings &gt; Fingerprint Rules**

**Sentry’s search provides you with reserved keywords like “is”, “user”, “serve”, and “browser” that you can use to search on the properties of issues, events, replays, and releases.  You can also create custom tags to which to search.   You can create custom tags by going to Project &gt; Settings &gt; Tags &gt; add custom tag.** 

**Sentry allows you to save searches for later use.   Name your searches so you can easily pinpoint issues that are important to you.  Save the search so only you can see it or expose it to the organization.** 

Here the developer saved a search for errors that are unresolved from a specific release 

**If Sentry is instrumented in both the front end and back end, the trace navigator allows you to see the distributed trace between the front and backend and any correlated errors.**  

**The span view we have the operations breakdown - shows you how much time was spent in each operations within a transaction – the breakdown is operation type, duration, and percentage of the total duration.**

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

**Filter by operation to drill into where the slow operation is. See how these operations and services are interacting to by using the waterfall chart.**

**Sentry shows you the line of code and gives you critical context data with tags to help you quickly find cause of the problem.**

Sentry shows you the line of code causing the issue

Automated instrumentation adds tags to the issue for important context data

**Click on the Github link and immediately find the problem code in the correct code repository.**

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

**For web projects Sentry session replay shows you a video like reproduction of the user session so you can see what the user experienced before, during or after an error or performance issue.** 

Sentry obfuscates personal data and see where the user clicked and scrolled before the error occured.

**Breadcrumbs provide a history and timeline leading up to an event and are totally customizable. Easily filter by operation so you can drill down to determine which operations impacted the core issue.**

**Sentry transaction summary suggestions what spans and events that have the greatest impact on performance.**

**The transaction summary includes a list of suspect spans that correspond to where most of the time in a transaction is spent.**

**For web projects, Compare your site and page performance to Google standards - LCP, FCP, FID, and CLS. Receive a Good, Meh, or Poor rating.**

React Native Error Troubleshooting with Sentry