Not working for me - Githubissues

piranha commented 5 years ago

Hello! I'm trying to use this extension in a way that's not very supported right now - I'm trying to write a library for Clojure, which will provide backend for this extension.

I had basic implementation working a month or so ago, and I feel like I remember it working. But then during last month everything stopped working. My backend still returns three headers:

X-Clockwork-Version: 3.1.2
X-Clockwork-Path: /__clockwork/
X-Clockwork-Id: bfc701e4-b2e3-4d47-8133-983bb7f96856

but nothing is showing up in extension (and it's not making a request to server for a given id). I've looked at changes in 3.1.2 and it doesn't feel like it should affect anything, but clearly something has changed.

Do you have any ideas/pointers on what to do to make it work?

piranha commented 5 years ago

Also, https://underground.works/__clockwork/app is not working. :-)

itsgoingd commented 5 years ago

Hey, sounds interesting! There are a couple ways to debug the Clockwork app.

First of you can debug a loaded Chrome extension in dev tools itself. The extension is split in two parts:

The background page is responsible for watching for HTTP requests with Clockwork IDs and making ajax requests for the metadata. To debug the background page go to chrome://extensions and click on the "Inspect views: background page" link on the Clockwork extension.

What you can see in the dev tools Clockwork tab itself is an Angular app responsible for parsing and presenting the metadata. To debug this part go to chrome://inspect while having dev tools with Clockwork open and you will see the dev tools instance in the "Other" tab. You can insert a couple of breakpoints to either part to see what's happening. The most interesting scripts would be:

extension.js - all the Chrome specific code in the app, including communication with the background page to make metadata requests etc.
requests.js - higher-level class managing all loaded requests and responsible for loading the requests based on IDs
request.js - class representing a single request, also responsible for parsing the request metadata, this is where you might hit some issues if your custom backend generates incompatible data

Second simpler way to debug the app is simply running it as a standalone web app, this is what web UI in the Clockwork php library is. You can simply clone the repo and open the app in browser, it will automatically run in standalone mode if it doesn't find the chrome extension js api. You will need to hardcode your backend url in standalone.js though, where you will find all the standalone specific code, including the simple ajax metadata polling implementation.

Let me know if you need any further help!

piranha commented 5 years ago

Standalone app seems to work! Don't understand what it expects by doing /__clockwork/next call though?..

I mean I understand it's polling, I don't get what I have to return so that it's not added as an empty request to a panel...

piranha commented 5 years ago

Also, unfortunately I can't really read PHP, so I'm not sure, but how do you do "next" in your backend? Say I'd like to store those in some K-V store (memcached for example), rather than in some SQL, but then ordering is a little bit weird there...

piranha commented 5 years ago

Ah! Made it return 404 and the madness stopped. :-) Okay, I can't understand what to do with next right now, but I'll get to understanding why extension is not working...

piranha commented 5 years ago

Do you think this is relevant? https://monosnap.com/file/NnFSclx5gRwfxUAGsTHI5r5u5vGcJS

I get this error when I "Inspect" something at Clockwork tab and look at console.

piranha commented 5 years ago

This seems to be the error that breaks everything!

