(add) エラー報告フォームに動作環境を自動追記

assets/js/misc/get-issue-url.ts

@@ -0,0 +1,66 @@
+import { withQuery } from 'ufo';
+
+export async function getGhIssueUrl(options: {
+    lang: string;
+    repoUrl: string;
+}) {
+    // Issue Templateのプレフィル
+    let environment = `* Model and OS of the device(s):
+* Browser:`;
+    let template = '02_visitor-bug-report-en.yml';
+
+    if (options.lang === 'ja') {
+        template = '01_visitor-bug-report-ja.yml';
+    }
+
+    if (process.client) {
+        //@ts-ignore
+        if ('userAgentData' in navigator && 'getHighEntropyValues' in navigator.userAgentData) {
+            //@ts-ignore
+            const uaData = await navigator.userAgentData.getHighEntropyValues([
+                "fullVersionList",
+                "platformVersion",
+            ]);
+            let osVersion = 'v' + uaData.platformVersion;
+            if (uaData.platform === 'Windows') {
+                // https://learn.microsoft.com/ja-jp/microsoft-edge/web-platform/how-to-detect-win11
+                const majorPlatformVersion = parseInt(uaData.platformVersion.split('.')[0]);
+                if (majorPlatformVersion >= 13) {
+                    osVersion = '11 or later';
+                }
+                else if (majorPlatformVersion > 0) {
+                    osVersion = '10';
+                }
+                else {
+                    osVersion = '8.1 or before';
+                }
+            }
+            const browserData = uaData.fullVersionList.find((item: any) => item.brand.toLowerCase() !== 'not_a brand');
+            const env = [
+                `* Model and OS of the device(s): ${uaData.platform} ${osVersion}`,
+                `* Browser: ${browserData.brand} ${browserData.version}`,
+                `* Viewport Size: ${window.innerWidth}x${window.innerHeight}`,
+                `* (UA Detected Using getHighEntropyValues)`,
+            ];
+            environment = env.join('\n');
+        } else {
+            const UAParser = (await import('ua-parser-js')).default;
+            const ua = new UAParser();
+            const uaRes = ua.getResult();
+            const env = [
+                `* Model and OS of the device(s): ${uaRes.os.name} v${uaRes.os.version}`,
+                `* Browser: ${uaRes.browser.name} (${uaRes.engine.name}) v${uaRes.browser.version}`,
+                `* Viewport Size: ${window.innerWidth}x${window.innerHeight}`,
+                `* Raw User Agent: ${uaRes.ua}`,
+            ];
+            environment = env.join('\n');
+        }
+    }
+
+    return withQuery(`${options.repoUrl}/issues/new`, {
+        template,
+        environment,
+        labels: 'maybe non-developer,bug?',
+    });
+    
+}

error.vue

@@ -15,7 +15,7 @@
                     <p class="text-center mb-4">{{ error?.statusCode === 404 ? $t('_error.notFoundDesc') : $t('_error.generalErrorDesc') }}</p>
                     <div class="max-w-lg w-full mx-auto grid grid-cols-1 sm:grid-cols-2 gap-4">
                         <button class="block rounded-full text-center px-4 py-2 border-2 hover:opacity-70" @click="handleError">{{ $t('_error.goToTop') }}</button>
-                        <GNuxtLink class="block rounded-full text-center px-4 py-2 border-2 hover:opacity-70" target="_blank" :to="`${runtimeConfig.public.repositoryUrl}/issues/new`">{{ $t('_error.reportProblem') }}</GNuxtLink>
+                        <GNuxtLink class="block rounded-full text-center px-4 py-2 border-2 hover:opacity-70" target="_blank" :to="issueReportLink">{{ $t('_error.reportProblem') }}</GNuxtLink>
                     </div>
                 </div>
                 <div v-else class="mx-auto py-5">
@@ -27,7 +27,9 @@
 </template>
 
 <script setup lang="ts">
+import type { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables';
 import NProgress from 'nprogress';
+import { getGhIssueUrl } from './assets/js/misc/get-issue-url';
 
 const error = useError();
 const colorMode = useColorMode();
@@ -49,7 +51,7 @@ const handleError = () => clearError({ redirect: localePath('/') });
  * 中国大陸で Google Fonts を使う裏技
  * fonts.googleapis.com → fonts.googleapis.cn
  **/
- const cnHead = (locale.value === 'cn') ? [
+const cnHead = (locale.value === 'cn') ? [
     { rel: 'preconnect', href: 'https://fonts.googleapis.cn' },
     { rel: 'preconnect', href: 'https://fonts.gstatic.cn' },
     { rel: 'stylesheet', href: 'https://fonts.googleapis.cn/css2?family=Capriola&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap' }
@@ -59,6 +61,13 @@ const handleError = () => clearError({ redirect: localePath('/') });
     { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Capriola&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap' },
 ];
 
+const { data: issueReportLink } = await useAsyncData(`issueReportLink_${locale.value}`, () => getGhIssueUrl({
+    lang: locale.value,
+    repoUrl: runtimeConfig.public.repositoryUrl,
+}), {
+    server: false,
+});
+
 useHead({
     htmlAttrs: {
         lang: currentLocaleIso.value,

package.json

@@ -17,6 +17,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^20.10.5",
     "@types/nprogress": "^0.2.3",
+    "@types/ua-parser-js": "^0.7.39",
     "aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.0.5",
     "autoprefixer": "^10.4.16",
     "bootstrap": "^5.3.2",
@@ -32,6 +33,7 @@
     "schema-dts": "^1.1.2",
     "sitemap": "^7.1.1",
     "tailwindcss": "^3.4.0",
+    "ua-parser-js": "^1.0.37",
     "ufo": "^1.3.2",
     "vite-svg-loader": "^4.0.0"
   },

pnpm-lock.yaml

@@ -34,6 +34,9 @@ devDependencies:
   '@types/nprogress':
     specifier: ^0.2.3
     version: 0.2.3
+  '@types/ua-parser-js':
+    specifier: ^0.7.39
+    version: 0.7.39
   aiscript-vscode:
     specifier: github:aiscript-dev/aiscript-vscode#v0.0.5
     version: github.com/aiscript-dev/aiscript-vscode/a8fa5bb41885391cdb6a6e3165eaa6e4868da86e
@@ -79,6 +82,9 @@ devDependencies:
   tailwindcss:
     specifier: ^3.4.0
     version: 3.4.0
+  ua-parser-js:
+    specifier: ^1.0.37
+    version: 1.0.37
   ufo:
     specifier: ^1.3.2
     version: 1.3.2
@@ -2304,6 +2310,10 @@ packages:
       '@types/node': 20.10.5
     dev: true
 
+  /@types/ua-parser-js@0.7.39:
+    resolution: {integrity: sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==}
+    dev: true
+
   /@types/unist@2.0.10:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
     dev: true
@@ -7785,6 +7795,10 @@ packages:
     hasBin: true
     dev: true
 
+  /ua-parser-js@1.0.37:
+    resolution: {integrity: sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==}
+    dev: true
+
   /ufo@1.3.2:
     resolution: {integrity: sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==}
     dev: true