Merge pull request #32 from whale4113/feat/lujunji/bug-report

feat(chrome-extension): support bug report

Author: whale4113

.changeset/brown-suits-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@dolphin/chrome-extension': minor
+---
+
+feat: support bug report

apps/chrome-extension/package.json

@@ -20,6 +20,7 @@
     "@dolphin/typescript-config": "workspace:^",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
@@ -37,6 +38,7 @@
     "browser-fs-access": "^0.35.0",
     "filenamify": "^6.0.0",
     "i18next": "^23.16.4",
-    "radash": "^12.1.0"
+    "radash": "^12.1.0",
+    "serialize-error": "^12.0.0"
   }
 }

apps/chrome-extension/rollup.config.js

@@ -1,6 +1,7 @@
 import { defineConfig } from 'rollup'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import typescript from '@rollup/plugin-typescript'
+import json from '@rollup/plugin-json'
 import commonjs from '@rollup/plugin-commonjs'
 import { babel } from '@rollup/plugin-babel'
 import terser from '@rollup/plugin-terser'
@@ -21,6 +22,7 @@ const createSharedPlugins = (options = {}) => {
       exclude: [/node_modules\/core-js/],
     }),
     commonjs(),
+    json(),
     ...(isDev ? [] : [terser()]),
   ]
 

apps/chrome-extension/src/common/i18n.ts

