@crowdin/app-project-module 3.0.1 → 3.1.0

package/out/modules/integration/handlers/user-error-detail.d.ts

@@ -0,0 +1,2 @@
+import { Response } from 'express';
+export default function handle(): (req: import("express").Request | import("../../..").CrowdinClientRequest, res: Response, next: Function) => void;

package/out/modules/integration/handlers/user-error-detail.js

@@ -0,0 +1,48 @@
+"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 });
+exports.default = handle;
+const storage_1 = require("../../../storage");
+const util_1 = require("../../../util");
+const logger_1 = require("../../../util/logger");
+const INVALID_DATA = JSON.stringify({
+    appData: { Warning: 'Invalid response data. Please contact the Crowdin support manager.' },
+});
+function handle() {
+    return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
+        const id = Number.parseInt(`${req.params.id}`, 10);
+        if (!Number.isInteger(id)) {
+            return res.status(400).json({
+                error: {
+                    message: 'Invalid error log id',
+                },
+            });
+        }
+        const userError = yield (0, storage_1.getStorage)().getUserError({
+            id,
+            crowdinId: req.crowdinContext.crowdinId,
+            integrationId: req.crowdinContext.clientId,
+        });
+        if (!userError) {
+            req.logInfo(`Error log ${id} not found`);
+            return res.status(404).json({
+                error: {
+                    message: `Error log with ID ${id} not found`,
+                },
+            });
+        }
+        if (!userError.data || !(0, util_1.isJson)(userError.data)) {
+            (0, logger_1.logError)(userError);
+            return res.send({ data: INVALID_DATA });
+        }
+        res.send({ data: userError.data });
+    }));
+}

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

@@ -1,2 +1,8 @@
 import { Response } from 'express';
+export declare function parseUserErrorsQuery(query?: any): {
+    limit: number;
+    offset: number;
+    orderDirection: "asc" | "desc";
+    search: any;
+};
 export default function handle(): (req: import("express").Request | import("../../..").CrowdinClientRequest, res: Response, next: Function) => void;

package/out/modules/integration/handlers/user-errors.js

@@ -9,27 +9,49 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseUserErrorsQuery = parseUserErrorsQuery;
 exports.default = handle;
 const storage_1 = require("../../../storage");
 const util_1 = require("../../../util");
-const logger_1 = require("../../../util/logger");
+const DEFAULT_LIMIT = 10;
+const MAX_LIMIT = 100;
+const MAX_SEARCH_LENGTH = 255;
+function parseInteger(value, fallback) {
+    const parsed = Number.parseInt(`${value}`, 10);
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+function parseUserErrorsQuery(query = {}) {
+    const search = typeof query.search === 'string' ? query.search.trim().slice(0, MAX_SEARCH_LENGTH) : '';
+    return {
+        limit: Math.min(Math.max(parseInteger(query.limit, DEFAULT_LIMIT), 1), MAX_LIMIT),
+        offset: Math.max(parseInteger(query.offset, 0), 0),
+        orderDirection: (query.order === 'asc' ? 'asc' : 'desc'),
+        search: search || undefined,
+    };
+}
 function handle() {
     return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
-        var _a;
-        const userTimezone = (yield req.crowdinApiClient.usersApi.getAuthenticatedUser()).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) => {
-            if (!(0, util_1.isJson)(userError.data)) {
-                (0, logger_1.logError)(userError);
-                userError.data = JSON.stringify({
-                    appData: { Warning: 'Invalid response data. Please contact the Crowdin support manager.' },
-                });
-            }
-            const date = new Date(+userError.createdAt);
-            const formattedDate = (0, util_1.getFormattedDate)({ date, userTimezone });
-            return Object.assign(Object.assign({}, userError), { formattedDate });
-        });
-        req.logInfo(`Returning ${userErrors === null || userErrors === void 0 ? void 0 : userErrors.length} user errors`);
-        res.send(userErrors);
+        const { limit, offset, orderDirection, search } = parseUserErrorsQuery(req.query);
+        const filter = {
+            crowdinId: req.crowdinContext.crowdinId,
+            integrationId: req.crowdinContext.clientId,
+            search,
+        };
+        req.logInfo(`Loading user errors for crowdinId ${req.crowdinContext.crowdinId} and integrationId ${req.crowdinContext.clientId} (limit ${limit}, offset ${offset})`);
+        const [userTimezone, userErrors, total] = yield Promise.all([
+            req.crowdinApiClient.usersApi
+                .getAuthenticatedUser()
+                .then(({ data }) => data.timezone)
+                .catch((e) => {
+                const errorMessage = e instanceof Error ? e.message : String(e);
+                req.logError(`Can't load user timezone, falling back to server timezone: ${errorMessage}`);
+                return undefined;
+            }),
+            (0, storage_1.getStorage)().getUserErrors(Object.assign(Object.assign({}, filter), { limit, offset, orderDirection })),
+            (0, storage_1.getStorage)().countUserErrors(filter),
+        ]);
+        const data = userErrors.map((userError) => (Object.assign(Object.assign({}, userError), { formattedDate: (0, util_1.getFormattedDate)({ date: new Date(+userError.createdAt), userTimezone }) })));
+        req.logInfo(`Returning ${data.length} of ${total} user errors`);
+        res.send({ data, total });
     }));
 }

package/out/modules/integration/index.js

@@ -43,6 +43,7 @@ const settings_save_1 = __importDefault(require("./handlers/settings-save"));
 const subscription_info_1 = __importDefault(require("./handlers/subscription-info"));
 const sync_settings_1 = __importDefault(require("./handlers/sync-settings"));
 const sync_settings_save_1 = __importDefault(require("./handlers/sync-settings-save"));