Unchecked runtime.lastError while running cookies.get: No host permissions for cookies at url: "https://dev.mk:9090/api/v2/product-list/?q=%D1%81%D0%B0%D1%85%D0%B0%D1%80".
    at Promise (chrome-extension://dmggabnehkmmfmdffgajcflpdjlnoemp/assets/javascripts/extension.js:69:22)
    at resolveTabUrl.then.url (chrome-extension://dmggabnehkmmfmdffgajcflpdjlnoemp/assets/javascripts/extension.js:68:11)

piranha commented 5 years ago

I don't really understand... Internet says it's usually because pattern in manifest's permissions is wrong/malformed, but it looks fine... :\

piranha commented 5 years ago

Okay, that's really weird. I loaded unpacked extension, commented out cookie stuff and after few reloads it started to work.

piranha commented 5 years ago

Also a question: how do you sort things at Timeline? I seem to have two things which start at the same time, but one is "nested" in the other - but they appear sorted in a wrong order. I guess JS object doesn't give us sorting... Maybe using an array there is a good idea?

piranha commented 5 years ago

Also... what is 'Events'? :-) I've looked at processEvent and it's pretty complex, it's not a simple "something happened", right?

itsgoingd commented 5 years ago

The permissions error is definitively relevant. I'm not sure why are you getting that, since we whitelist all URLs (http://*/ and https://*/ in manifest). Thought it might be the non-standard port in your case, but I wasn't able to reproduce the error. You can try explicitly whitelisting your domain or adding <all_urls> (which is just another way to do what we already use). Worst case scenario you can remove the cookie processing code from the app, it's only used for the profiler feature which is very php-specific.

The /__clockwork/{id}/next HTTP api should return all requests happening after the specified ID. With the browser extension you only need to implement the {id} and latest endpoints. The extended HTTP api is mainly used in the standalone mode where we don't know the IDs, since we are not hooked into the browser. You can find some documentation for the HTTP api on the Clockwork website.

The timeline data should be shown in the same order as it appears in the JSON, there is no explicit sorting by the start time afaik. I think you might be even able to use an array since we are not using the keys from that object anyway atm. Might improve the format and add an explicit way to specify parent/child entries in the future.

Events - think event-based programming, eg. javascript events. On backend you might have something like UserRegistered event class with some payload like the user email and some listeners that respond to that event. This is quite a popular thing to do with current PHP frameworks. The data structure for an event looks like this:

[
    "event": "event name",
    "data": "event payload", // if the payload has a __class__ key with value matching the event name it will be presented as an object event
    "time": "time when the event was emitted",
    "listeners": "array of event listeners",
    "file": "file path where the event was emitted",
    "line": "line no where the event was emitted",
    "trace": "stack trace"
]

Btw. here is a sample metadata demonstrating pretty much all Clockwork features you might find helpful - https://gist.github.com/itsgoingd/89efad5ee42c0c594d89cd6b9942a3e3

piranha commented 5 years ago

I think you might be even able to use an array since we are not using the keys from that object anyway atm.

You are right! I've changed JS to support it being an array, but it turns out the way it is right now (checking it's an Object and using 'Object.values`) works with an array! Cool! :-)

About events - oh right, that makes sense. We don't have that though... I'm wondering if I can put there various things that happen but are not long (so on a timeline it would be too much data) and not requests to an external facility (so don't belong to DB page). I'll think about it a bit. :-)

Also as I'm working though it (quite a bit already works) I've got a question - what do you think about somehow joining db queries with a timeline? I would love to know which part of timeline produces given DB query - this is something miniprofiler does, though with a different approach to display.

Thanks for the link, I'm studying it. :-)

piranha commented 5 years ago

Okay, it's weird, but loading unpacked extension works and using one from chrome extensions gallery does not. :-(

piranha commented 5 years ago

JFYI if you're interested, code is here: https://github.com/kasta-ua/clj-clockwork

piranha commented 5 years ago

Okay, so we're using it internally and it works for everyone except for me in Chrome. :-)) But it works for me in Firefox, which is good enough. ;)

Thanks a lot for an extension!

itsgoingd commented 5 years ago

Nice, love to see Clockwork used in unexpected ways, I'll add your project to the Clockwork website.

You might try Chrome Canary (might just be a Chrome bug?) or using a new profile in Chrome (maybe you have some custom strict cookies settings?). Hate leaving this one open, but I'm out of ideas atm.

For logging random things I'd use the log tab, you can even send a random array or object in the JSON and it will be pretty-printed similar to how console.log works. On timeline you can filter the events by duration, eg. to show only events taking more than 5ms use duration:>5 as a filter, filtering by event names also works.

I've been already thinking about linking the timeline events with other data like db queries, or rendering views or sending emails. For now you have to explicitly log your queries to timeline, but we can definitively improve this in future.

itsgoingd / clockwork-chrome

Not working for me #74