lit-issue-reporter

This library allows anyone to submit issues directly from a web application.
It is made of web-component (lit), provided as an ES module, and can be used in various FWs and designs.

Vanilla JS, React, Vue, Svelte ...

DEMO

https://user-images.githubusercontent.com/3760515/183294974-fb73c893-357e-42c2-9b0c-f4e7f24e51b1.mp4

Browsers support

| IE / Edge | Firefox | Chrome | Safari | | --------- | --------- | --------- | --------- | | Edge| last 2 versions| last 2 versions| last 2 versions

🤔 Why is this needed?

During application development, when reporting a problem, it may not be easy for a non-engineer to intuitively imagine the information needed for verification.

This library, in addition to GitHub's Issue Template feature, automatically supplements the user's environment information to aid reproducibility.

✨ Features

• 📝 Provide a form for the web application to submit a form (using GitHub API v4)
• 🗂️ Issue Templates configured in the repository can be used
• 🔦 Automatically adds information such as location, browser, OS, screen size, and monitor resolution
• 🌏 All text in the form UI can be replaced with arbitrary text
• 📸 Additional screenshot data can be added (available but in development)

📦 Install

yarn add lit-issue-reporter

🐣 Usage

Prepare

You must first issue a personal access token (PAT) with access permission to any repository from settings/tokens.

From version 0.7.0, Fine-grained personal access tokens are now supported. This update allows you to apply restrictions to specific repositories and limit the scope to Issue operations only.

• Personal access tokens (classic) are deprecated as they require the repo scope, which poses security risks by granting overly broad permissions.
• Please manage tokens separately for each environment (such as in dedicated .env files) to ensure they are not included in production builds.

Setup

if (process.env.NODE_ENV !== 'production') {
  import('lit-issue-reporter').then(({ createReporter }) => {
    createReporter({
      token: process.env.GITHUB_TOKEN,
      owner: '<GITHUB_USER_NAME>',
      repository: '<GITHUB_REPOSITORY_NAME>',
    })
  })
}

Then add to any position.

...
<issue-reporter></issue-reporter>
</body>

Finally, add a style.

@import 'lit-issue-reporter/dist/style.css';

Options

| key | type | default | description | |:--|:--|:--|:--| | lang | 'ja' \| 'en' | 'ja' | i18n by lit-translate | | stringsLoader | (lang) => Promise<Strings> | (lang) => import(./locales/${lang}.json) | Can be replaced by specifying any loader | | noticeDuration | number | 4000 | Notification time to open issues | | insertFrom | boolean | true | The following text will be inserted at the end of the body. Sent by lit-issue-repoter |

License

lit-issue-reporter is available under the MIT License.