-SaiMallik Rameshwaram

                                                                                                 WD401-level9

Add an error-tracking system to your React project:

I used Sentry as an error-tracking system by following the below steps: 

 Step 1-Making Sentry Account:

I started by signing up for a Sentry account since I didn't have one already. Once signed up, I created a new project specifically for my React application within the Sentry dashboard.

Step 2-Installing Sentry in the react project and setting up wizard:

After setting up the project in Sentry, I installed the Sentry SDK in my React project directory using the following command:

                                                    npm install --save @sentry/react
Now we need to setup the wizard by running the below command:
                                                npx @sentry/wizard@latest -i sourcemaps

Step 3-Initializing sentry in my react application:

I added the initialization code provided by Sentry to my main React file (main.tsx). This initialization code is crucial for integrating Sentry into my application.

import { ThemeProvider } from "./context/theme";

// import ThemeContext from "../src/context/theme.ts";

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

Sentry.init({

  dsn: "https://197b43693336ea639a0c3d6a6c6cd987@**********************",

  integrations: [

    Sentry.browserTracingIntegration(),

    Sentry.replayIntegration({

      maskAllText: false,

      blockAllMedia: false,

    }),

  ],

  // Performance Monitoring

  tracesSampleRate: 1.0, //  Capture 100% of the transactions

  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled

  tracePropagationTargets: ["localhost"],

  // Session Replay

  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.

  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.

});

Step 4-Throwing the error:

To test Sentry's functionality in error tracking, I deliberately introduced an error message while changing the theme of my application. This error message served as a trigger for Sentry to capture and report the error.

  const toggleTheme = () => {

    const newTheme = theme === "light" ? "dark" : "light";

    setEnabled(!enabled);

    setTheme(newTheme);

    throw new Error(

      "An error occured while changing the theme of the application"

    );

  };

Step 5-Building the application:

After integrating Sentry and introducing the error message, I built the application by running the following command:

                                                             npm run build

                                                                    

Step 6-Previewing the application: Finally, I previewed the application to check Sentry's functionality in error tracking by running the command:
                                                       
                                                               npm run preview

                                      

                                              

Debugger to track a bug in my application: 

Initially, I bounded by the App component with an error boundary from the sentry as shown below.

<Sentry.ErrorBoundary fallback={<p>An error has occurred!!</p>}>

        <App />

</Sentry.ErrorBoundary>

Now, in the next step, I added a bug to my sign-in functionality by changing the URL of the sign-in in the post request to make sign-in fail. The code with the bug will be like below.

  const { email, password } = data;

    try {

      const response = await fetch(`${API_ENDPOINT}/use/sign_in`, {

        //added bug

        method: "POST",

        headers: { "Content-Type": "application/json" },

        body: JSON.stringify({ email, password }),

      });

      const data = await response.json(); //used to observe the response body and find token

      console.log(data.auth_token); //checking token

      localStorage.setItem("userData", JSON.stringify(data.user));

      localStorage.setItem("authToken", data.auth_token);

      navigate("/home");

So, when a user tries to sign in a new error will occur which will indirectly trigger in the sentry issues section.

This will show the exact flow of issues which helped me to identify the issues that I had written the wrong URL while sending a post request when the user tried to sign in. The correct code will look like below where I changed the URL from use to users.

const { email, password } = data;

    try {

      const response = await fetch(`${API_ENDPOINT}/users/sign_in`, {

        //fixed bug

        method: "POST",

        headers: { "Content-Type": "application/json" },

        body: JSON.stringify({ email, password }),

      });

      const data = await response.json(); //used to observe the response body and find token

      console.log(data.auth_token); //checking token

      localStorage.setItem("userData", JSON.stringify(data.user));

      localStorage.setItem("authToken", data.auth_token);

      navigate("/home");

Root Cause Analysis (RCA) of Sign-in Functionality Bug:

Issue Description:

Users encounter an error while attempting to sign in to the application. This runtime error interrupts the sign-in process, preventing users from successfully accessing their accounts.

Impact:

The error significantly impacts the usability and functionality of the sign-in feature. Users are unable to log in, leading to errors in the functionality of the application.

Identifying the Problem:

1) Observations:

Users experience a runtime error during the sign-in process, indicating a potential issue with variable handling or data passing.

2) Steps Taken to Investigate:

->Reviewing Code: I examined the code responsible for the sign-in process to identify any potential mistakes or issues.

->Logging Errors: Console logging was used to capture relevant variables and outputs during the sign-in process, resulting in pinpointing the location and nature of the error.

->Utilizing Sentry: Sentry, an error tracking tool, was leveraged to capture and analyze runtime errors occurring during sign-in, providing detailed traces and context for further investigation.

Finding the Root Cause:

After a thorough investigation, I observed that:

The Problem: A typo in a variable name used to construct the sign-in POST request caused the error. Specifically, the variable "use" was mistakenly used instead of "users," resulting in an invalid endpoint URL.

Fixing the Issue:

I corrected the variable name in the sign-in function's POST request body, ensuring that the request is sent to the correct endpoint ("/users/sign_in").

Preventive Measures:

->Improved Code Reviews: I have implemented more rigorous code review practices to catch and rectify typos and inconsistencies in variable names before deploying code changes.

->Enhanced Testing: Our automated testing procedures now include comprehensive checks to verify the accuracy of API request data, reducing the likelihood of similar errors in the future.

->Continuous Monitoring: continuously monitoring runtime errors using Sentry to promptly detect and address any issues affecting the application's sign-in functionality.

Conclusion:

By addressing the root cause of the sign-in issue and implementing preventive measures, I have tried to enhance the reliability and usability of the sign-in process. Our aim is to ensure a seamless sign-in experience for users, minimizing disruptions and improving overall user satisfaction with the application.