send report button working on error boundary

apps/desktop/src/index.tsx

@@ -29,6 +29,7 @@ async function getOs(): Promise<OperatingSystem> {
 const platform: Platform = {
 	platform: 'tauri',
 	getThumbnailUrlById: (casId) => `spacedrive://thumbnail/${encodeURIComponent(casId)}`,
+	openLink: open,
 	getOs,
 	openFilePickerDialog: () => dialog.open({ directory: true })
 };

apps/web/src/App.tsx

@@ -12,6 +12,7 @@ const client = createClient<Operations>({
 const platform: Platform = {
 	platform: 'web',
 	getThumbnailUrlById: (casId) => `spacedrive://thumbnail/${encodeURIComponent(casId)}`,
+	openLink: (url) => window.open(url, '_blank')?.focus(),
 	demoMode: true
 };
 

packages/client/src/context/Platform.tsx

@@ -7,6 +7,7 @@ export type OperatingSystem = 'browser' | 'linux' | 'macOS' | 'windows' | 'unkno
 export type Platform = {
 	platform: 'web' | 'tauri'; // This represents the specific platform implementation
 	getThumbnailUrlById: (casId: string) => string;
+	openLink: (url: string) => void;
 	demoMode?: boolean; // TODO: Remove this in favour of demo mode being handled at the React Query level
 	getOs?(): Promise<OperatingSystem>;
 	openFilePickerDialog?(): Promise<null | string | string[]>;

packages/interface/src/ErrorFallback.tsx

@@ -1,7 +1,13 @@
+import { rspc, usePlatform } from '@sd/client';
 import { Button } from '@sd/ui';
 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.
+
 	return (
 		<div
 			data-tauri-drag-region
@@ -15,7 +21,21 @@ export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
 				<Button variant="primary" className="mt-2" onClick={resetErrorBoundary}>
 					Reload
 				</Button>
-				<Button variant="gray" className="mt-2" onClick={resetErrorBoundary}>
+				<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();
+					}}
+				>
 					Send report
 				</Button>
 			</div>

packages/interface/src/hooks/useOperatingSystem.ts

@@ -1,7 +1,7 @@
 import { OperatingSystem, usePlatform } from '@sd/client';
 import { useQuery } from '@tanstack/react-query';
 
-function guessOperatingSystem(): OperatingSystem {
+export function guessOperatingSystem(): OperatingSystem {
 	let os: OperatingSystem = 'unknown';
 	if (navigator.userAgent.indexOf('Win') != -1) os = 'windows';
 	if (navigator.userAgent.indexOf('Mac') != -1) os = 'macOS';