Skip to content

Add 24hrs timeline chart to error tracking UI

Daniele Rossetti requested to merge rossetd/add-error-timeline-chart into master

What does this MR do and why?

First iteration of

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 on gl-chart. I did not use gl-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

  • Errors List image image

  • Error Details image image

How to set up and validate locally

  1. Enable Error Tracking on your project:
  • Go to a project Settings > Monitor, e.g. flightjs/Flight/-/settings/operations
  • Enable Error Tracking

image

  • Go to Monitor > Error Tracking e.g. flightjs/Flight/-/error_tracking

You should see an error saying "Failed to load errors from Sentry."

  1. 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

Merge request reports