+const user_error_detail_1 = __importDefault(require("./handlers/user-error-detail"));
 const user_errors_1 = __importDefault(require("./handlers/user-errors"));
 const users_1 = __importDefault(require("./handlers/users"));
 const invite_users_1 = __importDefault(require("./handlers/invite-users"));
@@ -240,6 +241,13 @@ function register({ config, app }) {
         moduleKey: integrationLogic.key,
         isIntegration: true,
     }), (0, integration_credentials_1.default)({ config, integration: integrationLogic }), (0, user_errors_1.default)());
+    app.get('/api/user-errors/:id', json_response_1.handle, (0, crowdin_client_1.handle)({
+        config,
+        optional: false,
+        checkSubscriptionExpiration: true,
+        moduleKey: integrationLogic.key,
+        isIntegration: true,
+    }), (0, integration_credentials_1.default)({ config, integration: integrationLogic }), (0, user_error_detail_1.default)());
     app.get('/api/users', json_response_1.handle, (0, crowdin_client_1.handle)({
         config,
         optional: false,

package/out/static/ui/main.bundle.js

@@ -36821,54 +36821,21 @@ Defaulting to \`null\`.`;
 	}
 
 	const rowsPerPageOptions = [10, 25, 50];
-	function getTimestamp(value) {
-	    const numericValue = Number(value);
-	    return Number.isNaN(numericValue) ? new Date(value).getTime() : numericValue;
-	}
-	const UserErrorsTable = ({ errors, isLoading, onSelect }) => {
-	    const [search, setSearch] = reactExports.useState('');
-	    const [isAscending, setIsAscending] = reactExports.useState(false);
-	    const [page, setPage] = reactExports.useState(1);
-	    const [rowsPerPage, setRowsPerPage] = reactExports.useState(rowsPerPageOptions[0]);
-	    const filteredErrors = reactExports.useMemo(() => {
-	        const normalizedSearch = search.trim().toLocaleLowerCase();
-	        const matchingErrors = normalizedSearch
-	            ? errors.filter((error) => 
-	            // Typed as string, but the payload is unvalidated API data - a row
-	            // with a missing field must not take the whole table down.
-	            [error.formattedDate, error.action, error.message].some((value) => String(value !== null && value !== void 0 ? value : '')
-	                .toLocaleLowerCase()
-	                .includes(normalizedSearch)))
-	            : errors;
-	        return [...matchingErrors].sort((first, second) => {
-	            const difference = getTimestamp(first.createdAt) - getTimestamp(second.createdAt);
-	            return isAscending ? difference : -difference;
-	        });
-	    }, [errors, isAscending, search]);
-	    const pageCount = Math.max(1, Math.ceil(filteredErrors.length / rowsPerPage));
-	    reactExports.useEffect(() => {
-	        setPage((currentPage) => Math.min(currentPage, pageCount));
-	    }, [pageCount]);
-	    const visibleErrors = filteredErrors.slice((page - 1) * rowsPerPage, page * rowsPerPage);
-	    const firstVisibleRow = filteredErrors.length === 0 ? 0 : (page - 1) * rowsPerPage + 1;
-	    const lastVisibleRow = Math.min(page * rowsPerPage, filteredErrors.length);
+	const UserErrorsTable = ({ errors, isLoading, total, currentPage, rowsPerPage, searchText, isSortedAsc, onSelect, onOptionsChange, }) => {
+	    const pageCount = Math.max(1, Math.ceil(total / rowsPerPage));
+	    const firstVisibleRow = total === 0 ? 0 : (currentPage - 1) * rowsPerPage + 1;
+	    const lastVisibleRow = Math.min(currentPage * rowsPerPage, total);
 	    const handleRowKeyDown = (event, error) => {
 	        if (event.key === 'Enter' || event.key === ' ') {
 	            event.preventDefault();
 	            onSelect(error);
 	        }
 	    };
-	    return (jsxRuntimeExports.jsxs("div", { "data-slot": "user-errors-table", className: "overflow-hidden rounded-lg border bg-card text-card-foreground", children: [jsxRuntimeExports.jsx("div", { "data-slot": "table-toolbar", className: "border-b p-4", children: jsxRuntimeExports.jsxs("div", { className: "relative max-w-md", children: [jsxRuntimeExports.jsx(Search, { className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" }), jsxRuntimeExports.jsx(Input, { value: search, onChange: (event) => {
-	                                setSearch(event.target.value);
-	                                setPage(1);
-	                            }, className: "h-9 pl-9", placeholder: "Search error logs", "aria-label": "Search error logs" })] }) }), jsxRuntimeExports.jsxs(Table, { children: [jsxRuntimeExports.jsx(TableHeader, { children: jsxRuntimeExports.jsxs(TableRow, { className: "hover:bg-transparent", children: [jsxRuntimeExports.jsx(TableHead, { className: "w-1/3 px-4", "aria-sort": isAscending ? 'ascending' : 'descending', children: jsxRuntimeExports.jsxs(Button, { type: "button", variant: "ghost", className: "-ml-2", onClick: () => setIsAscending((currentValue) => !currentValue), "aria-label": `Sort by date ${isAscending ? 'descending' : 'ascending'}`, children: ["Date", isAscending ? (jsxRuntimeExports.jsx(ArrowUp, { "aria-hidden": "true" })) : (jsxRuntimeExports.jsx(ArrowDown, { "aria-hidden": "true" }))] }) }), jsxRuntimeExports.jsx(TableHead, { className: "w-1/3 px-4", children: "Action" }), jsxRuntimeExports.jsx(TableHead, { className: "w-1/3 px-4", children: "Message" })] }) }), jsxRuntimeExports.jsx(TableBody, { "aria-busy": isLoading, children: isLoading ? (Array.from({ length: 3 }).map((_, index) => (jsxRuntimeExports.jsx(TableRow, { children: [0, 1, 2].map((cell) => (jsxRuntimeExports.jsxs(TableCell, { className: "h-12 px-4", children: [index === 0 && cell === 0 && (jsxRuntimeExports.jsx("span", { className: "sr-only", role: "status", children: "Loading error logs" })), jsxRuntimeExports.jsx("div", { className: "h-4 max-w-48 animate-pulse rounded bg-muted" })] }, cell))) }, index)))) : visibleErrors.length > 0 ? (visibleErrors.map((error) => (jsxRuntimeExports.jsxs(TableRow, { tabIndex: 0, className: "cursor-pointer focus-visible:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", onClick: () => onSelect(error), onKeyDown: (event) => handleRowKeyDown(event, error), "aria-label": `Open error details for ${error.action} on ${error.formattedDate}`, children: [jsxRuntimeExports.jsx(TableCell, { className: "h-12 px-4 font-medium whitespace-normal", children: error.formattedDate }), jsxRuntimeExports.jsx(TableCell, { className: "h-12 px-4 whitespace-normal", children: error.action }), jsxRuntimeExports.jsx(TableCell, { className: "h-12 max-w-0 px-4 whitespace-normal", children: jsxRuntimeExports.jsx("span", { className: "line-clamp-2 break-words", children: error.message }) })] }, error.id)))) : (jsxRuntimeExports.jsx(TableRow, { className: "hover:bg-transparent", children: jsxRuntimeExports.jsx(TableCell, { colSpan: 3, className: "h-32 text-center text-muted-foreground", children: search ? 'No error logs match your search.' : 'No error logs found.' }) })) })] }), jsxRuntimeExports.jsxs("div", { "data-slot": "table-pagination", className: "flex flex-col gap-3 border-t px-4 py-2 sm:flex-row sm:items-center sm:justify-end", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [jsxRuntimeExports.jsx("span", { className: "whitespace-nowrap text-muted-foreground", children: "Rows per page" }), jsxRuntimeExports.jsxs(Select, { value: String(rowsPerPage), onValueChange: (value) => {
-	                                    setRowsPerPage(Number(value));
-	                                    setPage(1);
-	                                }, children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "w-18", "aria-label": "Rows per page", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsx(SelectContent, { align: "end", children: rowsPerPageOptions.map((option) => (jsxRuntimeExports.jsx(SelectItem, { value: String(option), children: option }, option))) })] })] }), jsxRuntimeExports.jsxs("p", { className: "m-0 min-w-24 text-sm text-muted-foreground", "aria-live": "polite", children: [firstVisibleRow, "-", lastVisibleRow, " of ", filteredErrors.length] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntimeExports.jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => setPage(1), disabled: page === 1, "aria-label": "Go to first page", children: jsxRuntimeExports.jsx(ChevronsLeft, {}) }), jsxRuntimeExports.jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => setPage((currentPage) => Math.max(1, currentPage - 1)), disabled: page === 1, "aria-label": "Go to previous page", children: jsxRuntimeExports.jsx(ChevronLeft, {}) }), jsxRuntimeExports.jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => setPage((currentPage) => Math.min(pageCount, currentPage + 1)), disabled: page === pageCount, "aria-label": "Go to next page", children: jsxRuntimeExports.jsx(ChevronRight, {}) }), jsxRuntimeExports.jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => setPage(pageCount), disabled: page === pageCount, "aria-label": "Go to last page", children: jsxRuntimeExports.jsx(ChevronsRight, {}) })] })] })] }));
+	    return (jsxRuntimeExports.jsxs("div", { "data-slot": "user-errors-table", className: "overflow-hidden rounded-lg border bg-card text-card-foreground", children: [jsxRuntimeExports.jsx("div", { "data-slot": "table-toolbar", className: "border-b p-4", children: jsxRuntimeExports.jsxs("div", { className: "relative max-w-md", children: [jsxRuntimeExports.jsx(Search, { className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" }), jsxRuntimeExports.jsx(Input, { value: searchText, onChange: (event) => onOptionsChange({ searchText: event.target.value, currentPage: 1 }), className: "h-9 pl-9", placeholder: "Search by action or message", "aria-label": "Search error logs by action or message" })] }) }), jsxRuntimeExports.jsxs(Table, { children: [jsxRuntimeExports.jsx(TableHeader, { children: jsxRuntimeExports.jsxs(TableRow, { className: "hover:bg-transparent", children: [jsxRuntimeExports.jsx(TableHead, { className: "w-1/3 px-4", "aria-sort": isSortedAsc ? 'ascending' : 'descending', children: jsxRuntimeExports.jsxs(Button, { type: "button", variant: "ghost", className: "-ml-2", onClick: () => onOptionsChange({ isSortedAsc: !isSortedAsc, currentPage: 1 }), "aria-label": `Sort by date ${isSortedAsc ? 'descending' : 'ascending'}`, children: ["Date", isSortedAsc ? (jsxRuntimeExports.jsx(ArrowUp, { "aria-hidden": "true" })) : (jsxRuntimeExports.jsx(ArrowDown, { "aria-hidden": "true" }))] }) }), jsxRuntimeExports.jsx(TableHead, { className: "w-1/3 px-4", children: "Action" }), jsxRuntimeExports.jsx(TableHead, { className: "w-1/3 px-4", children: "Message" })] }) }), jsxRuntimeExports.jsx(TableBody, { "aria-busy": isLoading, children: isLoading ? (Array.from({ length: 3 }).map((_, index) => (jsxRuntimeExports.jsx(TableRow, { children: [0, 1, 2].map((cell) => (jsxRuntimeExports.jsxs(TableCell, { className: "h-12 px-4", children: [index === 0 && cell === 0 && (jsxRuntimeExports.jsx("span", { className: "sr-only", role: "status", children: "Loading error logs" })), jsxRuntimeExports.jsx("div", { className: "h-4 max-w-48 animate-pulse rounded bg-muted" })] }, cell))) }, index)))) : errors.length > 0 ? (errors.map((error) => (jsxRuntimeExports.jsxs(TableRow, { tabIndex: 0, className: "cursor-pointer focus-visible:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", onClick: () => onSelect(error), onKeyDown: (event) => handleRowKeyDown(event, error), "aria-label": `Open error details for ${error.action} on ${error.formattedDate}`, children: [jsxRuntimeExports.jsx(TableCell, { className: "h-12 px-4 font-medium whitespace-normal", children: error.formattedDate }), jsxRuntimeExports.jsx(TableCell, { className: "h-12 px-4 whitespace-normal", children: error.action }), jsxRuntimeExports.jsx(TableCell, { className: "h-12 max-w-0 px-4 whitespace-normal", children: jsxRuntimeExports.jsx("span", { className: "line-clamp-2 break-words", children: error.message }) })] }, error.id)))) : (jsxRuntimeExports.jsx(TableRow, { className: "hover:bg-transparent", children: jsxRuntimeExports.jsx(TableCell, { colSpan: 3, className: "h-32 text-center text-muted-foreground", children: searchText ? 'No error logs match your search.' : 'No error logs found.' }) })) })] }), jsxRuntimeExports.jsxs("div", { "data-slot": "table-pagination", className: "flex flex-col gap-3 border-t px-4 py-2 sm:flex-row sm:items-center sm:justify-end", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [jsxRuntimeExports.jsx("span", { className: "whitespace-nowrap text-muted-foreground", children: "Rows per page" }), jsxRuntimeExports.jsxs(Select, { value: String(rowsPerPage), onValueChange: (value) => onOptionsChange({ rowsPerPage: Number(value), currentPage: 1 }), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "w-18", "aria-label": "Rows per page", children: jsxRuntimeExports.jsx(SelectValue, {}) }), jsxRuntimeExports.jsx(SelectContent, { align: "end", children: rowsPerPageOptions.map((option) => (jsxRuntimeExports.jsx(SelectItem, { value: String(option), children: option }, option))) })] })] }), jsxRuntimeExports.jsxs("p", { className: "m-0 min-w-24 text-sm text-muted-foreground", "aria-live": "polite", children: [firstVisibleRow, "-", lastVisibleRow, " of ", total] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntimeExports.jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => onOptionsChange({ currentPage: 1 }), disabled: currentPage === 1, "aria-label": "Go to first page", children: jsxRuntimeExports.jsx(ChevronsLeft, {}) }), jsxRuntimeExports.jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => onOptionsChange({ currentPage: Math.max(1, currentPage - 1) }), disabled: currentPage === 1, "aria-label": "Go to previous page", children: jsxRuntimeExports.jsx(ChevronLeft, {}) }), jsxRuntimeExports.jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => onOptionsChange({ currentPage: Math.min(pageCount, currentPage + 1) }), disabled: currentPage === pageCount, "aria-label": "Go to next page", children: jsxRuntimeExports.jsx(ChevronRight, {}) }), jsxRuntimeExports.jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => onOptionsChange({ currentPage: pageCount }), disabled: currentPage === pageCount, "aria-label": "Go to last page", children: jsxRuntimeExports.jsx(ChevronsRight, {}) })] })] })] }));
 	};
 
-	const IntegrationView = ({ appComponentRef, userErrors, isUserErrorsLoading, onSelectUserError, isErrorLogsVisible, ...integrationProps }) => {
-	    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { style: { display: isErrorLogsVisible ? 'none' : undefined }, children: jsxRuntimeExports.jsx(SimpleIntegration, { ref: appComponentRef, ...integrationProps }) }), jsxRuntimeExports.jsxs("div", { id: "user-errors", style: { display: isErrorLogsVisible ? undefined : 'none' }, children: [jsxRuntimeExports.jsx(UserErrorsTable, { errors: userErrors, isLoading: isUserErrorsLoading, onSelect: onSelectUserError }), jsxRuntimeExports.jsx(AppAlert, { className: "mt-4", children: "This table displays the most recent error logs from the past month. Logs older than one month will be automatically deleted." })] })] }));
+	const IntegrationView = ({ appComponentRef, userErrors, isUserErrorsLoading, userErrorsTotal, userErrorsCurrentPage, userErrorsRowsPerPage, userErrorsSearchText, userErrorsIsSortedAsc, onSelectUserError, onUserErrorsOptionsChange, isErrorLogsVisible, ...integrationProps }) => {
+	    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { style: { display: isErrorLogsVisible ? 'none' : undefined }, children: jsxRuntimeExports.jsx(SimpleIntegration, { ref: appComponentRef, ...integrationProps }) }), jsxRuntimeExports.jsxs("div", { id: "user-errors", style: { display: isErrorLogsVisible ? undefined : 'none' }, children: [jsxRuntimeExports.jsx(UserErrorsTable, { errors: userErrors, isLoading: isUserErrorsLoading, total: userErrorsTotal, currentPage: userErrorsCurrentPage, rowsPerPage: userErrorsRowsPerPage, searchText: userErrorsSearchText, isSortedAsc: userErrorsIsSortedAsc, onSelect: onSelectUserError, onOptionsChange: onUserErrorsOptionsChange }), jsxRuntimeExports.jsx(AppAlert, { className: "mt-4", children: "This table displays the most recent error logs from the past month. Logs older than one month will be automatically deleted." })] })] }));
 	};
 
 	function Progress({ className, value, ...props }) {
@@ -49165,7 +49132,7 @@ Defaulting to \`null\`.`;
 	    return reactExports.useRef(null);
 	}
 
-	const AppDialog = reactExports.forwardRef(({ id, title, width = '70', showCloseButton = true, children, footer, className }, ref) => {
+	const AppDialog = reactExports.forwardRef(({ id, title, width = '70', showCloseButton = true, children, footer, className, onClose }, ref) => {
 	    const [isOpen, setIsOpen] = reactExports.useState(false);
 	    const [portalContainer, setPortalContainer] = reactExports.useState(null);
 	    const contentRef = reactExports.useRef(null);
@@ -49180,7 +49147,12 @@ Defaulting to \`null\`.`;
 	            : width === '65'
 	                ? 'sm:max-w-4xl'
 	                : 'sm:max-w-5xl';
-	    return (jsxRuntimeExports.jsx(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: jsxRuntimeExports.jsx(DialogContent, { ref: contentRef, id: id, showCloseButton: showCloseButton, onOpenAutoFocus: (event) => {
+	    return (jsxRuntimeExports.jsx(Dialog, { open: isOpen, onOpenChange: (open) => {
+	            setIsOpen(open);
+	            if (!open) {
+	                onClose === null || onClose === void 0 ? void 0 : onClose();
+	            }
+	        }, children: jsxRuntimeExports.jsx(DialogContent, { ref: contentRef, id: id, showCloseButton: showCloseButton, onOpenAutoFocus: (event) => {
 	                var _a;
 	                event.preventDefault();
 	                (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -49504,7 +49476,8 @@ Defaulting to \`null\`.`;
 	    }
 	}
 	function getUserErrorDetail(error) {
-	    const data = JSON.parse(error.data);
+	    // `data` is loaded separately, right after the modal opens
+	    const data = error.data && isJSON(error.data) ? JSON.parse(error.data) : null;
 	    const preClassName = 'm-0 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-lg bg-muted p-3 text-xs leading-relaxed text-foreground ring-1 ring-border dark:bg-background';
 	    const rows = [
 	        { label: 'Action', value: error.action },
@@ -49514,6 +49487,10 @@ Defaulting to \`null\`.`;
 	        },
 	        { label: 'Date/time', value: error.formattedDate },
 	    ];
+	    if (!data) {
+	        rows.push({ label: 'Details', value: jsxRuntimeExports.jsx(Skeleton, { className: "h-8 w-full" }) });
+	        return renderUserErrorDetailRows(rows);
+	    }
 	    if (data.requestParams) {
 	        rows.push({ label: 'Method', value: data.requestParams.method });
 	    }
@@ -49542,12 +49519,17 @@ Defaulting to \`null\`.`;
 	            rows.push({ label: 'App Data', value: data.appData });
 	        }
 	    }
+	    return renderUserErrorDetailRows(rows);
+	}
+	function renderUserErrorDetailRows(rows) {
 	    return (jsxRuntimeExports.jsx("div", { className: "min-w-0", children: jsxRuntimeExports.jsx("dl", { className: "grid gap-4", children: rows.map((row) => (jsxRuntimeExports.jsxs("div", { className: "grid gap-1 sm:grid-cols-[10rem_minmax(0,1fr)] sm:gap-6", children: [jsxRuntimeExports.jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: row.label }), jsxRuntimeExports.jsx("dd", { className: "m-0 min-w-0 break-words text-sm text-foreground", children: row.value })] }, row.label))) }) }));
 	}
-	const UserErrorDetailModal = ({ modalRef, selectedUserError }) => {
-	    return (jsxRuntimeExports.jsx(AppDialog, { ref: modalRef, id: "user-error-detail", width: "60", title: "Details", children: selectedUserError && getUserErrorDetail(selectedUserError) }));
+	const UserErrorDetailModal = ({ modalRef, selectedUserError, onClose }) => {
+	    return (jsxRuntimeExports.jsx(AppDialog, { ref: modalRef, id: "user-error-detail", width: "60", title: "Details", onClose: onClose, children: selectedUserError && getUserErrorDetail(selectedUserError) }));
 	};
 
+	const USER_ERRORS_PER_PAGE = 10;
+	const USER_ERRORS_SEARCH_DEBOUNCE = 300;
 	const MainPage = (props) => {
 	    const { name, userId, notice, checkSubscription, isManager, isOwner, infoModal, configurationFields, config: configString, syncNewElements, withCronSync, webhooks, integrationOneLevelFetching, integrationSearchListener, excludedTargetLanguages, filtering, hasOrganization, zenModeUrl, asyncProgress = { checkInterval: 3000 }, reloadOnConfigSave, progressiveCrowdinFilesLoading, integrationButtonMenuItems, crowdinButtonMenuItems, } = props;
 	    const config = reactExports.useRef(configString ? JSON.parse(configString.replace(/\\n/g, '\\\\n')) : {});
@@ -49559,6 +49541,9 @@ Defaulting to \`null\`.`;
 	    const scheduleModalRef = reactExports.useRef(null);
 	    const permissionsModalRef = reactExports.useRef(null);
 	    const userErrorDetailModalRef = reactExports.useRef(null);
+	    const userErrorsRequestId = reactExports.useRef(0);
+	    const userErrorDetailRequestId = reactExports.useRef(0);
+	    const userErrorsSearchTimer = reactExports.useRef(undefined);
 	    const subscriptionLink = reactExports.useRef('');
 	    const refreshDependencies = useFieldDependencies(configurationFields);
 	    const [isNoticeVisible, setIsNoticeVisible] = reactExports.useState(false);
@@ -49566,6 +49551,11 @@ Defaulting to \`null\`.`;
 	    const [isErrorLogsVisible, setIsErrorLogsVisible] = reactExports.useState(false);
 	    const [userErrors, setUserErrors] = reactExports.useState([]);
 	    const [isUserErrorsLoading, setIsUserErrorsLoading] = reactExports.useState(false);
+	    const [userErrorsTotal, setUserErrorsTotal] = reactExports.useState(0);
+	    const [userErrorsCurrentPage, setUserErrorsCurrentPage] = reactExports.useState(1);
+	    const [userErrorsRowsPerPage, setUserErrorsRowsPerPage] = reactExports.useState(USER_ERRORS_PER_PAGE);
+	    const [userErrorsSearchText, setUserErrorsSearchText] = reactExports.useState('');
+	    const [userErrorsIsSortedAsc, setUserErrorsIsSortedAsc] = reactExports.useState(false);
 	    const [selectedUserError, setSelectedUserError] = reactExports.useState(null);
 	    const syncOps = useSyncOperations({
 	        appComponent,
@@ -49618,7 +49608,12 @@ Defaulting to \`null\`.`;
 	            }
 	        };
 	        document.body.addEventListener('keydown', handleKeydown);
-	        return () => document.body.removeEventListener('keydown', handleKeydown);
+	        return () => {
+	            document.body.removeEventListener('keydown', handleKeydown);
+	            if (userErrorsSearchTimer.current) {
+	                clearTimeout(userErrorsSearchTimer.current);
+	            }
+	        };
 	    }, []);
 	    // A 402 from any API call means the subscription lapsed: show the subscribe modal.
 	    reactExports.useEffect(() => {
@@ -49659,24 +49654,90 @@ Defaulting to \`null\`.`;
 	        setIsNoticeVisible(false);
 	        localStorage.setItem(`revised_${suffix !== null && suffix !== void 0 ? suffix : name}`, '1');
 	    }
-	    async function showErrorLogs() {
-	        setIsErrorLogsVisible(true);
+	    async function loadUserErrors({ currentPage = 1, rowsPerPage = USER_ERRORS_PER_PAGE, searchText = '', isSortedAsc = false, } = {}) {
+	        var _a, _b;
+	        const requestId = ++userErrorsRequestId.current;
 	        setIsUserErrorsLoading(true);
 	        try {
 	            const restParams = await checkOrigin();
-	            const res = await checkResponse(await fetch('api/user-errors' + restParams));
-	            setUserErrors(res !== null && res !== void 0 ? res : []);
+	            const query = `&limit=${rowsPerPage}&offset=${(currentPage - 1) * rowsPerPage}` +
+	                `&order=${isSortedAsc ? 'asc' : 'desc'}` +
+	                (searchText ? `&search=${encodeURIComponent(searchText)}` : '');
+	            const res = await checkResponse(await fetch('api/user-errors' + restParams + query));
+	            // a slow response must not overwrite a page requested later
+	            if (requestId !== userErrorsRequestId.current) {
+	                return;
+	            }
+	            setUserErrors((_a = res === null || res === void 0 ? void 0 : res.data) !== null && _a !== void 0 ? _a : []);
+	            setUserErrorsTotal((_b = res === null || res === void 0 ? void 0 : res.total) !== null && _b !== void 0 ? _b : 0);
+	            setUserErrorsCurrentPage(currentPage);
+	            setUserErrorsRowsPerPage(rowsPerPage);
+	            setUserErrorsIsSortedAsc(isSortedAsc);
 	        }
 	        catch (e) {
-	            catchRejection(e, "Can't fetch error logs");
+	            if (requestId === userErrorsRequestId.current) {
+	                catchRejection(e, "Can't fetch error logs");
+	            }
 	        }
 	        finally {
-	            setIsUserErrorsLoading(false);
+	            if (requestId === userErrorsRequestId.current) {
+	                setIsUserErrorsLoading(false);
+	            }
 	        }
 	    }
-	    function showUserErrorDetails(error) {
-	        setSelectedUserError(error);
+	    function clearUserErrorsSearchTimer() {
+	        if (userErrorsSearchTimer.current) {
+	            clearTimeout(userErrorsSearchTimer.current);
+	            userErrorsSearchTimer.current = undefined;
+	        }
+	    }
+	    // Called by the table on paging, rows-per-page, sorting and search input.
+	    // The search field has no debounce of its own, so typing is debounced here.
+	    function onUserErrorsOptionsChange(options) {
+	        var _a, _b, _c, _d;
+	        const currentPage = (_a = options.currentPage) !== null && _a !== void 0 ? _a : userErrorsCurrentPage;
+	        const rowsPerPage = (_b = options.rowsPerPage) !== null && _b !== void 0 ? _b : userErrorsRowsPerPage;
+	        const isSortedAsc = (_c = options.isSortedAsc) !== null && _c !== void 0 ? _c : userErrorsIsSortedAsc;
+	        const searchText = (_d = options.searchText) !== null && _d !== void 0 ? _d : userErrorsSearchText;
+	        const isSearchChange = options.searchText !== undefined && options.searchText !== userErrorsSearchText;
+	        clearUserErrorsSearchTimer();
+	        if (isSearchChange) {
+	            // reflect the keystroke immediately, but debounce the actual request
+	            setUserErrorsSearchText(searchText);
+	            userErrorsSearchTimer.current = setTimeout(() => loadUserErrors({ currentPage, rowsPerPage, searchText, isSortedAsc }), USER_ERRORS_SEARCH_DEBOUNCE);
+	            return;
+	        }
+	        loadUserErrors({ currentPage, rowsPerPage, searchText, isSortedAsc });
+	    }
+	    async function openUserErrorDetail(item) {
+	        // the list response carries no `data` - the heavy payload is loaded for this record only
+	        const requestId = ++userErrorDetailRequestId.current;
+	        setSelectedUserError({ ...item, data: null });
 	        openModal(userErrorDetailModalRef.current);
+	        try {
+	            const restParams = await checkOrigin();
+	            const res = await checkResponse(await fetch(`api/user-errors/${item.id}` + restParams));
+	            setSelectedUserError((current) => ((current === null || current === void 0 ? void 0 : current.id) === item.id ? { ...current, data: res.data } : current));
+	        }
+	        catch (e) {
+	            // dialog was closed or reopened
+	            if (requestId !== userErrorDetailRequestId.current) {
+	                return;
+	            }
+	            catchRejection(e, "Can't fetch error log details");
+	            closeModal(userErrorDetailModalRef.current);
+	            setSelectedUserError(null);
+	        }
+	    }
+	    function onUserErrorDetailClose() {
+	        userErrorDetailRequestId.current++;
+	    }
+	    async function showErrorLogs() {
+	        setIsErrorLogsVisible(true);
+	        // the table keeps its state while the view is hidden - start over on re-entry
+	        clearUserErrorsSearchTimer();
+	        setUserErrorsSearchText('');
+	        await loadUserErrors();
 	    }
 	    function showIntegration() {
 	        setIsErrorLogsVisible(false);
@@ -49684,7 +49745,7 @@ Defaulting to \`null\`.`;
 	    return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-[1420px] px-6 py-4", children: [jsxRuntimeExports.jsx(TopBar, { notice: notice, isNoticeVisible: isNoticeVisible, checkSubscription: checkSubscription, subscriptionInfo: subscriptionInfo, isErrorLogsVisible: isErrorLogsVisible, isManager: isManager, infoModal: infoModal, hasSettings: !!configurationFields, isOwner: isOwner, onCloseNotice: closeAlert, onShowIntegration: showIntegration, onShowErrorLogs: showErrorLogs, onShowPermissions: permissions.showPermissionsDialog, onOpenInfoModal: () => openModal(infoModalRef.current), onOpenSettings: () => {
 	                            openModal(settingsModalRef.current);
 	                            setTimeout(settings.fillSettingsForm, 0);
-	                        }, onLogout: integrationLogout }), jsxRuntimeExports.jsx(IntegrationView, { appComponentRef: appComponent, userErrors: userErrors, isUserErrorsLoading: isUserErrorsLoading, onSelectUserError: showUserErrorDetails, name: name, isErrorLogsVisible: isErrorLogsVisible, syncNewElements: syncNewElements, withCronSync: withCronSync, webhooks: webhooks, integrationOneLevelFetching: integrationOneLevelFetching, integrationSearchListener: integrationSearchListener, filtering: filtering, integrationButtonMenuItems: integrationButtonMenuItems, crowdinButtonMenuItems: crowdinButtonMenuItems, onRefreshFilesList: syncOps.handleRefreshFilesList, onFolderToggle: syncOps.handleFolderToggle, onUploadFilesToCrowdin: (detail) => syncOps.uploadFilesToCrowdin({ detail }), onUploadFilesToIntegration: (detail) => syncOps.uploadFilesToIntegration({ detail }), onLoadMore: syncOps.handleLoadMore, onIntegrationFilterChange: syncOps.handleIntegrationFilterChange, onIntegrationScheduleSync: (detail) => schedule.setIntegrationScheduleSync({ detail }), onCrowdinScheduleSync: (detail) => schedule.setCrowdinScheduleSync({ detail }), onIntegrationDisableSync: (detail) => schedule.disableIntegrationSync({ detail }), onCrowdinDisableSync: (detail) => schedule.disableCrowdinSync({ detail }) })] }), jsxRuntimeExports.jsx(Toaster, {}), jsxRuntimeExports.jsx(AsyncProgress, { ref: asyncProgressRef, onCancelJob: syncOps.cancelJob }), jsxRuntimeExports.jsx(SubscriptionModal, { modalRef: subscriptionModal, subscriptionLink: subscriptionLink, name: name, onLogout: integrationLogout }), jsxRuntimeExports.jsx(PermissionsModal, { modalRef: permissionsModalRef, isLoading: permissions.isLoading, permissionUserOptions: permissions.permissionUserOptions, selectedUsers: permissions.permissionsSelectedUsers, isConfirmVisible: permissions.isPermissionsConfirmVisible, permissionsSummary: permissions.permissionsSummary, hasOrganization: hasOrganization, zenModeUrl: zenModeUrl, saveDisabled: !permissions.isPermissionsLoaded, onUsersChange: permissions.checkUsers, onSave: permissions.inviteUsers }), excludedTargetLanguages && (jsxRuntimeExports.jsx(ExcludedLanguagesModal, { modalRef: syncOps.languageModalRef, languageSelectRef: syncOps.languageSelectRef, languageModalState: syncOps.languageModalState, onUpdateTargetLanguages: syncOps.updateCrowdinFilesTargetLanguages, onSyncToCrowdin: syncOps.uploadFilesToCrowdinWithExcludedLanguages })), infoModal && jsxRuntimeExports.jsx(InfoModal, { modalRef: infoModalRef, infoModal: infoModal }), configurationFields && (jsxRuntimeExports.jsx(SettingsModal, { modalRef: settingsModalRef, isLoading: settings.isLoading, configurationFields: configurationFields, isSaveDisabled: settings.isSettingsSaveDisabled, settingsFieldChange: settings.settingsFieldChange, registerSettingsField: settings.registerSettingsField, fieldErrors: settings.fieldErrors, onSave: settings.saveSettings })), ((syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) || (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)) && (jsxRuntimeExports.jsx(ScheduleModal, { modalRef: scheduleModalRef, selectedFilesCheckboxRef: schedule.selectedFilesCheckboxRef, allFolderFilesCheckboxRef: schedule.allFolderFilesCheckboxRef, newFilesCheckboxRef: schedule.newFilesCheckboxRef, scheduleModalState: schedule.scheduleModalState, isSaveDisabled: schedule.isScheduleSaveDisabled, onChangeOptions: schedule.onChangeAutoSynchronizationOptions, onSave: schedule.saveScheduleSync })), jsxRuntimeExports.jsx(UserErrorDetailModal, { modalRef: userErrorDetailModalRef, selectedUserError: selectedUserError })] }));
+	                        }, onLogout: integrationLogout }), jsxRuntimeExports.jsx(IntegrationView, { appComponentRef: appComponent, userErrors: userErrors, isUserErrorsLoading: isUserErrorsLoading, userErrorsTotal: userErrorsTotal, userErrorsCurrentPage: userErrorsCurrentPage, userErrorsRowsPerPage: userErrorsRowsPerPage, userErrorsSearchText: userErrorsSearchText, userErrorsIsSortedAsc: userErrorsIsSortedAsc, onSelectUserError: openUserErrorDetail, onUserErrorsOptionsChange: onUserErrorsOptionsChange, name: name, isErrorLogsVisible: isErrorLogsVisible, syncNewElements: syncNewElements, withCronSync: withCronSync, webhooks: webhooks, integrationOneLevelFetching: integrationOneLevelFetching, integrationSearchListener: integrationSearchListener, filtering: filtering, integrationButtonMenuItems: integrationButtonMenuItems, crowdinButtonMenuItems: crowdinButtonMenuItems, onRefreshFilesList: syncOps.handleRefreshFilesList, onFolderToggle: syncOps.handleFolderToggle, onUploadFilesToCrowdin: (detail) => syncOps.uploadFilesToCrowdin({ detail }), onUploadFilesToIntegration: (detail) => syncOps.uploadFilesToIntegration({ detail }), onLoadMore: syncOps.handleLoadMore, onIntegrationFilterChange: syncOps.handleIntegrationFilterChange, onIntegrationScheduleSync: (detail) => schedule.setIntegrationScheduleSync({ detail }), onCrowdinScheduleSync: (detail) => schedule.setCrowdinScheduleSync({ detail }), onIntegrationDisableSync: (detail) => schedule.disableIntegrationSync({ detail }), onCrowdinDisableSync: (detail) => schedule.disableCrowdinSync({ detail }) })] }), jsxRuntimeExports.jsx(Toaster, {}), jsxRuntimeExports.jsx(AsyncProgress, { ref: asyncProgressRef, onCancelJob: syncOps.cancelJob }), jsxRuntimeExports.jsx(SubscriptionModal, { modalRef: subscriptionModal, subscriptionLink: subscriptionLink, name: name, onLogout: integrationLogout }), jsxRuntimeExports.jsx(PermissionsModal, { modalRef: permissionsModalRef, isLoading: permissions.isLoading, permissionUserOptions: permissions.permissionUserOptions, selectedUsers: permissions.permissionsSelectedUsers, isConfirmVisible: permissions.isPermissionsConfirmVisible, permissionsSummary: permissions.permissionsSummary, hasOrganization: hasOrganization, zenModeUrl: zenModeUrl, saveDisabled: !permissions.isPermissionsLoaded, onUsersChange: permissions.checkUsers, onSave: permissions.inviteUsers }), excludedTargetLanguages && (jsxRuntimeExports.jsx(ExcludedLanguagesModal, { modalRef: syncOps.languageModalRef, languageSelectRef: syncOps.languageSelectRef, languageModalState: syncOps.languageModalState, onUpdateTargetLanguages: syncOps.updateCrowdinFilesTargetLanguages, onSyncToCrowdin: syncOps.uploadFilesToCrowdinWithExcludedLanguages })), infoModal && jsxRuntimeExports.jsx(InfoModal, { modalRef: infoModalRef, infoModal: infoModal }), configurationFields && (jsxRuntimeExports.jsx(SettingsModal, { modalRef: settingsModalRef, isLoading: settings.isLoading, configurationFields: configurationFields, isSaveDisabled: settings.isSettingsSaveDisabled, settingsFieldChange: settings.settingsFieldChange, registerSettingsField: settings.registerSettingsField, fieldErrors: settings.fieldErrors, onSave: settings.saveSettings })), ((syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) || (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)) && (jsxRuntimeExports.jsx(ScheduleModal, { modalRef: scheduleModalRef, selectedFilesCheckboxRef: schedule.selectedFilesCheckboxRef, allFolderFilesCheckboxRef: schedule.allFolderFilesCheckboxRef, newFilesCheckboxRef: schedule.newFilesCheckboxRef, scheduleModalState: schedule.scheduleModalState, isSaveDisabled: schedule.isScheduleSaveDisabled, onChangeOptions: schedule.onChangeAutoSynchronizationOptions, onSave: schedule.saveScheduleSync })), jsxRuntimeExports.jsx(UserErrorDetailModal, { modalRef: userErrorDetailModalRef, selectedUserError: selectedUserError, onClose: onUserErrorDetailClose })] }));
 	};
 
 	initializeCrowdinIframeContext();