Error Bounary Sentry support (#444)

* Sentry support

* remove broken import

Co-authored-by: Jamie Pine <32987599+jamiepine@users.noreply.github.com>
Co-authored-by: Jamie Pine <ijamespine@me.com>

packages/interface/package.json

@@ -25,6 +25,7 @@
 		"@sd/assets": "workspace:*",
 		"@sd/client": "workspace:*",
 		"@sd/ui": "workspace:*",
+		"@sentry/browser": "^7.16.0",
 		"@splinetool/react-spline": "^2.2.3",
 		"@splinetool/runtime": "^0.9.128",
 		"@tailwindcss/forms": "^0.5.3",

packages/interface/src/App.tsx

@@ -1,5 +1,6 @@
 import '@fontsource/inter/variable.css';
 import { LibraryContextProvider, queryClient, useDebugState } from '@sd/client';
+import { init } from '@sentry/browser';
 import { QueryClientProvider, defaultContext } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import dayjs from 'dayjs';
@@ -17,6 +18,10 @@ dayjs.extend(advancedFormat);
 dayjs.extend(relativeTime);
 dayjs.extend(duration);
 
+init({
+	dsn: 'https://2fb2450aabb9401b92f379b111402dbc@o1261130.ingest.sentry.io/4504053670412288'
+});
+
 export default function SpacedriveInterface() {
 	return (
 		<ErrorBoundary FallbackComponent={ErrorFallback}>

packages/interface/src/ErrorFallback.tsx

@@ -1,13 +1,25 @@
-import { rspc, usePlatform } from '@sd/client';
+import { usePlatform } from '@sd/client';
 import { Button } from '@sd/ui';
+import { captureException } from '@sentry/browser';
 import { FallbackProps } from 'react-error-boundary';
 
-import { guessOperatingSystem } from './hooks/useOperatingSystem';
-
 export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
 	const platform = usePlatform();
 	const version = 'unknown'; // TODO: Embed the version into the frontend via ENV var when compiled so we can use it here.
 
+	const onClick = () => {
+		console.log('TODO', error);
+		captureException(error);
+		// platform.openLink(
+		// 	`https://github.com/spacedriveapp/spacedrive/issues/new?assignees=&labels=kind%2Fbug%2Cstatus%2Fneeds-triage&template=bug_report.yml&logs=${encodeURIComponent(
+		// 		error.toString()
+		// 	)}&info=${encodeURIComponent(
+		// 		`App version ${version} running on ${guessOperatingSystem() || 'unknown'}`
+		// 	)}`
+		// );
+		resetErrorBoundary();
+	};
+
 	return (
 		<div
 			data-tauri-drag-region
@@ -21,21 +33,7 @@ export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
 				<Button variant="accent" className="mt-2" onClick={resetErrorBoundary}>
 					Reload
 				</Button>
-				<Button
-					variant="gray"
-					className="mt-2"
-					onClick={() => {
-						platform.openLink(
-							`https://github.com/spacedriveapp/spacedrive/issues/new?assignees=&labels=kind%2Fbug%2Cstatus%2Fneeds-triage&template=bug_report.yml&logs=${encodeURIComponent(
-								error.toString()
-							)}&info=${encodeURIComponent(
-								`App version ${version} running on ${guessOperatingSystem() || 'unknown'}`
-							)}`
-						);
-
-						resetErrorBoundary();
-					}}
-				>
+				<Button variant="gray" className="mt-2" onClick={onClick}>
 					Send report
 				</Button>
 			</div>

packages/interface/src/screens/Photos.tsx

@@ -1,5 +1,3 @@
-import Spline from '@splinetool/react-spline';
-
 export default function PhotosScreen() {
 	return (
 		<div className="flex flex-col w-full h-screen p-5 custom-scroll page-scroll app-background">

pnpm-lock.yaml

@@ -416,6 +416,7 @@ importers:
       '@sd/client': workspace:*
       '@sd/config': workspace:*
       '@sd/ui': workspace:*
+      '@sentry/browser': ^7.16.0
       '@splinetool/react-spline': ^2.2.3
       '@splinetool/runtime': ^0.9.128
       '@tailwindcss/forms': ^0.5.3
@@ -465,6 +466,7 @@ importers:
       '@sd/assets': link:../assets
       '@sd/client': link:../client
       '@sd/ui': link:../ui
+      '@sentry/browser': 7.16.0
       '@splinetool/react-spline': 2.2.3_lzjdincs7igsg3b2ch4qc2di4m
       '@splinetool/runtime': 0.9.128
       '@tailwindcss/forms': 0.5.3_tailwindcss@3.1.8
@@ -2133,8 +2135,8 @@ packages:
       '@cspell/dict-docker': 1.1.1
       '@cspell/dict-dotnet': 2.0.1
       '@cspell/dict-elixir': 2.0.1
-      '@cspell/dict-en-gb': 1.1.33
       '@cspell/dict-en_us': 2.3.3
+      '@cspell/dict-en-gb': 1.1.33
       '@cspell/dict-filetypes': 2.1.1
       '@cspell/dict-fonts': 2.1.0
       '@cspell/dict-fullstack': 2.0.6
@@ -4921,6 +4923,38 @@ packages:
       join-component: 1.1.0
     dev: false
 
+  /@sentry/browser/7.16.0:
+    resolution: {integrity: sha512-tJ063zvoF8Raw7mzQEXupOFPSN6v36WIbsDVGeFdToPCwViaBuATaxvWCrudGzsnBkMyItmTLJkzn9SEIXUOiw==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/core': 7.16.0
+      '@sentry/types': 7.16.0
+      '@sentry/utils': 7.16.0
+      tslib: 1.14.1
+    dev: false
+
+  /@sentry/core/7.16.0:
+    resolution: {integrity: sha512-vq6H1b/IPTvzDD9coQ3wIudvSjkAYuUlXb1dv69dRlq4v3st9dcKBps1Zf0lQ1i4TVlDLoe1iGMmNFglMF1Q5w==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/types': 7.16.0
+      '@sentry/utils': 7.16.0
+      tslib: 1.14.1
+    dev: false
+
+  /@sentry/types/7.16.0:
+    resolution: {integrity: sha512-i6D+OK6d0l/k+VQvRp/Pt21WkDEgVBUIZq+sOkEZJczbcfexVdXKeXXoYTD2vYuFq8Yy28fzlsZaKI+NoH94yQ==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /@sentry/utils/7.16.0:
+    resolution: {integrity: sha512-3Zh1txg7IRp4kZAdG27YF7K6lD1IZyuAo9KjoPg1Xzqa4DOZyASJuEkbf+rK2a9T4HrtVHHXJUsNbKg8WM3VHg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/types': 7.16.0
+      tslib: 1.14.1
+    dev: false
+
   /@sideway/address/4.1.4:
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
     dependencies: