Capture the contents of the browser console at time of error

UI Builder
1

Hey Team,

Is there a way that I could capture the contents of the user’s browser console at the time they experience an error? Now that we’ve rolled out to multiple users there are corner cases that are hard to catch in testing. I am already sending myself the data container contents at the time of error but it would be really handy to know what actual error was reported in the console as well, maybe with network payload information too.

Is this possible?

Thanks!
James

2

Hi @James_Hereford ,
At the moment this functionality is not implemented,
I will discuss it with the team and come back with our solution

Regards,
Sergey

3

There are some external tools that might be useful, like TrackJS.

4

Thanks for the recommendation Uldis! I’ll check it out.

5

Thanks Sergey. In the meantime, any tips for how to deploy code like what is discussed here in my app? Perhaps rather than getting the entire console I can log user events / errors into a file on the server along with a timestamp or other identifier to help me debug what issue they saw.

6

Hi again,
My team and I discussed this situation; the logs themselves, which can be obtained from the application console, will be uninformative because it is important to understand under what conditions and in what flow the error occurred. And this is a separate part of testing. Regarding your link to stackoverflow, I can suggest the following, on the main page of the application in the “On Page Enter” handler, add a block of custom code, and then enter the following code into it, this will add listeners for errors, replace “console.log(‘error’, {errorInfo})" to the method for sending an error to the server.

window.addEventListener('error', function (event) {
    const errorInfo = {
        message: event.message,
        source: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        error: event.error ? event.error.toString() : null,
    };
    
    console.log('error', {errorInfo})
})


window.addEventListener('unhandledrejection', function (event) {
    const errorInfo = {
        message: event.reason ? event.reason.message : 'Unhandled rejection',
        error: event.reason ? event.reason.toString() : null,
    };
    
    console.log('error', {errorInfo})
})

Regards,
Sergey

7

Thanks Sergey, this is great!

One more question. I understood everything you mentioned except for this statement:

“… replace “console.log(‘error’, {errorInfo})” to the method for sending an error to the server."

Can you elaborate on this piece? My main question would be how to specify where I’d like these logs to be saved, which I think is what you were referring to with your comment.

8

Hello, @James_Hereford

To store data in the file system, you can use the following logic, replacing parameters according to your needs.

Backendless.Files.saveFile('/errors-directory/', new Date() + '.json', JSON.stringify(errorInfo), true);

You can find more information here: Save Files From Byte Arrays

Regards,
Serhiy

9

Thanks Serhiy!