.gitignore

@@ -23,4 +23,6 @@ yarn-error.log*
 
 .env
 ./.env
-**/.env 
+**/.env 
+# Sentry Config File
+.env.sentry-build-plugin

package.json

@@ -11,6 +11,7 @@
     "@material-ui/icons": "^4.9.1",
     "@mdi/font": "^3.5.95",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
+    "@sentry/react": "^7.114.0",
     "@svgr/webpack": "5.5.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -186,6 +187,7 @@
     "@babel/helper-call-delegate": "^7.12.13",
     "@babel/helper-regex": "^7.10.5",
     "@babel/preset-env": "^7.20.2",
+    "@sentry/webpack-plugin": "^2.16.1",
     "@types/linkify-it": "^3.0.2",
     "@types/lodash": "^4.14.175",
     "@types/react-linkify": "^1.0.1",

src/App.tsx

@@ -14,6 +14,23 @@ import "moment/locale/uk";
 import locale from "antd/lib/locale/uk_UA";
 import { appService } from "./services/system/app.service";
 
+import * as Sentry from "@sentry/react";
+
+Sentry.init({
+  dsn:
+    "https://9567500c736db7c1e6f5cc0735b76a5a@o402114.ingest.us.sentry.io/4507232702627840",
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    Sentry.replayIntegration(),
+  ],
+  // Performance Monitoring
+  tracesSampleRate: 1.0,
+  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
+  // 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.
+});
+
 const App = () => {
   React.useEffect(() => {
     appService.initApp();

src/containers/Chats/plugins/chat-item-message.component.tsx

@@ -87,9 +87,10 @@ const _ChatItemMessage: FC<ChatItemMessageProps> = (props) => {
                 } as IOptionsData
               }
             >
-              {resultMessage.split("  ").map((item) =>
+              {resultMessage.split("  ").map((item, key) =>
                 item.includes("@") && findMentionId(item) ? (
                   <a
+                    key={key}
                     onClick={() => {
                       const userId = findMentionId(item);
                       props.onMentionPress(userId);