Add detailed stack info in error report button

Closes #577

app/src/modules/settings/components/navigation.vue

@@ -26,12 +26,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs } from '@vue/composition-api';
+import { defineComponent, toRefs, computed } from '@vue/composition-api';
 import { i18n } from '@/lang';
 import { version } from '../../../../package.json';
+import { useProjectInfo } from '../composables/use-project-info';
 
 export default defineComponent({
 	setup() {
+		const { parsedInfo } = useProjectInfo();
+
 		const navItems = [
 			{
 				icon: 'public',
@@ -61,20 +64,33 @@ export default defineComponent({
 			},
 		];
 
-		const externalItems = [
-			{
-				icon: 'bug_report',
-				name: i18n.t('report_bug'),
-				href: 'https://github.com/directus/next/issues/new?body=%23%23%23+Project+Details%0A%60%60%60%0ADirectus+Version:+'+version+'%0AEnvironment:+Development%0AOS:+Mac%0ADatabase:+MySQL+5.2%0A%60%60%60',
-				outline: true,
-			},
-			{
-				icon: 'new_releases',
-				name: i18n.t('request_feature'),
-				href: 'https://github.com/directus/next/discussions/new',
-				outline: true,
-			},
-		];
+		const externalItems = computed(() => {
+			const debugInfo = `<!-- Please put a detailed explanation of the problem here. -->
+
+---
+
+### Project details
+Directus Version: ${parsedInfo.value?.directus.version}
+Environment: ${process.env.NODE_ENV}
+OS: ${parsedInfo.value?.os.type} ${parsedInfo.value?.os.version}
+Node: ${parsedInfo.value?.node.version}
+			`;
+
+			return [
+				{
+					icon: 'bug_report',
+					name: i18n.t('report_bug'),
+					href: `https://github.com/directus/next/issues/new?body=${encodeURIComponent(debugInfo)}`,
+					outline: true,
+				},
+				{
+					icon: 'new_releases',
+					name: i18n.t('request_feature'),
+					href: 'https://github.com/directus/next/discussions/new',
+					outline: true,
+				},
+			];
+		});
 
 		return { version, navItems, externalItems };
 	},

app/src/modules/settings/composables/use-project-info.ts

@@ -0,0 +1,66 @@
+import { ref, computed } from '@vue/composition-api';
+import prettyMS from 'pretty-ms';
+import bytes from 'bytes';
+import api from '@/api';
+
+type ServerInfo = {
+	directus: {
+		version: string;
+	};
+	node: {
+		version: string;
+		uptime: number;
+	};
+	os: {
+		type: string;
+		version: string;
+		uptime: number;
+		totalmem: number;
+	};
+};
+
+export function useProjectInfo() {
+	const info = ref<ServerInfo>();
+	const loading = ref(false);
+	const error = ref<any>();
+
+	const parsedInfo = computed(() => {
+		if (!info.value) return null;
+
+		return {
+			directus: {
+				version: info.value.directus.version,
+			},
+			node: {
+				version: info.value.node.version,
+				uptime: prettyMS(info.value.node.uptime * 1000),
+			},
+			os: {
+				type: info.value.os.type,
+				version: info.value.os.version,
+				uptime: prettyMS(info.value.os.uptime * 1000),
+				totalmem: bytes(info.value.os.totalmem),
+			},
+		};
+	});
+
+	if (!info.value) {
+		fetchInfo();
+	}
+
+	return { info, parsedInfo, loading, error };
+
+	async function fetchInfo() {
+		loading.value = true;
+		error.value = null;
+
+		try {
+			const response = await api.get('/server/info');
+			info.value = response.data.data;
+		} catch (err) {
+			error.value = err;
+		} finally {
+			loading.value = false;
+		}
+	}
+}

app/src/modules/settings/routes/project/components/project-info-drawer-detail.vue

@@ -45,66 +45,13 @@ import { version } from '../../../../../../package.json';
 import bytes from 'bytes';
 import prettyMS from 'pretty-ms';
 import api from '@/api';
-
-type ServerInfo = {
-	directus: {
-		version: string;
-	};
-	node: {
-		version: string;
-		uptime: number;
-	};
-	os: {
-		type: string;
-		version: string;
-		uptime: number;
-		totalmem: number;
-	};
-};
+import { useProjectInfo } from '../../../composables/use-project-info';
 
 export default defineComponent({
 	setup() {
-		const info = ref<ServerInfo>();
-		const loading = ref(false);
-		const error = ref<any>();
+		const { parsedInfo } = useProjectInfo();
 
-		const parsedInfo = computed(() => {
-			if (!info.value) return null;
-
-			return {
-				directus: {
-					version: info.value.directus.version,
-				},
-				node: {
-					version: info.value.node.version,
-					uptime: prettyMS(info.value.node.uptime * 1000),
-				},
-				os: {
-					type: info.value.os.type,
-					version: info.value.os.version,
-					uptime: prettyMS(info.value.os.uptime * 1000),
-					totalmem: bytes(info.value.os.totalmem),
-				},
-			};
-		});
-
-		fetchInfo();
-
-		return { parsedInfo, loading, error, marked };
-
-		async function fetchInfo() {
-			loading.value = true;
-			error.value = null;
-
-			try {
-				const response = await api.get('/server/info');
-				info.value = response.data.data;
-			} catch (err) {
-				error.value = err;
-			} finally {
-				loading.value = false;
-			}
-		}
+		return { parsedInfo, marked };
 	},
 });
 </script>