Can I display app's logs on HTML page?

html

#1

Hello, I want to display my app’s log on my index.html. That’s possible ?

Thanks.


#2

Tbh I want this as well lol, I’ll try find a way hm

Edit
This seems to be of interest. Now we have to find out what’s triggering this?
https://glitch.com/edit/source/presenters/log.js
https://glitch.com/edit/source/models/log-element.js
It goes to a 404 page here hm. Try go to Network tab in Chrome DevTools in the Glitch editor window?

Warning: I don’t think this is officially supported by glitch, and it may change at any time (Examples may stop working etc.).

So I’ve found the log is over a websock Owo
wss://api.glitch.com/PROJECTNAME/logs?authorization=SomeToken hm

So apparently uh:

const websocketURL = API_URL.replace(/^http/, "ws");

And

const url = `${websocketURL}/${project.domain()}/logs?authorization=${token}`;

I have no clue what the token is, it’s not a user access token?
And in the env.js file:

 API_URL: "https://api.glitch.com" || /* istanbul ignore next */ "https://api.glitch.development",

Edit: My head is done in >.< I’m done for now

I think I can get some stuffs with ws module?


#3

Hah, it kinda works but needs tweaking. I’ll post instructions later


Need to filter for process: application only
.
I made my app log something when a request to the server is made: Example of it “in action”

I’m in my phone right now. The above example was made using websocket in script tags. That means that the ws url was also there, including the token. We will have to use some module to get the results backend and send to webpage otherwise that token is exposed to viewers, and it seems to be something related to your Glitch account

My ideas

Idea 1

I’ll add more info, I’m leaving this link here, i’ll use this later and update this message
My idea: Open a websocket, and render the messages into some /api/test enpoint
https://www.npmjs.com/package/ws#echowebsocketorg-demo
When index.html loads, it gets /api/test’s content and shows it on index.html, and will keep getting the content?

Idea 2:
Open a new websocket and send data whenever it receives data
PS this is my first time working with websockets


#4

Edit: I can’t send more than 3 consecutive replies :frowning: have to keep editing

It’s working! Check the example @ https://glitch.com/edit/#!/glass-train and https://glass-train.glitch.me

Remember: You need to replace glass-train with your own project URL, and you need to get your own “token” to put into the .env file
Warning: Things generally named “Token” are meant to be kept secret. Do not share your token with anyone
Your “token” as I’m referring to it as, is NOT the same as:

If it isn’t the same then how do I get my “token”?
Note I’m using chrome, if you’re using something different it may be different

Step 1: Go to any of your projects and open DevTools (Press F12)
It should look something similar to this.

Step 2: Go to the network tab
image

Step 3: Make sure it says “Recording network activity” or similar, and refresh the page with the DevTools OPEN

Step 4: Wait for the page to fully load. Then search for “logs” (Press Ctrl + F with DevTools focussed)


Your token is after “?authorization” I have blurred mine out, do not share your token with anyone

Please please, tell me if anything is wrong.


#5

Thanks you so much !


#6

That’s great work, @Excigma, thanks for the effort and the working code!

I took a slightly different tack and have a project that listens to another project’s logs so it also catches logs that happen around restarts (to a degree at least).

You’re also correct that your git token will not work; you need the “persistent” token. Watching the network tab is one way to get that, but you can also open the browser console for an editor window and type application.persistentToken() to get your own Glitch token.


#7

Yeah, I watched my discord bot’s logs when I tested it lol. But OP said they wanted to put the website’s logs into the website so /shrug