Merge pull request #114 from danielemery/113-add-sentry-error-tracking

Add basic sentry error tracking

Author: danielemery

env.schema.js

@@ -7,5 +7,7 @@ module.exports = Joi.object()
     VITE_AUTH0_CLIENT_ID: Joi.string().required(),
     VITE_AUTH0_AUDIENCE: Joi.string().uri().required(),
     VITE_QUIZLORD_VERSION: Joi.string().default('development'),
+    VITE_ENVIRONMENT_NAME: Joi.string().default('local'),
+    VITE_SENTRY_DSN: Joi.string().uri().optional(),
   })
   .required();

package-lock.json

@@ -20,6 +20,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@sentry/browser": "^9.6.0",
     "classnames": "^2.3.1",
     "date-fns": "^4.1.0",
     "docker-react": "^0.0.3",

package.json

@@ -7,6 +7,7 @@ import AuthorizedApolloProvider from './AuthorizedApolloProvider';
 import QuizlordProvider from './QuizlordProvider';
 import { App } from './app';
 import './index.css';
+import './tools/sentry';
 
 render(
   <Auth0Provider

src/main.tsx

@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/browser';
+
+Sentry.init({
+  environment: window.env.VITE_ENVIRONMENT_NAME,
+  dsn: window.env.VITE_SENTRY_DSN,
+  release: `quizlord-client@${window.env.VITE_QUIZLORD_VERSION}`,
+  integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+  tracesSampleRate: 1.0,
+  tracePropagationTargets: [window.env.VITE_GRAPH_API_URI],
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+});

src/tools/sentry.ts

@@ -4,6 +4,8 @@ export interface IEnvValues {
   VITE_AUTH0_CLIENT_ID: string;
   VITE_AUTH0_AUDIENCE: string;
   VITE_QUIZLORD_VERSION: string;
+  VITE_ENVIRONMENT_NAME: string;
+  VITE_SENTRY_DSN?: string;
 }
 
 declare global {