@@ -7,18 +7,102 @@ export enum Namespace {
 export enum CommonTranslationKey {
   CONTINUE = 'continue',
   CONFIRM_TEXT = 'confirm_text',
+  CONFIRM_REPORT_BUG = 'confirm_report_bug',
+  ISSUE_TEMPLATE_BODY = 'issue_template_body',
 }
 
 export const en: ResourceLanguage = {
   common: {
     [CommonTranslationKey.CONTINUE]: 'Please click Confirm to continue',
     [CommonTranslationKey.CONFIRM_TEXT]: 'Confirm',
+    [CommonTranslationKey.CONFIRM_REPORT_BUG]: 'Report Bug',
+    [CommonTranslationKey.ISSUE_TEMPLATE_BODY]: `
+**Description**
+
+A clear and concise description of what the bug is.
+
+**Recording**
+
+A GIF or video showing the issue happening. (If you don't include this, there's a very good chance your issue will be closed, because it's much too hard to figure out exactly what is going wrong, and it makes maintenance much harder.)
+
+**Example Document**
+
+A link to a Lark Document where the error can be reproduced. (Please ensure that the documentation is publicly accessible.)
+
+**Steps**
+
+To reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expectation**
+
+A clear and concise description of what you expected to happen.
+
+**Environment**
+
+- Extension Version: {{version}}
+- Browser: [e.g. Chrome, Edge]
+
+**Context**
+
+Add any other context about the problem here. (The fastest way to have an issue fixed is to create a pull request with working, tested code and we'll help merge it.)
+
+**Error Information**
+\`\`\`json
+{{errorInfo}}
+\`\`\`
+`,
   },
 }
 
 export const zh: ResourceLanguage = {
   common: {
     [CommonTranslationKey.CONTINUE]: '请点击确认以继续',
     [CommonTranslationKey.CONFIRM_TEXT]: '确认',
+    [CommonTranslationKey.CONFIRM_REPORT_BUG]: '报告错误',
+    [CommonTranslationKey.ISSUE_TEMPLATE_BODY]: `
+**问题描述**
+
+清晰简洁地描述这个 Bug 是什么。
+
+**录屏**
+
+展示问题发生的 GIF 或视频。（如果不包含这个，你的问题很可能会被关闭，因为很难准确了解问题出在哪里，这会使维护变得更加困难。）
+
+**示例文档**
+
+一个可以重现错误的飞书文档链接。（请确保文档是公开可访问的。）
+
+**复现步骤**
+
+重现该行为的步骤：
+
+1. 前往 '...'
+2. 点击 '....'
+3. 滚动到 '....'
+4. 看到错误
+
+**期望行为**
+
+清晰简洁地描述你期望发生的情况。
+
+**环境信息**
+
+- 扩展版本：{{version}}
+- 浏览器：[例如 Chrome、Edge]
+
+**上下文**
+
+在此添加关于该问题的任何其他上下文。（修复问题最快的方法是创建一个包含已经过测试的可用代码的 Pull Request，我们会协助合并。）
+
+**错误信息**
+\`\`\`json
+{{errorInfo}}
+\`\`\`
+`,
   },
 }

apps/chrome-extension/src/common/issue.ts

@@ -0,0 +1,61 @@
+import i18next from 'i18next'
+import { serializeError } from 'serialize-error'
+import { CommonTranslationKey, Namespace } from './i18n'
+import { version } from '../../package.json'
+
+interface Issue {
+  /**
+   * Title
+   */
+  title: string
+  /**
+   * Description
+   */
+  body: string
+  /**
+   * Labels
+   */
+  labels?: Label[]
+  /**
+   * Issue template
+   */
+  template: string
+}
+
+enum Label {
+  /**
+   * Something isn't working
+   */
+  Bug = 'bug',
+}
+
+function generateIssueUrl(issue: Issue): string {
+  const { title, body, labels = [], template } = issue
+
+  const baseUrl =
+    'https://github.com/whale4113/cloud-document-converter/issues/new'
+  const params = new URLSearchParams({
+    title: title,
+    body: body,
+    labels: labels.join(','),
+    template,
+  })
+
+  return `${baseUrl}?${params.toString()}`
+}
+
+export const reportBug = (error: unknown) => {
+  const url = generateIssueUrl({
+    title: '',
+    body: i18next.t(CommonTranslationKey.ISSUE_TEMPLATE_BODY, {
+      version,
+      errorInfo: JSON.stringify(serializeError(error), null, 2),
+      ns: Namespace.COMMON,
+      interpolation: { escapeValue: false },
+    }),
+    labels: [Label.Bug],
+    template: 'bug.md',
+  })
+
+  window.open(url, '__blank')
+}

apps/chrome-extension/src/scripts/copy-lark-docx-as-markdown.ts

@@ -2,8 +2,9 @@ import i18next from 'i18next'
 import { Docx, docx, Toast } from '@dolphin/lark'
 import { generatePublicUrl, makePublicUrlEffective } from '@dolphin/lark/image'
 import { isDefined } from '@dolphin/common'
-import { en, zh } from '../common/i18n'
+import { CommonTranslationKey, en, Namespace, zh } from '../common/i18n'
 import { confirm } from '../common/notification'
+import { reportBug } from '../common/issue'
 
 const enum TranslationKey {
   FAILED_TO_COPY_IMAGES = 'failed_to_copy_images',
@@ -102,8 +103,14 @@ const main = async () => {
   }
 }
 
-main().catch(() => {
+main().catch(error => {
   Toast.error({
     content: i18next.t(TranslationKey.UNKNOWN_ERROR),
+    actionText: i18next.t(CommonTranslationKey.CONFIRM_REPORT_BUG, {
+      ns: Namespace.COMMON,
+    }),
+    onActionClick: () => {
+      reportBug(error)
+    },
   })
 })

apps/chrome-extension/src/scripts/download-lark-docx-as-markdown.ts

@@ -4,9 +4,10 @@ import { fileSave, supported } from 'browser-fs-access'
 import { fs } from '@zip.js/zip.js'
 import normalizeFileName from 'filenamify/browser'
 import { cluster } from 'radash'
-import { en, zh } from '../common/i18n'
+import { CommonTranslationKey, en, Namespace, zh } from '../common/i18n'
 import { confirm } from '../common/notification'
 import { legacyFileSave } from '../common/legacy'
+import { reportBug } from '../common/issue'
 
 const DOWNLOAD_ABORTED = 'Download aborted'
 
@@ -212,11 +213,17 @@ const downloadImage = async (
     }
 
     return null
-  } catch {
+  } catch (error) {
     Toast.error({
       content: i18next.t(TranslationKey.FAILED_TO_DOWNLOAD, {
         name: originName,
       }),
+      actionText: i18next.t(CommonTranslationKey.CONFIRM_REPORT_BUG, {
+        ns: Namespace.COMMON,
+      }),
+      onActionClick: () => {
+        reportBug(error)
+      },
     })
 
     return null
@@ -274,6 +281,12 @@ const downloadFile = async (
       content: i18next.t(TranslationKey.FAILED_TO_DOWNLOAD, {
         name,
       }),
+      actionText: i18next.t(CommonTranslationKey.CONFIRM_REPORT_BUG, {
+        ns: Namespace.COMMON,
+      }),
+      onActionClick: () => {
+        reportBug(error)
+      },
     })
 
     return null
@@ -450,7 +463,15 @@ main()
   })
   .catch((error: DOMException | TypeError | Error) => {
     if (error.name !== 'AbortError' && error.message !== DOWNLOAD_ABORTED) {
-      Toast.error({ content: String(error) })
+      Toast.error({
+        content: String(error),
+        actionText: i18next.t(CommonTranslationKey.CONFIRM_REPORT_BUG, {
+          ns: Namespace.COMMON,
+        }),
+        onActionClick: () => {
+          reportBug(error)
+        },
+      })
     }
   })
   .finally(() => {