fix: custom logs format

This commit is contained in:
Vijaykant Yadav 2025-03-13 14:52:16 +05:30
parent 27c32cc12b
commit 65d1661b0c
4 changed files with 37 additions and 9 deletions

View file

@ -457,7 +457,7 @@ export const createEventsSlice = (set, get) => ({
page: 'Event Errors with page',
component: 'Component Event',
query: 'Event Errors with query',
customLog: 'Custom Log',
customLog: 'Queries',
};
return errorTargetMap[source];
@ -1103,29 +1103,47 @@ export const createEventsSlice = (set, get) => ({
};
const logInfo = (log) => {
const query = dataQuery.queries.modules['canvas'].find((query) => query.id == queryId);
const error = new Error();
const stackLine = error.stack.split('\n')[2];
const lineNumberMatch = stackLine.match(/:(\d+):\d+\)$/);
const lineNumber = lineNumberMatch ? lineNumberMatch[1] : 'unknown';
const event = { actionId: 'log-info', description: `${log}, Line ${lineNumber - 2}`, eventType: 'customLog' };
const event = {
actionId: 'log-info',
description: `${query.name}, ${log}, Line ${lineNumber - 2}`,
eventType: 'customLog',
query,
};
return executeAction(event, mode, {});
};
const logError = (log) => {
const query = dataQuery.queries.modules['canvas'].find((query) => query.id == queryId);
const error = new Error();
const stackLine = error.stack.split('\n')[2];
const lineNumberMatch = stackLine.match(/:(\d+):\d+\)$/);
const lineNumber = lineNumberMatch ? lineNumberMatch[1] : 'unknown';
const event = { actionId: 'log-error', description: `${log}, Line ${lineNumber - 2}`, eventType: 'customLog' };
const event = {
actionId: 'log-error',
description: `${query.name}, ${log}, Line ${lineNumber - 2}`,
eventType: 'customLog',
query,
};
return executeAction(event, mode, {});
};
const log = (log) => {
const query = dataQuery.queries.modules['canvas'].find((query) => query.id == queryId);
const error = new Error();
const stackLine = error.stack.split('\n')[2];
const lineNumberMatch = stackLine.match(/:(\d+):\d+\)$/);
const lineNumber = lineNumberMatch ? lineNumberMatch[1] : 'unknown';
const event = { actionId: 'log', description: `${log}, Line ${lineNumber - 2}`, eventType: 'customLog' };
const event = {
actionId: 'log',
description: `${query.name}, ${log}, Line ${lineNumber - 2}`,
eventType: 'customLog',
query,
};
return executeAction(event, mode, {});
};

View file

@ -762,7 +762,7 @@ export const createQueryPanelSlice = (set, get) => ({
const { eventsSlice } = get();
const { generateAppActions } = eventsSlice;
const queriesInResolvedState = deepClone(currentState.queries);
const actions = generateAppActions('', mode);
const actions = generateAppActions(query?.id, mode);
const proxiedComponents = createProxy(currentState?.components, 'components');
const proxiedGlobals = createProxy(currentState?.globals, 'globals');

View file

@ -103,17 +103,20 @@ function Logs({ logProps, idx }) {
<div className="error-target cursor-pointer">{logProps?.errorTarget}</div>
<small className="text-slate-10 text-right ">{moment(logProps?.timestamp).fromNow()}</small>
</div>
{logProps?.type === 'Custom Log' && (
<div className="error-target-custom-log cursor-pointer">Custom Log</div>
)}
<div className={`d-flex justify-content-between align-items-center ${!open && 'text-truncate'}`}>
<span
className={` cursor-pointer debugger-error-title ${!open && 'text-truncate'} ${
logProps?.errorTarget == 'Custom Log' && logProps?.logLevel == 'error' && 'text-tomato-9'
className={` cursor-pointer debugger-error-title font-weight-500 ${!open && 'text-truncate'} ${
logProps?.type == 'Custom Log' && logProps?.logLevel == 'error' && 'text-tomato-9'
}`}
>
<HighlightSecondWord text={title} />
</span>
</div>
<span
className={cx({
className={cx('font-weight-500', {
'text-tomato-9': !logProps?.isQuerySuccessLog,
'color-light-green': logProps?.isQuerySuccessLog,
})}

View file

@ -253,12 +253,19 @@
background-color: var(--slate3);
}
.error-target {
.error-target, .error-target-custom-log {
background-color: var(--interactive-overlays-fill-hover) !important;
padding: 4px 7px;
border-radius: 7px;
color: var(--slate10)
}
.error-target-custom-log {
margin-top: 5px;
background: var(--purple5) !important;
color: var(--purple11);
width: fit-content;
}
}