Merge pull request #49 from zer0-os/feat/sentry

* chore: install `@sentry/react`

* feat: initialise Sentry

* feat: remove error button

* chore: change sentry org

* chore: error button to test sentry

* chore: remove `tracePropogationTargets`

* feat: remove error button

* feat: log transaction errors

.gitignore

@@ -29,3 +29,6 @@ yarn-error.log*
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+# Sentry Config File
+.env.sentry-build-plugin

dev-environment/src/components/DevApp.tsx

@@ -8,8 +8,12 @@ import { useAccount, useConnect } from 'wagmi';
 import { useEthersProvider } from '../lib/useEthersProvider';
 import { injectedConnector } from '../lib/connectors';
 
+import * as Sentry from '@sentry/react';
+
 import { DevControls } from './DevControls';
 
+const SentryRoute = Sentry.withSentryRouting(Route);
+
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 const RPC_URL = import.meta.env.VITE_RPC_URL_1;
@@ -32,7 +36,7 @@ export const DevApp = () => {
 		<>
 			<DevControls />
 			<Switch>
-				<Route
+				<SentryRoute
 					path="/:znsRoute/:app"
 					component={() => (
 						<StakingZApp
@@ -48,9 +52,9 @@ export const DevApp = () => {
 						/>
 					)}
 				/>
-				<Route>
+				<SentryRoute>
 					<Redirect to={'/0.wilder/staking/pools'} />
-				</Route>
+				</SentryRoute>
 			</Switch>
 		</>
 	);

dev-environment/src/lib/instrument.ts

@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/react';
+
+// @ts-ignore
+const { VITE_SENTRY_DSN } = import.meta.env;
+
+Sentry.init({
+	dsn: VITE_SENTRY_DSN,
+	integrations: [
+		Sentry.reactRouterV5BrowserTracingIntegration({ history }),
+		Sentry.replayIntegration(),
+	],
+	tracesSampleRate: 1.0,
+	replaysSessionSampleRate: 0.1,
+	replaysOnErrorSampleRate: 1.0,
+});

dev-environment/src/main.tsx

@@ -1,3 +1,4 @@
+import './lib/instrument';
 import './vite-setup';
 
 import React from 'react';

dev-environment/vite.config.ts

@@ -1,11 +1,20 @@
+import { sentryVitePlugin } from '@sentry/vite-plugin';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [react(), tsconfigPaths(), nodePolyfills()],
+	plugins: [
+		react(),
+		tsconfigPaths(),
+		nodePolyfills(),
+		sentryVitePlugin({
+			org: 'factory-5k',
+			project: 'zapp-staking',
+		}),
+	],
 	root: 'dev-environment',
 	resolve: {
 		alias: {
@@ -16,4 +25,7 @@ export default defineConfig({
 	define: {
 		VITE_STAKING_SUPABASE_URL: process.env.VITE_STAKING_SUPABASE_URL,
 	},
+	build: {
+		sourcemap: true,
+	},
 });