@postgres.ai/shared 4.2.0-pr-1203 → 4.2.0-pr-1203.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postgres.ai/shared",
-  "version": "4.2.0-pr-1203",
+  "version": "4.2.0-pr-1203.1",
   "main": "index.js",
   "types": "index.d.ts",
   "peerDependencies": {

package/pages/Logs/index.js

@@ -6,6 +6,7 @@ import React, { useEffect, useReducer } from 'react';
 import { Spinner } from '@postgres.ai/shared/components/Spinner';
 import { closeConnection, establishConnection, restartConnection, } from '@postgres.ai/shared/pages/Logs/wsLogs';
 import { useWsScroll } from '@postgres.ai/shared/pages/Logs/hooks/useWsScroll';
+import { LOGS_FILTER_KEY, readLogsFilterState } from './utils';
 import { LAPTOP_WIDTH_PX } from './constants';
 import { PlusIcon } from './Icons/PlusIcon';
 const useStyles = makeStyles(() => ({
@@ -102,8 +103,6 @@ export const Logs = ({ api, instanceId }) => {
     const [isLoading, setIsLoading] = React.useState(true);
     const targetNode = document.getElementById('logs-container');
     useWsScroll(isLoading);
-    const logsFilterState = (localStorage === null || localStorage === void 0 ? void 0 : localStorage.getItem('logsFilter')) &&
-        (JSON === null || JSON === void 0 ? void 0 : JSON.parse((localStorage === null || localStorage === void 0 ? void 0 : localStorage.getItem('logsFilter')) || ''));
     const initialState = (obj) => {
         const filters = {
             '[DEBUG]': true,
@@ -150,7 +149,7 @@ export const Logs = ({ api, instanceId }) => {
                 throw new Error();
         }
     };
-    const [state, dispatch] = useReducer(reducer, initialState(logsFilterState));
+    const [state, dispatch] = useReducer(reducer, initialState(readLogsFilterState()));
     const FormCheckbox = ({ type }) => {
         const filterType = state[`[${type}]`];
         return (_jsxs("span", { onClick: () => {
@@ -169,7 +168,7 @@ export const Logs = ({ api, instanceId }) => {
         return closeConnection;
     }, [api, instanceId]);
     useEffect(() => {
-        localStorage.setItem('logsFilter', JSON.stringify(state));
+        localStorage.setItem(LOGS_FILTER_KEY, JSON.stringify(state));
     }, [state]);
     useEffect(() => {
         const config = { attributes: false, childList: true, subtree: true };

package/pages/Logs/utils/index.d.ts

@@ -1,2 +1,4 @@
+export declare const LOGS_FILTER_KEY = "logsFilter";
+export declare const readLogsFilterState: () => Record<string, boolean>;
 export declare const stringWithoutBrackets: (val: string | undefined) => string;
 export declare const stringContainsPattern: (target: string, pattern?: string[]) => boolean;

package/pages/Logs/utils/index.js

@@ -1,3 +1,22 @@
+export const LOGS_FILTER_KEY = 'logsFilter';
+// The filter state is persisted across reloads, so anything may be sitting under the key by
+// the time the page reads it back. An absent or unusable entry falls back to the defaults the
+// page seeds instead of throwing out of a render or out of a socket message handler.
+export const readLogsFilterState = () => {
+    const stored = localStorage.getItem(LOGS_FILTER_KEY);
+    if (!stored)
+        return {};
+    try {
+        const parsed = JSON.parse(stored);
+        if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+            return {};
+        }
+        return parsed;
+    }
+    catch {
+        return {};
+    }
+};
 export const stringWithoutBrackets = (val) => String(val).replace(/[[\]]/g, '');
 export const stringContainsPattern = (target, pattern = [
     'base.go',

package/pages/Logs/wsLogs.js

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { stringContainsPattern, stringWithoutBrackets } from './utils';
+import { readLogsFilterState, stringContainsPattern, stringWithoutBrackets, } from './utils';
 const logsEndpoint = '/instance/logs';
 const LOGS_TIME_LIMIT = 20;
 const LOGS_LINE_LIMIT = 1000;
@@ -32,7 +32,7 @@ export const establishConnection = async (api, instanceId) => {
         const tag = document.createElement('p');
         const logLevel = logEntry.split(' ')[3];
         const logInitiator = logEntry.split(' ')[2];
-        const logsFilterState = JSON.parse(localStorage.getItem('logsFilter') || '');
+        const logsFilterState = readLogsFilterState();
         const filterInitiators = Object.keys(logsFilterState).some((state) => {
             if (logsFilterState[state]) {
                 if (state === '[other]') {
@@ -53,8 +53,11 @@ export const establishConnection = async (api, instanceId) => {
         if (logInitiator === '[ERROR]' || logLevel === '[ERROR]') {
             tag.classList.add('error-log');
         }
-        if (logType === 'message') {
-            const logEntryTime = moment.utc(logElement.children[0].innerHTML.split(' ').slice(0, 2).join(' '));
+        // The container is empty whenever the active filters drop every line received so far,
+        // so the oldest entry the trim is measured against may not exist.
+        const oldestEntry = logElement.children[0];
+        if (logType === 'message' && oldestEntry) {
+            const logEntryTime = moment.utc(oldestEntry.innerHTML.split(' ').slice(0, 2).join(' '));
             const timeDifference = moment(logEntryTime).isValid() &&
                 moment.duration(moment.utc(Date.now()).diff(logEntryTime)).asMinutes();
             if (logElement.childElementCount > LOGS_LINE_LIMIT &&