PromucFlow_constructor/app/client/src/workers/UserLog.ts

230 lines
5.9 KiB
TypeScript
Raw Normal View History

feat: console log implementation in appsmith (#16286) * feat: capture console from across the app (#15676) * create: console override file - Adds methods to override the given console functionality to capture the console statements written by the user * update: evaluate function to extract console op - Added logs extraction for both sync and async functions - Adding them to the return object of the evaluations * update: timestamp field to log addition method - Added optional argument to function definition for inputting the timestamp of the log - This is done to maintain timings of the execution of the log * update: interface for log objects * update: post function execution logic - Added logic to push the logs generated by the evaluation to the logs store * update: added handling for sending nested fns - While console logging functions or objects that had functions was causing an error - Added a check for removing functions and replacing them with name of the functions instead * chore: added types and comments * fix: updated evaluation tests * fix: added check for log in returned obj * update: added the source data in the trigger logs - Removed on js execute logs from showing up here since they are already handled. If they are not removed, they will show up on the first page load twice * add: ellipsis function for log title string - This is to keep big object contained in the first line only * update: made logs reset function public * update: resetting logs before new eval - Logs object has to be cleared before next eval can happen to make sure there are no roll overs from last evals * chore: added comments * add: extracting logs after eval of functions * add: storing logs to redux after eval * refactor: updated types * add: func to store logs w/ severity as arg * refactor: updating func call for user logs * chore: fixed elipsis logic * chore: removed unused type * chore: updated preview text logic * add: type for transfer object post eval * update: aded new userLogs obj to dataTreeEvaluator * update: passing logs from object to saga * update: parsing received userlogs * refactor: used predefined fns * refactor: moved resetlogs to common func * chore: updated comments * feat: update redux store and UI for system + user logs (#15936) * update: updated types for the redux store - Added category and data fields in the log object * update: types of log redux store * update: calls for the console log store function * update: icon fetch func for log item UI * update: syncing UI with the new designs (WIP) * chore: fixed lint error * update: filters for logs * update: icon for clearing log filters * update: filtering function - Added checks against category and severity * update: logitem UI - updated type of the UI object - added css based ellipsis - added toggle for console logs - added array of json views for objects/arrays - css tweaks * update: debugger cta - Removed copy option - Updated UI * update: logic for expanding user logs - Removed debugger CTA - Fixed position for the expand/collapse icon - Added joining char for when the log is expanded * update: assets for new UI - updated colors - Added new icon * hotfix: ternserver code * add: search across the text of log * update: icons for the app * update: click to expand/collapse of logs * fix: search keyword update on change within JSObjects * fix: alignment of log items in both states * update: jest tests for debugger errors and filter * fix: drop down options color issue - the icon used was not the standard one - We have a lot of duplicates of the same icon * fix: synced with ADS changes on release * fix: remove dependency from old icon * add: cypress selectors for automation testing * fix: replaced static messages with variables * fix: updated the dependency map for filter * fix: height of the filter drop down * fix: chaining logic for search filter * fix: syncing the padding values to ADS * fix: help icon visibility issue * fix: width of filter dropdown Co-authored-by: Rishabh-Rathod <rishabh.rathod@appsmith.com> * add: e2e tests for console statements using IIFE * test: added test for console logs in jsobjects * fix: functionality of expanding context menu on msg click * fix: added try catch and handling for numbers * hotfix: handling unwanted toasts * fix: alignment and clickable cursor * fix: alignment of expanded span in console logs * add: analytics event on new console log created * fix: added handling for boolean and undefined * fix: removed log reset from common func - Whenever we are creating global DTO, the logs were being reset. This caused logs to reset whenever a promise was encountered in the logs. * fix: combined JS log saving to widget process * add: new analytics event on filter changed * update: added handling for empty value * update: removed comma between multiple logs * update: synced test changes with release * update: removed unused wait timings * Logs spec script update * update: ts methods in log spec e2e test * logs spec update * update: removed body clicks from test script * Logs spec update * update: removed ask from google option * refactor: ui fixes * fix: text selection of logs * fix: updated dropdown width management * update: made the flushlogs function async * update: added handling for promises * update: added test with promises fail and pass * fix: added sync variant to work for sync objects * refactor: commented out unused tests * update: exceptions in the name of log entity * fix: pagination of logs to handle dynamic data stream * fix: removed unused async function * fix: moved logs handling to separate saga * fix: color for context menu text Co-authored-by: Rishabh-Rathod <rishabh.rathod@appsmith.com> Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
2022-09-04 11:58:05 +00:00
import { uuid4 } from "@sentry/utils";
import { Severity, SourceEntity } from "entities/AppsmithConsole";
import moment from "moment";
export type Methods =
| "log"
| "debug"
| "info"
| "warn"
| "error"
| "table"
| "clear"
| "time"
| "timeEnd"
| "count"
| "assert";
export type UserLogObject = { logObject: LogObject[]; source: SourceEntity };
// Type of the log object
export type LogObject = {
method: Methods | "result";
data: any[];
timestamp: string;
id: string;
severity: Severity;
};
const truncate = (input: string, suffix = "", truncLen = 100) => {
try {
if (!!input) {
return input.length > truncLen
? `${input.substring(0, truncLen)}...${suffix}`
: input;
} else {
return "";
}
} catch (error) {
return `Invalid log: ${JSON.stringify(error)}`;
}
};
// Converts the data from the log object to a string
export function createLogTitleString(data: any[]) {
try {
// convert mixed array to string
return data.reduce((acc, curr) => {
// curr can be a string or an object
if (typeof curr === "boolean") {
return `${acc} ${curr}`;
}
if (curr === null || curr === undefined) {
return `${acc} undefined`;
}
if (curr instanceof Promise) {
return `${acc} Promise ${curr.constructor.name}`;
}
if (typeof curr === "string") {
return `${acc} ${truncate(curr)}`;
}
if (typeof curr === "number") {
return `${acc} ${truncate(curr.toString())}`;
}
if (typeof curr === "function") {
return `${acc} func() ${curr.name}`;
}
if (typeof curr === "object") {
let suffix = "}";
if (Array.isArray(curr)) {
suffix = "]";
}
return `${acc} ${truncate(JSON.stringify(curr, null, "\t"), suffix)}`;
}
acc = `${acc} -`;
}, "");
} catch (error) {
return `Error in parsing log: ${JSON.stringify(error)}`;
}
}
class UserLog {
constructor() {
this.initiate();
}
private logs: LogObject[] = [];
// initiates the log object with the default methods and their overrides
private initiate() {
const { debug, error, info, log, table, warn } = console;
console = {
...console,
table: (...args: any) => {
table.call(this, args);
const parsed = this.parseLogs("table", args);
if (parsed) {
this.logs.push(parsed);
}
return;
},
error: (...args: any) => {
error.apply(this, args);
const parsed = this.parseLogs("error", args);
if (parsed) {
this.logs.push(parsed);
}
return;
},
log: (...args: any) => {
log.apply(this, args);
const parsed = this.parseLogs("log", args);
if (parsed) {
this.logs.push(parsed);
}
return;
},
debug: (...args: any) => {
debug.apply(this, args);
const parsed = this.parseLogs("debug", args);
if (parsed) {
this.logs.push(parsed);
}
return;
},
warn: (...args: any) => {
warn.apply(this, args);
const parsed = this.parseLogs("warn", args);
if (parsed) {
this.logs.push(parsed);
}
return;
},
info: (...args: any) => {
info.apply(this, args);
const parsed = this.parseLogs("info", args);
if (parsed) {
this.logs.push(parsed);
}
return;
},
};
}
public getTimestamp() {
return moment().format("hh:mm:ss");
}
public replaceFunctionWithNamesFromObjects(data: any) {
if (typeof data === "object") {
for (const key in data) {
if (typeof data[key] === "function") {
data[key] = `func() ${data[key].name}`;
} else if (data[key] instanceof Promise) {
data[key] = "Promise";
} else {
this.replaceFunctionWithNamesFromObjects(data[key]);
}
}
}
return data;
}
// iterates over the data and if data is object/array, then it will remove any functions from it
public sanitizeData(data: any): any {
let returnData = [];
try {
returnData = data.map((item: any) => {
if (typeof item === "object") {
return this.replaceFunctionWithNamesFromObjects(item);
}
// if the item is a function, then remove it from the data and return it as name of the function
if (typeof item === "function") {
return `func() item.name`;
}
return item;
});
} catch (e) {
returnData = [`There was some error: ${e} ${JSON.stringify(data)}`];
}
return returnData;
}
// returns the logs from the function execution after sanitising them and resets the logs object after that
public flushLogs(softFlush = false): LogObject[] {
feat: console log implementation in appsmith (#16286) * feat: capture console from across the app (#15676) * create: console override file - Adds methods to override the given console functionality to capture the console statements written by the user * update: evaluate function to extract console op - Added logs extraction for both sync and async functions - Adding them to the return object of the evaluations * update: timestamp field to log addition method - Added optional argument to function definition for inputting the timestamp of the log - This is done to maintain timings of the execution of the log * update: interface for log objects * update: post function execution logic - Added logic to push the logs generated by the evaluation to the logs store * update: added handling for sending nested fns - While console logging functions or objects that had functions was causing an error - Added a check for removing functions and replacing them with name of the functions instead * chore: added types and comments * fix: updated evaluation tests * fix: added check for log in returned obj * update: added the source data in the trigger logs - Removed on js execute logs from showing up here since they are already handled. If they are not removed, they will show up on the first page load twice * add: ellipsis function for log title string - This is to keep big object contained in the first line only * update: made logs reset function public * update: resetting logs before new eval - Logs object has to be cleared before next eval can happen to make sure there are no roll overs from last evals * chore: added comments * add: extracting logs after eval of functions * add: storing logs to redux after eval * refactor: updated types * add: func to store logs w/ severity as arg * refactor: updating func call for user logs * chore: fixed elipsis logic * chore: removed unused type * chore: updated preview text logic * add: type for transfer object post eval * update: aded new userLogs obj to dataTreeEvaluator * update: passing logs from object to saga * update: parsing received userlogs * refactor: used predefined fns * refactor: moved resetlogs to common func * chore: updated comments * feat: update redux store and UI for system + user logs (#15936) * update: updated types for the redux store - Added category and data fields in the log object * update: types of log redux store * update: calls for the console log store function * update: icon fetch func for log item UI * update: syncing UI with the new designs (WIP) * chore: fixed lint error * update: filters for logs * update: icon for clearing log filters * update: filtering function - Added checks against category and severity * update: logitem UI - updated type of the UI object - added css based ellipsis - added toggle for console logs - added array of json views for objects/arrays - css tweaks * update: debugger cta - Removed copy option - Updated UI * update: logic for expanding user logs - Removed debugger CTA - Fixed position for the expand/collapse icon - Added joining char for when the log is expanded * update: assets for new UI - updated colors - Added new icon * hotfix: ternserver code * add: search across the text of log * update: icons for the app * update: click to expand/collapse of logs * fix: search keyword update on change within JSObjects * fix: alignment of log items in both states * update: jest tests for debugger errors and filter * fix: drop down options color issue - the icon used was not the standard one - We have a lot of duplicates of the same icon * fix: synced with ADS changes on release * fix: remove dependency from old icon * add: cypress selectors for automation testing * fix: replaced static messages with variables * fix: updated the dependency map for filter * fix: height of the filter drop down * fix: chaining logic for search filter * fix: syncing the padding values to ADS * fix: help icon visibility issue * fix: width of filter dropdown Co-authored-by: Rishabh-Rathod <rishabh.rathod@appsmith.com> * add: e2e tests for console statements using IIFE * test: added test for console logs in jsobjects * fix: functionality of expanding context menu on msg click * fix: added try catch and handling for numbers * hotfix: handling unwanted toasts * fix: alignment and clickable cursor * fix: alignment of expanded span in console logs * add: analytics event on new console log created * fix: added handling for boolean and undefined * fix: removed log reset from common func - Whenever we are creating global DTO, the logs were being reset. This caused logs to reset whenever a promise was encountered in the logs. * fix: combined JS log saving to widget process * add: new analytics event on filter changed * update: added handling for empty value * update: removed comma between multiple logs * update: synced test changes with release * update: removed unused wait timings * Logs spec script update * update: ts methods in log spec e2e test * logs spec update * update: removed body clicks from test script * Logs spec update * update: removed ask from google option * refactor: ui fixes * fix: text selection of logs * fix: updated dropdown width management * update: made the flushlogs function async * update: added handling for promises * update: added test with promises fail and pass * fix: added sync variant to work for sync objects * refactor: commented out unused tests * update: exceptions in the name of log entity * fix: pagination of logs to handle dynamic data stream * fix: removed unused async function * fix: moved logs handling to separate saga * fix: color for context menu text Co-authored-by: Rishabh-Rathod <rishabh.rathod@appsmith.com> Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
2022-09-04 11:58:05 +00:00
const userLogs = this.logs;
if (!softFlush) this.resetLogs();
feat: console log implementation in appsmith (#16286) * feat: capture console from across the app (#15676) * create: console override file - Adds methods to override the given console functionality to capture the console statements written by the user * update: evaluate function to extract console op - Added logs extraction for both sync and async functions - Adding them to the return object of the evaluations * update: timestamp field to log addition method - Added optional argument to function definition for inputting the timestamp of the log - This is done to maintain timings of the execution of the log * update: interface for log objects * update: post function execution logic - Added logic to push the logs generated by the evaluation to the logs store * update: added handling for sending nested fns - While console logging functions or objects that had functions was causing an error - Added a check for removing functions and replacing them with name of the functions instead * chore: added types and comments * fix: updated evaluation tests * fix: added check for log in returned obj * update: added the source data in the trigger logs - Removed on js execute logs from showing up here since they are already handled. If they are not removed, they will show up on the first page load twice * add: ellipsis function for log title string - This is to keep big object contained in the first line only * update: made logs reset function public * update: resetting logs before new eval - Logs object has to be cleared before next eval can happen to make sure there are no roll overs from last evals * chore: added comments * add: extracting logs after eval of functions * add: storing logs to redux after eval * refactor: updated types * add: func to store logs w/ severity as arg * refactor: updating func call for user logs * chore: fixed elipsis logic * chore: removed unused type * chore: updated preview text logic * add: type for transfer object post eval * update: aded new userLogs obj to dataTreeEvaluator * update: passing logs from object to saga * update: parsing received userlogs * refactor: used predefined fns * refactor: moved resetlogs to common func * chore: updated comments * feat: update redux store and UI for system + user logs (#15936) * update: updated types for the redux store - Added category and data fields in the log object * update: types of log redux store * update: calls for the console log store function * update: icon fetch func for log item UI * update: syncing UI with the new designs (WIP) * chore: fixed lint error * update: filters for logs * update: icon for clearing log filters * update: filtering function - Added checks against category and severity * update: logitem UI - updated type of the UI object - added css based ellipsis - added toggle for console logs - added array of json views for objects/arrays - css tweaks * update: debugger cta - Removed copy option - Updated UI * update: logic for expanding user logs - Removed debugger CTA - Fixed position for the expand/collapse icon - Added joining char for when the log is expanded * update: assets for new UI - updated colors - Added new icon * hotfix: ternserver code * add: search across the text of log * update: icons for the app * update: click to expand/collapse of logs * fix: search keyword update on change within JSObjects * fix: alignment of log items in both states * update: jest tests for debugger errors and filter * fix: drop down options color issue - the icon used was not the standard one - We have a lot of duplicates of the same icon * fix: synced with ADS changes on release * fix: remove dependency from old icon * add: cypress selectors for automation testing * fix: replaced static messages with variables * fix: updated the dependency map for filter * fix: height of the filter drop down * fix: chaining logic for search filter * fix: syncing the padding values to ADS * fix: help icon visibility issue * fix: width of filter dropdown Co-authored-by: Rishabh-Rathod <rishabh.rathod@appsmith.com> * add: e2e tests for console statements using IIFE * test: added test for console logs in jsobjects * fix: functionality of expanding context menu on msg click * fix: added try catch and handling for numbers * hotfix: handling unwanted toasts * fix: alignment and clickable cursor * fix: alignment of expanded span in console logs * add: analytics event on new console log created * fix: added handling for boolean and undefined * fix: removed log reset from common func - Whenever we are creating global DTO, the logs were being reset. This caused logs to reset whenever a promise was encountered in the logs. * fix: combined JS log saving to widget process * add: new analytics event on filter changed * update: added handling for empty value * update: removed comma between multiple logs * update: synced test changes with release * update: removed unused wait timings * Logs spec script update * update: ts methods in log spec e2e test * logs spec update * update: removed body clicks from test script * Logs spec update * update: removed ask from google option * refactor: ui fixes * fix: text selection of logs * fix: updated dropdown width management * update: made the flushlogs function async * update: added handling for promises * update: added test with promises fail and pass * fix: added sync variant to work for sync objects * refactor: commented out unused tests * update: exceptions in the name of log entity * fix: pagination of logs to handle dynamic data stream * fix: removed unused async function * fix: moved logs handling to separate saga * fix: color for context menu text Co-authored-by: Rishabh-Rathod <rishabh.rathod@appsmith.com> Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
2022-09-04 11:58:05 +00:00
// sanitise the data key of the user logs
const sanitisedLogs = userLogs.map((log) => {
return {
...log,
data: this.sanitizeData(log.data),
};
});
return sanitisedLogs;
}
// parses the incoming log and converts it to the log object
public parseLogs(method: Methods, data: any[]): LogObject {
// Create an ID
const id = uuid4();
const timestamp = this.getTimestamp();
// Parse the methods
let output = data;
// For logs UI we only keep 3 levels of severity, info, warn, error
let severity = Severity.INFO;
if (method === "error") {
severity = Severity.ERROR;
output = data.map((error) => {
try {
return error.stack || error;
} catch (e) {
return error;
}
});
} else if (method === "warn") {
severity = Severity.WARNING;
}
return {
method,
id,
data: output,
timestamp,
severity,
};
}
public resetLogs() {
this.logs = [];
}
}
const userLogs = new UserLog();
export default userLogs;