Add 24hrs timeline chart to error tracking UI
What does this MR do and why?
First iteration of
- Create timeline graph of error frequency for Er... (gitlab-org/opstrace/opstrace#2193 - closed)
- Create timeline graph of specific error frequen... (gitlab-org/opstrace/opstrace#2194 - closed)
We are adding a timeline chart showing the distribution of a given error over the last 24 hours.
For frontend :
- Adding
frequency
attr to graphql query, as it was not surfaced in the details view - Created new
TimelineChart
component, based ongl-chart
. I did not usegl-column-chart
as I needed more customisation that the one provided by the component - Adding timeline chart to both error list and details view
backend changes are here: !123414 (merged)
Screenshots or screen recordings
How to set up and validate locally
- Enable Error Tracking on your project:
- Go to a project Settings > Monitor, e.g.
flightjs/Flight/-/settings/operations
- Enable Error Tracking
- Go to Monitor > Error Tracking e.g.
flightjs/Flight/-/error_tracking
You should see an error saying "Failed to load errors from Sentry."
- Mock data
As running the full integrated error tracking stack is not trivial, I'd suggest to just mock responses with a Chrome Extension. I personally use Requestly (https://chrome.google.com/webstore/detail/requestly-open-source-htt/mdnleldcmiljblolnjhpnblkcekpdkpa)
You can import the mock rules here: https://app.requestly.io/rules#sharedList/1686736850327-error-tracking-mocks (there should be an "Import to my rules" button)
You can also check the linked mocked response and use the mocking library of your choice.
Edited by Daniele Rossetti