Clockwork 4.0 released with UI improvements, requests search and more

Following a roughly yearly major release schedule, Clockwork 4.0 is now available. The client-side powering the browser extensions and the web UI was fully rewritten in Vue.js. We used this opportunity to introduce some new UI concepts and long-requested features.

As always, Clockwork 4.0 supports the latest Laravel, Lumen, Slim and Symfony releases. To upgrade to the latest version simply change the version constraint in your composer.json:

"itsgoingd/clockwork": "^4.0",

Clockwork client-side rewrite

In Clockwork 4, the client-side was rewritten from the ground up in Vue.js. While there was nothing wrong with the original AngularJS version, the rewrite brings the app to the "modern" javascript world, incorporating more modern architecture concepts and improving developer experience.

You can find the code for all platforms at underground-works/clockwork-app. If you are interested in the reasoning and process behind the rewrite, I'm writing a more detailed personal blog post.

Requests list and search

Redesigned requests list is now cleaner, has color-coded response status codes and the method column was merged with the URI to save some horizontal space.

Requests history search, one of the longest requested and planned features is finally here. Click on the new search button on the tab bar to search all previous requests by request URI, controller, method, date, response status or time.

Request sidebar

Request sidebar is a new UI concept in Clockwork 4 replacing the request tab. Sidebar opens from the right-hand side and includes all the request details you could find on the request tab before, including headers, cookies, GET and POST data, session data which is no longer a separate tab, and for the first time request body data and executed middleware.

This makes performance the default tab, so you can see at a glance both the request details and the most important performance profilling data. Not a fan of the request sidebar? No worries, you can hide it and Clockwork will remember your preference.

The UI responsivity was improved, especially for the column view, if you like to dock your Dev Tools to the right. A new messages overlay is shown for update notifications and exceptions if the request sidebar is closed. All tables now have a simple pagination, which greatly improves performance for requests with a lot of data. We also don't show the Cookie header anymore, since we have a separate Cookies section.

Performance log

Perfromance tab is now the central place for reporting all performance problems for your apps. Set a slow database query threshold in your server-side Clockwork configuration and all queries taking too long will be marked as slow. You can also set Clockwork to collect only slow queries.

You can also try the new option to detect duplicate (N+1) queries. You will find the model and relation causing the duplicate queries with query count and stack trace in the performance log. This feature is inspired by the beyondcode/laravel-query-detector package by Marcel Pociot.

You can also log your own messages to the performance log by adding [ 'performance' => true ] to the message context.

clock()->warning('The api request took too long.', [ 'performance' => true ]);

Queue jobs and Redis queries

Clockwork 4 comes with two brand new tabs. The queue tab shows all queue jobs dispatched by your application, including their payload, options and stack traces. Collecting queue jobs requires Laravel 5.7+.

The redis tab shows executed Redis commands including their parameters, stack traces and duration. Redis commands caused by the Laravel cache are automatically excluded, as cache stats are already shown in the cache tab. This requires Laravel 5.7+.

Server-side improvements

The Clockwork server-side component includes reworked "features" configuration. You can now toggle various Clockwork features on or off, features turned off will have no performance impact on your application.

You can also further configure various features. Database queries can now be turned off independent from database stats. Slow query threshold can be configured with an ability to collect only slow queries. Cache queries can also be turned off independed from cache stats.

Stack traces, while being very useful, are also a major contributor to the collected metadata size. In Clockwork 4 we limit stack traces to last 10 frames by default, leaving out most of the early frames you rarely care about. The frames limit is configurable, as are ignored packages, classes, namespaces and files.

The default file metadata storage now has an index file, which is used to implement the new requests history search and speeds up metadata lookups overall. The file storage now also optionally supports gzip compression, which can save a lot of disk space with minimal performance impact.

Breaking changes and future plans

This major release brings very few breaking changes. Clockwork 4 supports the same PHP and framework versions as the previous release. One major change is the new config format. If your app uses a customized Clockwork configuration, redeploying the config file is strongly recommended.

For more extensive info about new features and breaking changes see the full changelog.

Clockwork loosely follows a yearly major release schedule with one or more minor releases in between. In the next few versions I would like to focus on using Clockwork for debugging tests, queue jobs and console commands. Check out the list of planned features and contribute your own ideas on GitHub.

I'm also working on a brand new Clockwork service with more details available soon, check out my twitter for updates.

I hope you will enjoy the new release, please feel free to contact me with any feedback via the GitHub issues or email at info@underground.works.