@crowdin/app-project-module 0.38.0 → 0.39.0

package/out/handlers/integration/crowdin-file-progress.js

@@ -10,14 +10,26 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("../../util");
+const logger_1 = require("../../util/logger");
 function handle(integration) {
     return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
         const fileId = Number(req.params.fileId || req.body.fileId);
         req.logInfo(`Loading translation progress for file ${fileId}`);
         if (integration.getFileProgress) {
-            const progress = yield integration.getFileProgress(req.crowdinContext.jwtPayload.context.project_id, req.crowdinApiClient, fileId);
-            req.logInfo(`Translation progress for file ${fileId} ${JSON.stringify(progress, null, 2)}`);
-            res.send(progress);
+            try {
+                const progress = yield integration.getFileProgress(req.crowdinContext.jwtPayload.context.project_id, req.crowdinApiClient, fileId);
+                req.logInfo(`Translation progress for file ${fileId} ${JSON.stringify(progress, null, 2)}`);
+                res.send(progress);
+            }
+            catch (e) {
+                yield (0, logger_1.handleUserError)({
+                    action: 'Get Crowdin files progress',
+                    error: e,
+                    crowdinId: req.crowdinContext.crowdinId,
+                    clientId: req.crowdinContext.clientId,
+                });
+                throw e;
+            }
         }
         else {
             res.send({});

package/out/handlers/integration/crowdin-files.js

@@ -11,17 +11,29 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("../../util");
 const defaults_1 = require("../../util/defaults");
+const logger_1 = require("../../util/logger");
 function handle(config, integration) {
     return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
         req.logInfo('Loading crowdin files');
         if (integration.getCrowdinFiles) {
             const rootFolder = yield (0, defaults_1.getRootFolder)(config, integration, req.crowdinApiClient, req.crowdinContext.jwtPayload.context.project_id);
             req.logInfo(`Loading files ${rootFolder ? `from folder ${rootFolder.id}` : 'from root'}`);
-            const files = integration.getCrowdinFiles
-                ? yield integration.getCrowdinFiles(req.crowdinContext.jwtPayload.context.project_id, req.crowdinApiClient, rootFolder, req.integrationSettings)
-                : [];
-            req.logInfo(`Returning ${files.length} files`);
-            res.send(files);
+            try {
+                const files = integration.getCrowdinFiles
+                    ? yield integration.getCrowdinFiles(req.crowdinContext.jwtPayload.context.project_id, req.crowdinApiClient, rootFolder, req.integrationSettings)
+                    : [];
+                req.logInfo(`Returning ${files.length} files`);
+                res.send(files);
+            }
+            catch (e) {
+                yield (0, logger_1.handleUserError)({
+                    action: 'Get Crowdin files',
+                    error: e,
+                    crowdinId: req.crowdinContext.crowdinId,
+                    clientId: req.crowdinContext.clientId,
+                });
+                throw e;
+            }
         }
         else {
             res.send([]);

package/out/handlers/integration/crowdin-update.js

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("../../util");
 const defaults_1 = require("../../util/defaults");
+const logger_1 = require("../../util/logger");
 function handle(config, integration) {
     return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
         var _a, _b;
@@ -25,10 +26,21 @@ function handle(config, integration) {
         if (((_b = config.api) === null || _b === void 0 ? void 0 : _b.default) && req.body.files) {
             req.body = req.body.files;
         }
-        const result = yield integration.updateCrowdin(projectId, req.crowdinApiClient, req.integrationCredentials, req.body, rootFolder, req.integrationSettings, uploadTranslations);
         let message;
-        if ((0, util_1.isExtendedResultType)(result)) {
-            message = result.message;
+        try {
+            const result = yield integration.updateCrowdin(projectId, req.crowdinApiClient, req.integrationCredentials, req.body, rootFolder, req.integrationSettings, uploadTranslations);
+            if ((0, util_1.isExtendedResultType)(result)) {
+                message = result.message;
+            }
+        }
+        catch (e) {
+            yield (0, logger_1.handleUserError)({
+                action: 'Sync files to Crowdin',
+                error: e,
+                crowdinId: req.crowdinContext.crowdinId,
+                clientId: req.crowdinContext.clientId,
+            });
+            throw e;
         }
         res.send({ message });
     }));

package/out/handlers/integration/integration-data.js

@@ -10,21 +10,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("../../util");
+const logger_1 = require("../../util/logger");
 function handle(integration) {
     return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
         const { parent_id: parentId, search, page } = req.query;
         req.logInfo('Recieved request to get integration data');
-        const result = yield integration.getIntegrationFiles(req.integrationCredentials, req.integrationSettings, parentId, search, page);
         let message;
         let stopPagination;
         let files;
-        if ((0, util_1.isExtendedResultType)(result)) {
-            files = result.data;
-            message = result.message;
-            stopPagination = result.stopPagination;
+        try {
+            const result = yield integration.getIntegrationFiles(req.integrationCredentials, req.integrationSettings, parentId, search, page);
+            if ((0, util_1.isExtendedResultType)(result)) {
+                files = result.data;
+                message = result.message;
+                stopPagination = result.stopPagination;
+            }
+            else {
+                files = result;
+            }
         }
-        else {
-            files = result;
+        catch (e) {
+            yield (0, logger_1.handleUserError)({
+                action: 'Get External Service data',
+                error: e,
+                crowdinId: req.crowdinContext.crowdinId,
+                clientId: req.crowdinContext.clientId,
+            });
+            throw e;
         }
         req.logInfo(`Integration data response ${JSON.stringify(files, null, 2)}`);
         res.send({ data: files, message, stopPagination });

package/out/handlers/integration/integration-login.js

@@ -11,12 +11,24 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const storage_1 = require("../../storage");
 const util_1 = require("../../util");
+const logger_1 = require("../../util/logger");
 function handle(config, integration) {
     return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
         req.logInfo('Received integration login request');
         if (integration.checkConnection) {
-            req.logInfo('Checking the integration credentials');
-            yield integration.checkConnection(req.body.credentials);
+            try {
+                req.logInfo('Checking the integration credentials');
+                yield integration.checkConnection(req.body.credentials);
+            }
+            catch (e) {
+                yield (0, logger_1.handleUserError)({
+                    action: 'External Service login',
+                    error: e,
+                    crowdinId: req.crowdinContext.crowdinId,
+                    clientId: req.crowdinContext.clientId,
+                });
+                throw e;
+            }
         }
         const existing = yield (0, storage_1.getStorage)().getIntegrationCredentials(req.crowdinContext.clientId);
         if (!!existing) {

package/out/handlers/integration/integration-logout.js

@@ -13,12 +13,24 @@ const storage_1 = require("../../storage");
 const util_1 = require("../../util");
 const connection_1 = require("../../util/connection");
 const webhooks_1 = require("../../util/webhooks");
+const logger_1 = require("../../util/logger");
 function handle(config, integration) {
     return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
         req.logInfo('Received integration logout request');
         if (integration.onLogout) {
-            req.logInfo('Invoking onLogout hook');
-            yield integration.onLogout(req.crowdinContext.jwtPayload.context.project_id, req.crowdinApiClient, req.integrationCredentials, req.integrationSettings);
+            try {
+                req.logInfo('Invoking onLogout hook');
+                yield integration.onLogout(req.crowdinContext.jwtPayload.context.project_id, req.crowdinApiClient, req.integrationCredentials, req.integrationSettings);
+            }
+            catch (e) {
+                yield (0, logger_1.handleUserError)({
+                    action: 'External Service logout',
+                    error: e,
+                    crowdinId: req.crowdinContext.crowdinId,
+                    clientId: req.crowdinContext.clientId,
+                });
+                throw e;
+            }
         }
         req.logInfo(`Deleting integration credentials for ${req.crowdinContext.clientId} client`);
         yield (0, storage_1.getStorage)().deleteIntegrationCredentials(req.crowdinContext.clientId);

package/out/handlers/integration/integration-update.js

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("../../util");
 const defaults_1 = require("../../util/defaults");
+const logger_1 = require("../../util/logger");
 function handle(config, integration) {
     return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
         var _a;
@@ -23,10 +24,21 @@ function handle(config, integration) {
         if (((_a = config.api) === null || _a === void 0 ? void 0 : _a.default) && req.body.files) {
             req.body = req.body.files;
         }
-        const result = yield integration.updateIntegration(req.crowdinContext.jwtPayload.context.project_id, req.crowdinApiClient, req.integrationCredentials, req.body, rootFolder, req.integrationSettings);
         let message;
-        if ((0, util_1.isExtendedResultType)(result)) {
-            message = result.message;
+        try {
+            const result = yield integration.updateIntegration(req.crowdinContext.jwtPayload.context.project_id, req.crowdinApiClient, req.integrationCredentials, req.body, rootFolder, req.integrationSettings);
+            if ((0, util_1.isExtendedResultType)(result)) {
+                message = result.message;
+            }
+        }
+        catch (e) {
+            yield (0, logger_1.handleUserError)({
+                action: 'Sync files to External Service',
+                error: e,
+                crowdinId: req.crowdinContext.crowdinId,
+                clientId: req.crowdinContext.clientId,
+            });
+            throw e;
         }
         res.send({ message });
     }));

package/out/handlers/user-errors.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="qs" />
+import { Response } from 'express';
+export default function handle(): (req: import("../models").CrowdinClientRequest | import("express").Request<import("express-serve-static-core").ParamsDictionary, any, any, import("qs").ParsedQs, Record<string, any>>, res: Response<any, Record<string, any>>, next: Function) => void;

package/out/handlers/user-errors.js

@@ -0,0 +1,40 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const storage_1 = require("../storage");
+const util_1 = require("../util");
+function handle() {
+    return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        let userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        if (req.crowdinContext.jwtPayload.context.user_id) {
+            userTimezone = (yield req.crowdinApiClient.usersApi.getUserInfo(req.crowdinContext.jwtPayload.context.user_id)).data.timezone;
+        }
+        req.logInfo(`Loading user errors for crowdinId ${req.crowdinContext.crowdinId} and integrationId ${req.crowdinContext.clientId}`);
+        const userErrors = (_a = (yield (0, storage_1.getStorage)().getAllUserErrors(req.crowdinContext.crowdinId, req.crowdinContext.clientId))) === null || _a === void 0 ? void 0 : _a.map((userError) => {
+            const date = new Date(+userError.createdAt);
+            // Format the date as 'MMM DD, YYYY HH:mm'
+            const formattedDate = new Intl.DateTimeFormat('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false,
+                timeZone: userTimezone,
+            }).format(date);
+            return Object.assign(Object.assign({}, userError), { createdAt: formattedDate });
+        });
+        req.logInfo(`Returning ${userErrors === null || userErrors === void 0 ? void 0 : userErrors.length} user errors`);
+        res.send(userErrors);
+    }));
+}
+exports.default = handle;

package/out/index.js

@@ -67,6 +67,7 @@ const sync_settings_save_1 = __importDefault(require("./handlers/integration/syn
 const manifest_1 = __importDefault(require("./handlers/manifest"));
 const subscription_paid_1 = __importDefault(require("./handlers/subscription-paid"));
 const uninstall_1 = __importDefault(require("./handlers/uninstall"));
+const user_errors_1 = __importDefault(require("./handlers/user-errors"));
 const crowdin_client_1 = __importStar(require("./middlewares/crowdin-client"));
 const integration_credentials_1 = __importDefault(require("./middlewares/integration-credentials"));
 const json_response_1 = __importDefault(require("./middlewares/json-response"));
@@ -184,6 +185,7 @@ function addCrowdinEndpoints(app, clientConfig) {
                 (0, webhooks_1.listenQueueMessage)(config, integrationLogic, integrationLogic.webhooks.queueUrl, config.identifier);
             }
         }
+        app.get('/api/user-errors', json_response_1.default, (0, crowdin_client_1.default)(config), (0, integration_credentials_1.default)(config, integrationLogic), (0, user_errors_1.default)());
     }
     if (config.customFileFormat) {
         (0, defaults_1.applyFileProcessorsModuleDefaults)(config, config.customFileFormat);

package/out/models/index.d.ts

@@ -860,6 +860,15 @@ export interface IntegrationWebhooks {
     crowdinId: string;
     provider: Provider;
 }
+export interface UserErrors {
+    id: number;
+    action: string;
+    message: string;
+    data: any;
+    createdAt: string;
+    crowdinId: string;
+    integrationId?: string;
+}
 export interface ImagePath {
     /**
      * path to app logo (e.g. {@example join(__dirname, 'logo.png')})

package/out/static/css/styles.css

@@ -161,4 +161,52 @@
 
 #form .MuiButtonBase-root[type="submit"]:hover {
     background: rgba(236, 239, 241, .54);
-}
+}
+
+#buttons {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+#buttons crowdin-button:nth-of-type(2) {
+    margin-right: auto;
+}
+
+#user-errors-table {
+    margin-top: 24px;
+    display: block;
+}
+
+.error-detail-table {
+    height: auto;
+    max-height: 579px;
+    margin: -24px;
+}
+
+.error-detail-table table {
+    border-spacing: unset;
+    width: 100%;
+}
+
+.error-detail-table tr:first-child td {
+    padding-top: 24px;
+    border-top-right-radius: 12px;
+}
+
+.error-detail-table tr td:first-child {
+    color: #263238;
+    font-weight: 500;
+    min-width: 200px;
+    vertical-align: top;
+}
+
+.error-detail-table tr td:last-child {
+    background: #f6f6f6;
+    color: rgba(38,50,56,.87);
+    word-break: break-all;
+}
+
+.error-detail-table tr td {
+    padding: 8px 24px;
+}

package/out/storage/index.d.ts

@@ -1,4 +1,4 @@
-import { Config, CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncSettings, IntegrationWebhooks, Provider } from '../models';
+import { Config, CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncSettings, IntegrationWebhooks, Provider, UserErrors } from '../models';
 export interface Storage {
     migrate(): Promise<void>;
     saveCrowdinCredentials(credentials: CrowdinCredentials): Promise<void>;
@@ -29,6 +29,9 @@ export interface Storage {
     getWebhooks(fileId: string, integrationId: string, crowdinId: string, provider: Provider): Promise<IntegrationWebhooks | undefined>;
     saveWebhooks(fileId: string, integrationId: string, crowdinId: string, provider: Provider): Promise<void>;
     deleteWebhooks(fileIds: any[], integrationId: string, crowdinId: string, provider: Provider): Promise<void>;
+    getAllUserErrors(crowdinId: string, integrationId?: string): Promise<UserErrors[] | undefined>;
+    saveUserError(action: string, message: string, data: any, createdAt: string, crowdinId: string, integrationId?: string): Promise<void>;
+    deleteUserErrors(date: string, crowdinId: string, integrationId?: string): Promise<void>;
 }
 export declare function initialize(config: Config): Promise<void>;
 export declare function getStorage(): Storage;

package/out/storage/mysql.d.ts

@@ -1,5 +1,5 @@
 import { Storage } from '.';
-import { CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncSettings, IntegrationWebhooks } from '../models';
+import { CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncSettings, IntegrationWebhooks, UserErrors } from '../models';
 export interface MySQLStorageConfig {
     uri?: string;
     host?: string;
@@ -46,4 +46,7 @@ export declare class MySQLStorage implements Storage {
     getWebhooks(fileId: string, integrationId: string, crowdinId: string, provider: string): Promise<IntegrationWebhooks | undefined>;
     saveWebhooks(fileId: string, integrationId: string, crowdinId: string, provider: string): Promise<void>;
     deleteWebhooks(fileIds: any[], integrationId: string, crowdinId: string, provider: string): Promise<void>;
+    getAllUserErrors(crowdinId: string, integrationId?: string): Promise<UserErrors[] | undefined>;
+    saveUserError(action: string, message: string, data: any, createdAt: string, crowdinId: string, integrationId?: string): Promise<void>;
+    deleteUserErrors(createdAt: string, crowdinId: string, integrationId?: string): Promise<void>;
 }

package/out/storage/mysql.js

@@ -124,6 +124,18 @@ class MySQLStorage {
                 provider       varchar(255) not null
             )
             `);
+            yield connection.execute(`
+            create table if not exists user_errors
+            (
+                id             int auto_increment primary key,
+                action         varchar(255) not null,
+                message        varchar(255) not null,
+                data           text,
+                created_at     varchar(255) not null,
+                crowdin_id     varchar(255) not null,
+                integration_id varchar(255)
+                )
+            `);
         });
     }
     saveCrowdinCredentials(credentials) {
@@ -187,6 +199,7 @@ class MySQLStorage {
                 yield connection.execute('DELETE FROM app_metadata WHERE crowdin_id = ?', [id]);
                 yield connection.execute('DELETE FROM files_snapshot WHERE crowdin_id = ?', [id]);
                 yield connection.execute('DELETE FROM webhooks WHERE crowdin_id = ?', [id]);
+                yield connection.execute('DELETE FROM user_errors WHERE crowdin_id = ?', [id]);
             }));
         });
     }
@@ -249,6 +262,7 @@ class MySQLStorage {
                 yield connection.execute('DELETE FROM sync_settings where crowdin_id = ?', [crowdinId]);
                 yield connection.execute('DELETE FROM files_snapshot where crowdin_id = ?', [crowdinId]);
                 yield connection.execute('DELETE FROM webhooks where crowdin_id = ?', [crowdinId]);
+                yield connection.execute('DELETE FROM user_errors where crowdin_id = ?', [crowdinId]);
             }));
         });
     }
@@ -380,5 +394,40 @@ class MySQLStorage {
             yield this.executeQuery((connection) => connection.execute(`DELETE FROM webhooks WHERE file_id IN (${placeholders}) AND integration_id = ? AND crowdin_id = ? AND provider = ?`, [...fileIds, integrationId, crowdinId, provider]));
         });
     }
+    getAllUserErrors(crowdinId, integrationId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.dbPromise;
+            return this.executeQuery((connection) => __awaiter(this, void 0, void 0, function* () {
+                let whereIntegrationCondition = 'integration_id is NULL';
+                const params = [crowdinId];
+                if (integrationId) {
+                    whereIntegrationCondition = 'integration_id = ?';
+                    params.push(integrationId);
+                }
+                const [rows] = yield connection.execute(`SELECT id, action, message, data, created_at as "createdAt" FROM user_errors WHERE crowdin_id = ? AND ${whereIntegrationCondition}`, params);
+                return rows || [];
+            }));
+        });
+    }
+    saveUserError(action, message, data, createdAt, crowdinId, integrationId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.dbPromise;
+            yield this.executeQuery((connection) => connection.execute('INSERT INTO user_errors(action, message, data, created_at, integration_id, crowdin_id) VALUES (?, ?, ?, ?, ?, ?)', [action, message, data, createdAt, integrationId, crowdinId]));
+        });
+    }
+    deleteUserErrors(createdAt, crowdinId, integrationId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.dbPromise;
+            yield this.executeQuery((connection) => {
+                let whereIntegrationCondition = 'integration_id is NULL';
+                const params = [createdAt, crowdinId];
+                if (integrationId) {
+                    whereIntegrationCondition = 'integration_id = ?';
+                    params.push(integrationId);
+                }
+                return connection.execute(`DELETE FROM user_errors WHERE created_at < ? AND crowdin_id = ? AND ${whereIntegrationCondition}`, params);
+            });
+        });
+    }
 }
 exports.MySQLStorage = MySQLStorage;

package/out/storage/postgre.d.ts

@@ -1,6 +1,6 @@
 import { Client } from 'pg';
 import { Storage } from '.';
-import { CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncSettings, IntegrationWebhooks } from '../models';
+import { CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncSettings, IntegrationWebhooks, UserErrors } from '../models';
 export interface PostgreStorageConfig {
     host?: string;
     connectionString?: string;
@@ -51,4 +51,7 @@ export declare class PostgreStorage implements Storage {
     getWebhooks(fileId: string, integrationId: string, crowdinId: string, provider: string): Promise<IntegrationWebhooks | undefined>;
     saveWebhooks(fileId: string, integrationId: string, crowdinId: string, provider: string): Promise<void>;
     deleteWebhooks(fileIds: any[], integrationId: string, crowdinId: string, provider: string): Promise<void>;
+    getAllUserErrors(crowdinId: string, integrationId?: string): Promise<UserErrors[] | undefined>;
+    saveUserError(action: string, message: string, data: any, createdAt: string, crowdinId: string, integrationId?: string): Promise<void>;
+    deleteUserErrors(createdAt: string, crowdinId: string, integrationId?: string): Promise<void>;
 }

package/out/storage/postgre.js

@@ -138,6 +138,18 @@ class PostgreStorage {
                 provider       varchar not null
             )
             `);
+            yield client.query(`
+            create table if not exists user_errors
+            (
+                id             serial primary key,
+                action         varchar not null,
+                message        varchar not null,
+                data           varchar,
+                created_at     varchar not null,
+                crowdin_id     varchar not null,
+                integration_id varchar
+            )
+            `);
         });
     }
     saveCrowdinCredentials(credentials) {
@@ -201,6 +213,7 @@ class PostgreStorage {
                 yield client.query('DELETE FROM files_snapshot WHERE crowdin_id = $1', [id]);
                 yield client.query('DELETE FROM app_metadata WHERE crowdin_id = $1', [id]);
                 yield client.query('DELETE FROM webhooks WHERE crowdin_id = $1', [id]);
+                yield client.query('DELETE FROM user_errors WHERE crowdin_id = $1', [id]);
             }));
         });
     }
@@ -263,6 +276,7 @@ class PostgreStorage {
                 yield client.query('DELETE FROM sync_settings where crowdin_id = $1', [crowdinId]);
                 yield client.query('DELETE FROM files_snapshot where crowdin_id = $1', [crowdinId]);
                 yield client.query('DELETE FROM webhooks where crowdin_id = $1', [crowdinId]);
+                yield client.query('DELETE FROM user_errors where crowdin_id = $1', [crowdinId]);
             }));
         });
     }
@@ -395,5 +409,40 @@ class PostgreStorage {
             yield this.executeQuery((client) => client.query(`DELETE FROM webhooks WHERE file_id IN ${placeholders} AND integration_id = $${++index} AND crowdin_id = $${++index} AND provider = $${++index}`, [...fileIds, integrationId, crowdinId, provider]));
         });
     }
+    getAllUserErrors(crowdinId, integrationId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.dbPromise;
+            return this.executeQuery((client) => __awaiter(this, void 0, void 0, function* () {
+                let whereIntegrationCondition = 'integration_id is NULL';
+                const params = [crowdinId];
+                if (integrationId) {
+                    whereIntegrationCondition = 'integration_id = $2';
+                    params.push(integrationId);
+                }
+                const res = yield client.query(`SELECT id, action, message, data, created_at as "createdAt", integration_id as "integrationId", crowdin_id as "crowdinId" FROM user_errors WHERE crowdin_id = $1 AND ${whereIntegrationCondition}`, params);
+                return (res === null || res === void 0 ? void 0 : res.rows) || [];
+            }));
+        });
+    }
+    saveUserError(action, message, data, createdAt, crowdinId, integrationId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.dbPromise;
+            yield this.executeQuery((client) => client.query('INSERT INTO user_errors(action, message, data, created_at, integration_id, crowdin_id) VALUES ($1, $2, $3, $4, $5, $6)', [action, message, data, createdAt, integrationId, crowdinId]));
+        });
+    }
+    deleteUserErrors(createdAt, crowdinId, integrationId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.dbPromise;
+            yield this.executeQuery((client) => {
+                let whereIntegrationCondition = 'integration_id is NULL';
+                const params = [createdAt, crowdinId];
+                if (integrationId) {
+                    whereIntegrationCondition = 'integration_id = $3';
+                    params.push(integrationId);
+                }
+                return client.query(`DELETE FROM user_errors WHERE created_at < $1 AND crowdin_id = $2 AND ${whereIntegrationCondition}`, params);
+            });
+        });
+    }
 }
 exports.PostgreStorage = PostgreStorage;

package/out/storage/sqlite.d.ts

@@ -1,5 +1,5 @@
 import { Storage } from '.';
-import { CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncSettings, IntegrationWebhooks } from '../models';
+import { CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncSettings, IntegrationWebhooks, UserErrors } from '../models';
 export interface SQLiteStorageConfig {
     dbFolder: string;
 }
@@ -45,4 +45,7 @@ export declare class SQLiteStorage implements Storage {
     getWebhooks(fileId: string, integrationId: string, crowdinId: string, provider: string): Promise<IntegrationWebhooks | undefined>;
     saveWebhooks(fileId: string, integrationId: string, crowdinId: string, provider: string): Promise<void>;
     deleteWebhooks(fileIds: any[], integrationId: string, crowdinId: string, provider: string): Promise<void>;
+    getAllUserErrors(crowdinId: string, integrationId?: string): Promise<UserErrors[]>;
+    saveUserError(action: string, message: string, data: any, createdAt: string, crowdinId: string, integrationId?: string): Promise<void>;
+    deleteUserErrors(createAt: string, crowdinId: string, integrationId?: string): Promise<void>;
 }

package/out/storage/sqlite.js

@@ -195,6 +195,18 @@ class SQLiteStorage {
                 crowdin_id     varchar not null,
                 provider       varchar not null
             );
+            `, []);
+                yield this._run(`
+            create table if not exists user_errors
+            (
+                id             integer not null primary key autoincrement,
+                action         varchar not null,
+                message        varchar not null,
+                data           varchar     null,
+                created_at     varchar not null,
+                crowdin_id     varchar not null,
+                integration_id varchar     null
+            );
             `, []);
                 this._res && this._res();
                 // TODO: temporary code
@@ -251,6 +263,7 @@ class SQLiteStorage {
             yield this.run('DELETE FROM app_metadata WHERE crowdin_id = ?', [id]);
             yield this.run('DELETE FROM files_snapshot WHERE crowdin_id = ?', [id]);
             yield this.run('DELETE FROM webhooks WHERE crowdin_id = ?', [id]);
+            yield this.run('DELETE FROM user_errors WHERE crowdin_id = ?', [id]);
         });
     }
     saveIntegrationCredentials(id, credentials, crowdinId) {
@@ -291,6 +304,7 @@ class SQLiteStorage {
             yield this.run('DELETE FROM sync_settings where crowdin_id = ?', [crowdinId]);
             yield this.run('DELETE FROM files_snapshot where crowdin_id = ?', [crowdinId]);
             yield this.run('DELETE FROM webhooks where crowdin_id = ?', [crowdinId]);
+            yield this.run('DELETE FROM user_errors where crowdin_id = ?', [crowdinId]);
         });
     }
     saveMetadata(id, metadata, crowdinId) {
@@ -389,5 +403,28 @@ class SQLiteStorage {
             return this.run(`DELETE FROM webhooks WHERE file_id IN (${placeholders}) AND integration_id = ? AND crowdin_id = ? AND provider = ?`, [...fileIds, integrationId, crowdinId, provider]);
         });
     }
+    getAllUserErrors(crowdinId, integrationId) {
+        let whereIntegrationCondition = 'integration_id is NULL';
+        const params = [crowdinId];
+        if (integrationId) {
+            whereIntegrationCondition = 'integration_id = ?';
+            params.push(integrationId);
+        }
+        return this.each(`SELECT id, action, message, data, created_at as createdAt, integration_id as integrationId, crowdin_id as crowdinId FROM user_errors WHERE crowdin_id = ? AND ${whereIntegrationCondition}`, params);
+    }
+    saveUserError(action, message, data, createdAt, crowdinId, integrationId) {
+        return this.run('INSERT INTO user_errors(action, message, data, created_at, integration_id, crowdin_id) VALUES (?, ?, ?, ?, ?, ?)', [action, message, data, createdAt, integrationId, crowdinId]);
+    }
+    deleteUserErrors(createAt, crowdinId, integrationId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let whereIntegrationCondition = 'integration_id is NULL';
+            const params = [createAt, crowdinId];
+            if (integrationId) {
+                whereIntegrationCondition = 'integration_id = ?';
+                params.push(integrationId);
+            }
+            return this.run(`DELETE FROM user_errors WHERE created_at < ? AND crowdin_id = ? AND ${whereIntegrationCondition}`, params);
+        });
+    }
 }
 exports.SQLiteStorage = SQLiteStorage;

package/out/util/logger.d.ts

@@ -20,6 +20,7 @@ interface CustomAxiosError extends AxiosError {
 }
 export declare class AppModuleError extends Error {
     data: any;
+    appData: any;
     isAxiosError: boolean;
     constructor(error: CustomAxiosError | Error | string, data?: any);
 }
@@ -27,4 +28,10 @@ export declare class AppModuleAggregateError extends Error {
     errors: Error[] | AppModuleError[];
     constructor(errors: Error[] | AppModuleError[], message: string);
 }
+export declare function handleUserError({ action, error, crowdinId, clientId, }: {
+    action: string;
+    error: Error | string;
+    crowdinId: string;
+    clientId?: string;
+}): Promise<void>;
 export {};

package/out/util/logger.js

@@ -22,9 +22,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppModuleAggregateError = exports.AppModuleError = exports.getErrorMessage = exports.isAxiosError = exports.logError = exports.log = exports.withContextError = exports.withContext = exports.prepareContext = exports.initialize = void 0;
+exports.handleUserError = exports.AppModuleAggregateError = exports.AppModuleError = exports.getErrorMessage = exports.isAxiosError = exports.logError = exports.log = exports.withContextError = exports.withContext = exports.prepareContext = exports.initialize = void 0;
 const logsFormatter = __importStar(require("@crowdin/logs-formatter"));
+const storage_1 = require("../storage");
 let logConfig;
 let onError;
 function initialize(config) {
@@ -139,10 +149,10 @@ function errorOutputByType(error) {
                 status: ((_j = error.response) === null || _j === void 0 ? void 0 : _j.status) || ((_k = error.data) === null || _k === void 0 ? void 0 : _k.response.status),
             }
             : {};
-        console.error(message, { attributes: { request, response } }, { backtrace: error.stack });
+        console.error(message, { attributes: JSON.stringify({ request, response }) }, { backtrace: error.stack });
     }
     else {
-        console.error(message, error.data ? { attributes: error.data } : '', error.stack ? { backtrace: error.stack } : '');
+        console.error(message, error.data ? { attributes: typeof error.data === 'object' ? JSON.stringify(error.data) : error.data } : '', error.stack ? { backtrace: error.stack } : '');
     }
 }
 function isAxiosError(e) {
@@ -168,8 +178,11 @@ class AppModuleError extends Error {
         super(typeof error === 'string' ? error : error.message);
         this.isAxiosError = false;
         this.name = 'AppModuleError';
-        this.data = typeof error === 'string' ? Object.assign({}, data) : Object.assign(Object.assign({}, error), data);
         this.stack = typeof error === 'string' ? this.stack : error.stack;
+        this.appData = data;
+        if (typeof error !== 'string') {
+            this.data = Object.assign({}, error);
+        }
         if (isAxiosError(error)) {
             this.isAxiosError = true;
         }
@@ -184,3 +197,76 @@ class AppModuleAggregateError extends Error {
     }
 }
 exports.AppModuleAggregateError = AppModuleAggregateError;
+function storeUserError({ action, error, crowdinId, clientId, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    return __awaiter(this, void 0, void 0, function* () {
+        const data = {};
+        if (isAxiosError(error)) {
+            data.requestParams = {
+                method: ((_a = error === null || error === void 0 ? void 0 : error.request) === null || _a === void 0 ? void 0 : _a.method) || ((_c = (_b = error === null || error === void 0 ? void 0 : error.data) === null || _b === void 0 ? void 0 : _b.request) === null || _c === void 0 ? void 0 : _c.method),
+                protocol: ((_d = error === null || error === void 0 ? void 0 : error.request) === null || _d === void 0 ? void 0 : _d.protocol) || ((_f = (_e = error === null || error === void 0 ? void 0 : error.data) === null || _e === void 0 ? void 0 : _e.request) === null || _f === void 0 ? void 0 : _f.protocol),
+                host: ((_g = error === null || error === void 0 ? void 0 : error.request) === null || _g === void 0 ? void 0 : _g.host) || ((_j = (_h = error === null || error === void 0 ? void 0 : error.data) === null || _h === void 0 ? void 0 : _h.request) === null || _j === void 0 ? void 0 : _j.host),
+                path: ((_k = error === null || error === void 0 ? void 0 : error.request) === null || _k === void 0 ? void 0 : _k.path) || ((_m = (_l = error === null || error === void 0 ? void 0 : error.data) === null || _l === void 0 ? void 0 : _l.request) === null || _m === void 0 ? void 0 : _m.path),
+            };
+            data.responseData = {
+                data: ((_o = error === null || error === void 0 ? void 0 : error.response) === null || _o === void 0 ? void 0 : _o.data) || ((_q = (_p = error === null || error === void 0 ? void 0 : error.data) === null || _p === void 0 ? void 0 : _p.response) === null || _q === void 0 ? void 0 : _q.data),
+                status: ((_r = error === null || error === void 0 ? void 0 : error.response) === null || _r === void 0 ? void 0 : _r.status) || ((_t = (_s = error === null || error === void 0 ? void 0 : error.data) === null || _s === void 0 ? void 0 : _s.response) === null || _t === void 0 ? void 0 : _t.status),
+                statusText: ((_u = error === null || error === void 0 ? void 0 : error.response) === null || _u === void 0 ? void 0 : _u.statusText) || ((_w = (_v = error === null || error === void 0 ? void 0 : error.data) === null || _v === void 0 ? void 0 : _v.response) === null || _w === void 0 ? void 0 : _w.statusText),
+            };
+        }
+        if (error instanceof AppModuleError && error.appData) {
+            data.appData = error.appData;
+        }
+        yield (0, storage_1.getStorage)().saveUserError(action, error.message, JSON.stringify(data), `${Date.now()}`, crowdinId, clientId);
+    });
+}
+function clearOldUserErrors(crowdinId, clientId) {
+    const date = new Date();
+    date.setMonth(date.getMonth() - 1); // previous month
+    (0, storage_1.getStorage)().deleteUserErrors(`${date.getTime()}`, crowdinId, clientId);
+}
+function mergeAppModuleAggregateErrors(errors) {
+    const result = [];
+    const mergedData = {};
+    for (const errorItem of errors) {
+        if (errorItem instanceof AppModuleError) {
+            if (typeof errorItem.appData === 'object' &&
+                errorItem.appData !== null &&
+                !Array.isArray(errorItem.appData)) {
+                if (!mergedData[errorItem.message]) {
+                    mergedData[errorItem.message] = {};
+                }
+                for (const key in errorItem.appData) {
+                    mergedData[errorItem.message][key] = (mergedData[errorItem.message][key] || []).concat(errorItem.appData[key]);
+                }
+            }
+            else if (errorItem.appData) {
+                mergedData[errorItem.message] = (mergedData[errorItem.message] || []).concat(errorItem.appData);
+            }
+            continue;
+        }
+        result.push(errorItem);
+    }
+    for (const key in mergedData) {
+        result.push(new AppModuleError(key, mergedData[key]));
+    }
+    return result;
+}
+function handleUserError({ action, error, crowdinId, clientId, }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (typeof error === 'string') {
+            return;
+        }
+        if (error instanceof AppModuleAggregateError) {
+            const mergedErrors = mergeAppModuleAggregateErrors(error.errors);
+            for (const key in mergedErrors) {
+                yield handleUserError({ action, error: mergedErrors[key], crowdinId, clientId });
+            }
+        }
+        else {
+            yield storeUserError({ action, error, crowdinId, clientId });
+            clearOldUserErrors(crowdinId, clientId);
+        }
+    });
+}
+exports.handleUserError = handleUserError;

package/out/views/main.handlebars

@@ -33,7 +33,9 @@
                     </div>
                 </crowdin-alert>
             {{/if}}
-            <div>
+            <div id="buttons">
+                <crowdin-button id="show-integration-btn" class="hidden" icon-before="arrow_back" onclick="showIntegration();">Integration</crowdin-button>
+                <crowdin-button id="show-error-logs-btn" icon-before="list" onclick="showErrorLogs();">Error logs</crowdin-button>
                 {{#if infoModal}}
                     <crowdin-button icon-before="info" onclick="infoModal.open();">{{infoModal.title}}</crowdin-button>
                 {{/if}}
@@ -87,6 +89,16 @@
                 {{/if}}
         >
         </crowdin-simple-integration>
+        <div id="user-errors" class="hidden">
+            <crowdin-alert title="Error Logs">This table displays the most recent error logs from the past month. Logs older than one month will be automatically deleted.</crowdin-alert>
+            <crowdin-show-as-table
+                    is-loading
+                    id="user-errors-table"
+                    is-searchable
+                    total-records="25"
+                    search-placeholder="Search something"
+            ></crowdin-show-as-table>
+        </div>
     </div>
     <crowdin-toasts></crowdin-toasts>
     <crowdin-modal id="subscription-modal" modal-width="50" close-button="false">
@@ -256,6 +268,13 @@
             </div>
         </crowdin-modal>
     {{/or}}
+
+    <crowdin-modal
+            id="user-error-detail"
+            close-button-title="Close"
+            close-button="true"
+    >
+    </crowdin-modal>
 </body>
 <script type="text/javascript">
     document.body.addEventListener('refreshFilesList', (e) => {
@@ -491,95 +510,94 @@
     }
 
     {{#if configurationFields}}
-    const settingsModal = document.getElementById('settings-modal');
-    const settingsSaveBtn = document.getElementById('settings-save-btn');
-    let config = JSON.parse('{{{config}}}');
-
-    function triggerEvent(el, type) {
-        const e = document.createEvent('HTMLEvents');
-        e.initEvent(type, false, true);
-        el.dispatchEvent(e);
-    }
+        const settingsModal = document.getElementById('settings-modal');
+        const settingsSaveBtn = document.getElementById('settings-save-btn');
+        let config = JSON.parse('{{{config}}}');
+
+        function triggerEvent(el, type) {
+            const e = document.createEvent('HTMLEvents');
+            e.initEvent(type, false, true);
+            el.dispatchEvent(e);
+        }
 
-    function fillSettingsForm() {
-        Object.entries(config).forEach(([key, value]) => {
-            const el = document.getElementById(`${key}-settings`);
-            if (el && (value || el.tagName.toLowerCase() === 'crowdin-checkbox')) {
-                if (el.tagName.toLowerCase() === 'crowdin-select') {
-                    if (el.hasAttribute('is-multi')) {
-                        el.value = JSON.stringify(value);
+        function fillSettingsForm() {
+            Object.entries(config).forEach(([key, value]) => {
+                const el = document.getElementById(`${key}-settings`);
+                if (el && (value || el.tagName.toLowerCase() === 'crowdin-checkbox')) {
+                    if (el.tagName.toLowerCase() === 'crowdin-select') {
+                        if (el.hasAttribute('is-multi')) {
+                            el.value = JSON.stringify(value);
+                        } else {
+                            el.value = JSON.stringify([value]);
+                        }
+                    } else if (el.tagName.toLowerCase() === 'crowdin-checkbox') {
+                        el.checked = !!value;
                     } else {
-                        el.value = JSON.stringify([value]);
+                        el.value = value;
                     }
-                } else if (el.tagName.toLowerCase() === 'crowdin-checkbox') {
-                    el.checked = !!value;
-                } else {
-                    el.value = value;
-                }
 
-                triggerEvent(el, 'change');
-            }
-        });
-    }
-
-    function saveSettings() {
-        setLoader();
-        const settingsElements = Array.from(document.getElementById('modal-content').children);
-        const tags = ['crowdin-checkbox', 'crowdin-select', 'crowdin-input'];
-        const configReq = {};
-        settingsElements
-            .filter(e => tags.includes(e.tagName.toLowerCase()))
-            .forEach(e => {
-                const key = e.getAttribute('key');
-                let value;
-                if (e.tagName.toLowerCase() === 'crowdin-select') {
-                    value = JSON.parse(e.value);
-                    if (!e.hasAttribute('is-multi')) {
-                        value = value.length > 0 ? value[0] : undefined;
-                    }
-                } else if (e.tagName.toLowerCase() === 'crowdin-checkbox') {
-                    value = !!e.checked;
-                } else {
-                    value = e.value;
+                    triggerEvent(el, 'change');
                 }
-                configReq[key] = value;
             });
-        settingsSaveBtn.setAttribute('disabled', true);
-        checkOrigin()
-            .then(restParams => fetch('api/settings' + restParams, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ config: configReq })
-            }))
-            .then(checkResponse)
-            .then(() => {
-                showToast('Settings successfully saved');
-                config = configReq;
-            })
-            .catch(e => catchRejection(e, 'Can\'t save settings'))
-            .finally(() => {
-                unsetLoader();
-                settingsSaveBtn.removeAttribute('disabled');
-                settingsModal.close();
-                {{#if reloadOnConfigSave}}
-                    getIntegrationData(true);
-                    getCrowdinData();
-                {{/if}}
-            });
-    }
+        }
 
-    function setLoader() {
-        const loader = document.querySelector('#settings-modal .loader');
-        loader.classList.remove('hidden');
-    }
+        function saveSettings() {
+            setLoader();
+            const settingsElements = Array.from(document.getElementById('modal-content').children);
+            const tags = ['crowdin-checkbox', 'crowdin-select', 'crowdin-input'];
+            const configReq = {};
+            settingsElements
+                .filter(e => tags.includes(e.tagName.toLowerCase()))
+                .forEach(e => {
+                    const key = e.getAttribute('key');
+                    let value;
+                    if (e.tagName.toLowerCase() === 'crowdin-select') {
+                        value = JSON.parse(e.value);
+                        if (!e.hasAttribute('is-multi')) {
+                            value = value.length > 0 ? value[0] : undefined;
+                        }
+                    } else if (e.tagName.toLowerCase() === 'crowdin-checkbox') {
+                        value = !!e.checked;
+                    } else {
+                        value = e.value;
+                    }
+                    configReq[key] = value;
+                });
+            settingsSaveBtn.setAttribute('disabled', true);
+            checkOrigin()
+                .then(restParams => fetch('api/settings' + restParams, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ config: configReq })
+                }))
+                .then(checkResponse)
+                .then(() => {
+                    showToast('Settings successfully saved');
+                    config = configReq;
+                })
+                .catch(e => catchRejection(e, 'Can\'t save settings'))
+                .finally(() => {
+                    unsetLoader();
+                    settingsSaveBtn.removeAttribute('disabled');
+                    settingsModal.close();
+                    {{#if reloadOnConfigSave}}
+                        getIntegrationData(true);
+                        getCrowdinData();
+                    {{/if}}
+                });
+        }
 
-    function unsetLoader() {
-        const loader = document.querySelector('#settings-modal .loader');
-        setTimeout(function() {
-            loader.classList.add('hidden');
-        }, 500)
-    }
+        function setLoader() {
+            const loader = document.querySelector('#settings-modal .loader');
+            loader.classList.remove('hidden');
+        }
 
+        function unsetLoader() {
+            const loader = document.querySelector('#settings-modal .loader');
+            setTimeout(function() {
+                loader.classList.add('hidden');
+            }, 500)
+        }
     {{else}}
          const settingsModal = undefined;
     {{/if}}
@@ -807,6 +825,95 @@
         const notice = document.getElementById('notice');
         checkAlert(notice, 'notice');
     {{/if}}
+
+    function showErrorLogs() {
+        document.getElementById('show-error-logs-btn').classList.add('hidden');
+        document.getElementById('show-integration-btn').classList.remove('hidden');
+
+        appComponent.classList.add('hidden');
+        document.getElementById('user-errors').classList.remove('hidden');
+
+        checkOrigin()
+            .then(restParams => fetch('api/user-errors' + restParams))
+            .then(checkResponse)
+            .then((res) => {
+                const table = document.getElementById('user-errors-table');
+
+                const clickRow = (field, index, item) => {
+                    const modal = document.getElementById('user-error-detail');
+                    modal.open();
+                    modal.innerHTML = getUserErrorDetail(item);
+                };
+
+                table.setTableConfig && table.setTableConfig({
+                    defaultSortingColumn: "createdAt",
+                    defaultSortingDir: "desc",
+                    headerFields: [
+                        {
+                            field: "createdAt",
+                            name: "Date",
+                            isSortable: true,
+                            clickFn: clickRow,
+                        },
+                        {
+                            field: "action",
+                            name: "Action",
+                            clickFn: clickRow,
+                        },
+                        {
+                            field: "message",
+                            name: "Message",
+                            clickFn: clickRow,
+                        }
+                    ],
+                });
+
+                table.setTableData(JSON.stringify(res));
+                table.setAttribute(`is-loading`, false);
+            })
+            .catch(e => catchRejection(e, 'Can\'t fetch error logs'));
+    }
+
+    function showIntegration() {
+        document.getElementById('show-error-logs-btn').classList.remove('hidden');
+        document.getElementById('show-integration-btn').classList.add('hidden');
+
+        appComponent.classList.remove('hidden');
+        document.getElementById('user-errors').classList.add('hidden');
+    }
+
+    function getUserErrorDetail(error) {
+        const data = JSON.parse(error.data);
+
+        let html = '<div class="error-detail-table"><table>';
+        html += `<tr><td>Action</td><td>${error.action}</td></tr>`;
+        html += `<tr><td>Message</td><td>${error.message}</td></tr>`;
+        html += `<tr><td>Date/time</td><td>${error.createdAt}</td></tr>`;
+
+        if (data.requestParams) {
+            html += `<tr><td>Method</td><td>${data.requestParams.method}</td></tr>`;
+        }
+
+        if (data.responseData) {
+            html += `<tr><td>Response Data</td><td><pre>${JSON.stringify(data.responseData, null, 2)}</pre></td></tr>`;
+        }
+
+        if (data.appData) {
+            if (Array.isArray(data.appData)) {
+                html += `<tr><td>App Data</td><td><pre>${JSON.stringify(data.appData, null, 2)}</pre></td></tr>`;
+            } else if (typeof data.appData === 'object') {
+                for (const key in data.appData) {
+                    html += `<tr><td>${key.charAt(0).toUpperCase() + key.slice(1)}</td><td><pre>${JSON.stringify(data.appData[key], null, 2)}</pre></td></tr>`;
+                }
+            } else {
+                html += `<tr><td>App Data</td><td>${data.appData}</td></tr>`;
+            }
+        }
+
+        html += '</table></div>';
+
+        return html;
+    }
 </script>
 
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdin/app-project-module",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "Module that generates for you all common endpoints for serving standalone Crowdin App",
   "main": "out/index.js",
   "types": "out/index.d.ts",
@@ -17,7 +17,7 @@
     "@aws-sdk/client-s3": "^3.423.0",
     "@aws-sdk/s3-request-presigner": "^3.423.0",
     "@crowdin/crowdin-apps-functions": "0.6.0",
-    "@crowdin/logs-formatter": "^2.0.5",
+    "@crowdin/logs-formatter": "^2.0.6",
     "@godaddy/terminus": "^4.12.1",
     "@types/pg": "^8.10.3",
     "amqplib": "^0.10.3",