I am building a JS compiler, So it is nothing but it will execute the JS code, So I am having two components in react, One will get input from user (The JS code they want to execute), The another one is showing the Output, typically the consoles in the code.

The first part is done, I can able to get the code from user. Now I don’t want to send this code to my server, rather I want to run this in the client browser itself. In online I can see we can use eval() function. But my requirement is to capture the console logs, errors and display in a output component.

I am struct at two things, 1. The execution should support asynchronous code, and if any object is consoling, I am expecting the complete object in an object format not as a string. I am looking for a solution.

Requirement 1: (A simple asynchronous func)

console.log('Start');
setTimeout(() => console.log('This is async'), 2000);
console.log('End');

So for this, Start & End should print in output window immediately, and after 2 sec This is async should print.

Requirement 2 :

let myObj ={"Key":"val"}
console.log("op",myObj)

So in this I am expecting this myObj as an Obj itself, So that I can view accordingly in my output component ( User can minimize or open an obj).