line/abc-user-feedback

ABC User Feedback is a standalone web application that manages Voice of Customer (VoC) data. It allows you to gather and sort feedback from your customers.

ABC User Feedback

ABC User Feedback is a standalone web application that manages Voice of Customer (VoC) data. It allows you to gather and sort feedback from your customers. The product is being applied and used in services worth 10 million MAU.

Features

ABC User Feedback provides the following features:

Getting Started

The frontend is built with NextJS and the backend is built with NestJS. We provide Docker images for fast and easy setup.

System Requirements

💡 Before you begin, make sure you have the following installed:

Required

• Node.js v18 or above
• Docker
• MySQL v8

Optional

• SMTP - for mail verification during making accounts
• OpenSearch v7 - for performance on searching feedback

You can use docker-compose.infra.yml file for requirements.

Docker Hub Images

We publish two images to https://hub.docker.com at every release.

Web Admin Frontend

docker pull line/abc-user-feedback-web

API Backend

docker pull line/abc-user-feedback-api

Configuration

Frontend

👉 Go to Frontend README

You can configure the frontend for session password, maximum time span to query, etc.

Backend

👉 Go to Backend README

You can configure the backend for MySQL, SMTP for email verification, OpenSearch-powered improved search experience, etc.

Setup Dev Environment (Local)

ABC User Feedback is using a monorepo (powered by TurboRepo) with multiple apps and packages.

Follow the instructions below to set up a local development environment.

1. Clone the repository and install dependencies:

git clone https://github.com/line/abc-user-feedback
cd abc-user-feedback
yarn install

2. Spin up all required infrastructure (Mysql, OpenSearch, etc.) using Docker Compose:

docker-compose -f docker-compose.infra.yml up -d

3. Make an .env file in apps/api and apps/web by referring to .env.example (web environment variables, api environment variables)

4. Apply database migrations:

cd apps/api
npm run migration:run

5. To start developing, run the dev target of both of apps in root directory:

yarn dev

6. Also, you can run the dev target of one of apps in root directory:

# web
yarn turbo run dev --filter=web

# api
yarn turbo run dev --filter=api

ADMIN WEB GUIDE

For detailed information on using the admin web interface, please refer to our Admin Web Guide.

Build Docker Image

For your code build, you can build docker image using docker-compose. Please refer to remote caching and deploying with docker using turborepo.

docker-compose build

Then, run docker-compose

docker-compose up -d

Contributing Guidelines

Please follow the contributing guidelines to contribute to the project.

License

Copyright 2023 LINE Corporation

