Merge pull request #72 from nushydude/71-integrated-sentry-to-ui

Integrate Sentry and add some unit tests with zod validation

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
+    "@sentry/react": "^8.12.0",
     "@tanstack/react-query": "^5.8.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

src/App.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/react';
 import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { ToastContainer } from 'react-toastify';
@@ -9,7 +10,7 @@ import { Footer } from './components/Footer';
 
 const history = createBrowserHistory();
 
-export const App = () => {
+const App = () => {
   useOneSignal();
 
   return (
@@ -28,3 +29,5 @@ export const App = () => {
     </Router>
   );
 };
+
+export default Sentry.withProfiler(App);

src/config.ts

@@ -5,4 +5,5 @@ const buildNumber = isProduction ? process.env.REACT_APP_BUILD_NUMBER : 'dev';
 export const config = {
   API_URI: 'https://crypto-stdev-express.vercel.app',
   BUILD_NUMBER: buildNumber,
+  SENTRY_DSN: process.env.REACT_APP_SENTRY_DSN,
 };

src/index.tsx

@@ -1,14 +1,31 @@
+import * as Sentry from "@sentry/react";
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Chart as ChartJS, registerables } from 'chart.js';
 import 'react-toastify/dist/ReactToastify.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';
-import { App } from './App';
+import App from './App';
 // import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import reportWebVitals from './reportWebVitals';
 import { AppSettingsProvider } from './providers/AppSettingsProvider';
 import UserProvider from './providers/UserProvider';
+import { config } from "./config";
+
+Sentry.init({
+  dsn: config.SENTRY_DSN,
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    Sentry.replayIntegration(),
+  ],
+  // Performance Monitoring
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ["localhost", config.API_URI],
+  // 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.
+});
 
 ChartJS.register(...registerables);
 

src/utils/fetchSymbols.ts

@@ -1,14 +1,24 @@
+import { z } from 'zod';
+import * as Sentry from '@sentry/react';
 import { config } from '../config';
 import { DEFAULT_SYMBOLS } from '../consts/DefaultSymbols';
 
+// Define the Zod schema for the response
+const responseSchema = z.object({
+  symbols: z.array(z.string()),
+});
+
 export const fetchSymbols = async (): Promise<Array<string>> => {
   try {
     const response = await fetch(`${config.API_URI}/api/symbols`);
+    const jsonResponse = await response.json();
 
-    const { symbols } = await response.json();
+    // Validate the response
+    const parsedResponse = responseSchema.parse(jsonResponse);
 
-    return symbols;
+    return parsedResponse.symbols;
   } catch (error) {
+    Sentry.captureException(error);
     return DEFAULT_SYMBOLS;
   }
 };