LINE Corporation licenses this file to you under the Apache License,
version 2.0 (the "License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at:

  https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations
under the License.

See LICENSE for more details.

abc-user-feedback's Issues

image format

There is no right format to get images as feedbacks. (e.g. a screenshot of bug)

Therefore it would be great if it can have a format for getting images as feedbacks.

It might be great if we get AWS key for uploading to s3 and upload images when the feedbacks come in.

Otherwise just get the image links as feedbacks and make them as hyperlinks on the feedback table view to see the images easily.

db pool connection problems, debug output missing "Pool does Not exists."

I am currently trying to deploy abc-user-feedback in our cloud environment.

The backend throws internal server errors on various requests.

ERROR (1): Pool does Not exists.

However, when manually attaching to the container I am able to connect to my db.
In fact, the migrations are applied. The backend is able to connect to the database.

const mysql = require("mysql2");

var pool = mysql.createPool({
    host: "mydb",
    user: "myuser",
    password: "mypw",
    database: "userfeedback",
    port: 3306,
});

pool.getConnection(function (err, conn) {
    conn.connect((error) => {
        if (error) {
            console.error("Error connecting to MySQL database:", error);
        } else {
            console.log("Connected to MySQL database!");
        }
    });
    conn.query(process.argv.slice(2).join(" "), function (error, results, fields) {
        if (error) throw error;
        console.log("The solution is: ", results);
    });
    conn.release();
});

This is using [email protected] - the same as the backend project

When doing node index.js SELECT \* FROM migrations I get:

[
  { id: 1, timestamp: 1692159572819, name: 'Init1692159572819' },
  {
    id: 2,
    timestamp: 1692690482919,
    name: 'IssueNameUnique1692690482919'
  }
]

I am curious if you have any ideas why the backend throws these internal server errors, eventhough it is cleary able to connect to the database.
Maybe this is because of the virtualized environment where I do not have real or full cpu cores?

Maybe there should be a way to disable connection pooling?

2023-09-27T06:00:46.857615991Z [06:00:46.658] ERROR (1): Pool does Not exists. {"req":{"id":"req-1","method":"GET","url":"/api/tenants","query":{},"headers":{"host":"mydomain","user-agent":"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/117.0","accept":"application/json, text/plain, */*","accept-language":"en-GB,en;q=0.5","accept-encoding":"gzip, deflate, br","origin":"https://mydomain","referer":"https://mydomain/","sec-fetch-dest":"empty","sec-fetch-mode":"cors","sec-fetch-site":"same-site","te":"trailers","x-forwarded-for":"myip","x-envoy-external-address":"myip","x-request-id":"92184c43-fc99-4e62-9bd4-4a3792669b18","x-envoy-expected-rq-timeout-ms":"1800000","x-k8se-app-name":"myappname","x-k8se-app-namespace":"k8se-apps","x-k8se-protocol":"http1","x-k8se-app-kind":"web","x-ms-containerapp-name":"myappname","x-ms-containerapp-revision-name":"myappname","x-arr-ssl":"true","x-forwarded-proto":"https"},"remoteAddress":"10.0.0.19","remotePort":42956},"context":"ExceptionsHandler"}
2023-09-27T06:00:46.857677266Z     err: {
2023-09-27T06:00:46.857685481Z       "type": "Error",
2023-09-27T06:00:46.857691122Z       "message": "Pool does Not exists.",
2023-09-27T06:00:46.857695721Z       "stack":
2023-09-27T06:00:46.857700730Z           Error: Pool does Not exists.
2023-09-27T06:00:46.857706461Z               at PoolNamespace.getConnection (/app/apps/api/node_modules/mysql2/lib/pool_cluster.js:37:17)
2023-09-27T06:00:46.857711660Z               at PoolCluster.getConnection (/app/apps/api/node_modules/mysql2/lib/pool_cluster.js:177:15)
2023-09-27T06:00:46.857717762Z               at /app/apps/api/src/driver/mysql/MysqlDriver.ts:933:30
2023-09-27T06:00:46.857722651Z               at new Promise (<anonymous>)
2023-09-27T06:00:46.857727500Z               at MysqlDriver.obtainSlaveConnection (/app/apps/api/src/driver/mysql/MysqlDriver.ts:932:16)
2023-09-27T06:00:46.857731508Z               at MysqlQueryRunner.connect (/app/apps/api/src/driver/mysql/MysqlQueryRunner.ts:81:18)
2023-09-27T06:00:46.857735926Z               at /app/apps/api/src/driver/mysql/MysqlQueryRunner.ts:191:55
2023-09-27T06:00:46.857740324Z               at new Promise (<anonymous>)
2023-09-27T06:00:46.857744713Z               at MysqlQueryRunner.query (/app/apps/api/src/driver/mysql/MysqlQueryRunner.ts:189:16)
2023-09-27T06:00:46.857749021Z               at SelectQueryBuilder.loadRawResults (/app/apps/api/src/query-builder/SelectQueryBuilder.ts:3789:43)
2023-09-27T06:00:46.857752818Z     }
2023-09-27T06:00:46.859592084Z [06:00:46.659] INFO (1): request errored {"req":{"id":"req-1","method":"GET","url":"/api/tenants","query":{},"headers":{"host":"mydomain","user-agent":"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/117.0","accept":"application/json, text/plain, */*","accept-language":"en-GB,en;q=0.5","accept-encoding":"gzip, deflate, br","origin":"https://mydomain","referer":"https://mydomain/","sec-fetch-dest":"empty","sec-fetch-mode":"cors","sec-fetch-site":"same-site","te":"trailers","x-forwarded-for":"myip","x-envoy-external-address":"myip","x-request-id":"92184c43-fc99-4e62-9bd4-4a3792669b18","x-envoy-expected-rq-timeout-ms":"1800000","x-k8se-app-name":"myappname","x-k8se-app-namespace":"k8se-apps","x-k8se-protocol":"http1","x-k8se-app-kind":"web","x-ms-containerapp-name":"myappname","x-ms-containerapp-revision-name":"myappname","x-arr-ssl":"true","x-forwarded-proto":"https"},"remoteAddress":"10.0.0.19","remotePort":42956},"res":{"statusCode":500,"headers":{}},"responseTime":94}
2023-09-27T06:00:46.859609376Z     err: {
2023-09-27T06:00:46.859616420Z       "type": "Error",
2023-09-27T06:00:46.859621509Z       "message": "failed with status code 500",
2023-09-27T06:00:46.859626639Z       "stack":
2023-09-27T06:00:46.859632059Z           Error: failed with status code 500
2023-09-27T06:00:46.859638020Z               at onResFinished (/app/apps/api/node_modules/pino-http/logger.js:110:39)
2023-09-27T06:00:46.859643571Z               at ServerResponse.onResponseComplete (/app/apps/api/node_modules/pino-http/logger.js:173:14)
2023-09-27T06:00:46.859649021Z               at ServerResponse.emit (node:events:526:35)
2023-09-27T06:00:46.859654762Z               at onFinish (node:_http_outgoing:1001:10)
2023-09-27T06:00:46.859669750Z               at callback (node:internal/streams/writable:555:21)
2023-09-27T06:00:46.859675791Z               at afterWrite (node:internal/streams/writable:500:5)
2023-09-27T06:00:46.859681252Z               at afterWriteTick (node:internal/streams/writable:487:10)
2023-09-27T06:00:46.859686321Z               at processTicksAndRejections (node:internal/process/task_queues:81:21)
2023-09-27T06:00:46.859691581Z     }

Frontend: "yarn dev" Unhandled Runtime Error

I tried to setup up my own local development instance to fix a few bugs I discovered.
However, after doing yarn install and yarn dev I was not able to get the frontend working.

npm: 8.19.3
node: 18.13.0
yarn: 1.22.19

I have never worked with react/next/yarn before, but I tried to follow the readme as close as possible

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

web:dev: Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
web:dev: 
web:dev: Check your code at _app.tsx:59.
web:dev:     at App (webpack-internal:///./src/pages/_app.tsx:52:16)
web:dev:     at I18nextProvider (/home/myuser/dev/abc-user-feedback/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:13:19)
web:dev:     at AppWithTranslation (/home/myuser/dev/abc-user-feedback/node_modules/next-i18next/dist/commonjs/appWithTranslation.js:59:22)
web:dev:     at StyleRegistry (/home/myuser/dev/abc-user-feedback/node_modules/styled-jsx/dist/index/index.js:449:36)
web:dev:     at PathnameContextProviderAdapter (/home/myuser/dev/abc-user-feedback/node_modules/next/dist/shared/lib/router/adapters.js:78:11)
web:dev:     at AppContainer (/home/myuser/dev/abc-user-feedback/node_modules/next/dist/server/render.js:337:29)
web:dev:     at AppContainerWithIsomorphicFiberStructure (/home/myuser/dev/abc-user-feedback/node_modules/next/dist/server/render.js:373:57)
web:dev:     at div
web:dev:     at Body (/home/myuser/dev/abc-user-feedback/node_modules/next/dist/server/render.js:673:21)
web:dev: Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

Provide custom title as an option

Currently, we only have static title ABC User Feedback on admin UI.
It would be good to provide customizable title in configuration.

Improve initial setup experience

1. set default value to .env.sample
2. set MySQL migration to true
3. [reported] describe BASE_URL clearly
4. add locale combobox to Tenant setup
5. change OS to OpenSearch in .env
6. add JWT generator link in .env comment; https://www.javainuse.com/jwtgenerator
7. add Session Password description and generator; (1) https://github.com/vvo/iron-session?tab=readme-ov-file#session-options (2) https://github.com/vvo/iron-session?tab=readme-ov-file#session-options
8. arrange and accumulate required & optional fields in .env for better reading.
9. [reported] check first tenant creation flows
10. [reported] improve Dockerfile and DockerCompose to better isolated manner

Document the scope of API Keys

I created an API key to test some stuff in postman and noticed that not all endpoints are actually allowing authentication via API keys.

{
    "statusCode": 401,
    "message": "Invalid jwt",
    "error": "Unauthorized",
    "path": "/api/projects/1/channels/"
}

Since you create those API keys in the project scope, I felt like this would be a logical step.

If this is not intended by you, I would suggest to document this and add a warning/info field in the client.

Sample feedback and Sequence diagram

Now, I'm trying to use this service and I think this could be helpful to handle user-feedback.

It would be better if the two below were added.

1. Function to generate example feedback on its own before connecting Jira.

This is because it could be helpful to users easily test it before using it in earnest.
I believe "easy/simple" is powerful.

Here's an example. These are on the Settings tab.

2. Sequence diagram for the main functions or Overall system architecture.

This is to better understand this service.

test

i18n

Should fix i18n which has awkward words.

Invalid user/pass in smtpConfig

export const smtpConfig = registerAs('smtp', () => ({
  use: process.env.SMTP_USE === 'true',
  host: process.env.SMTP_HOST,
  port: +process.env.SMTP_PORT,
  password: process.env.SMTP_USERNAME, <---
  username: process.env.SMTP_PASSWORD, <---
  sender: process.env.SMTP_SENDER,
  baseUrl: process.env.SMTP_BASE_URL,
}));

I have found an issue with the SMTP settings.
The username and password are configured in reverse.