Restyle integrated error details info
What does this MR do and why?
- Implemented updated design for error details info, as discussed in gitlab-org/opstrace/opstrace-ui#252 (comment 1349850043)
- Refactor error details component and extracted ErrorDetailsInfo in its own component
Screenshots or screen recordings
Before:
How to set up and validate locally
As running the full integrated error tracking stack is not trivial, I'd suggest to just run GDK locally and mock responses with a Chrome Extension. I personally use Requestly. You can import the mock rules here:
- https://app.requestly.io/rules#sharedList/1683050606377-mock-list
- https://app.requestly.io/rules#sharedList/1683050658243-mock-graphql-details
- https://app.requestly.io/rules#sharedList/1683050664777-mock-stack-trace
# GET https://local.gitlab.com:3443/flightjs/Flight/-/error_tracking
# Mock Response:
{"errors":[{"id":"2650783669","title":"Error","type":null,"user_count":1,"count":2,"first_seen":"2023-04-20T17:00:48.261Z","last_seen":"2023-04-20T17:00:50.941Z","message":"Hello from ReactSDK","culprit":"./src/index.js()","external_url":null,"project_id":null,"project_name":null,"project_slug":null,"short_id":null,"status":"unresolved","frequency":null}],"pagination":{},"external_url":null}
# GET https://local.gitlab.com:3443/api/graphql
[{"data":{"project":{"id":"gid://gitlab/Project/7","sentryErrors":{"detailedError":{"id":"gid://gitlab/Gitlab::ErrorTracking::DetailedError/2222184488","sentryId":"2222184488","title":"Exception","userCount":1,"count":1239,"status":"RESOLVED","firstSeen":"2022-04-20T17:02:06+00:00","lastSeen":"2023-04-20T17:02:06+00:00","message":"An exception","culprit":"nested_12(__main__)","tags":{"level":null,"logger":null,"__typename":"SentryErrorTags"},"externalUrl":"https://gdk.devvm:3443/flightjs/Flight/-/error_tracking/2222184488/details","externalBaseUrl":"https://gdk.devvm:3443/flightjs/Flight","firstReleaseVersion":"4cedcd08f700824d8eb2375d2fdc60066d5d9922","lastReleaseVersion":"4cedcd08f700824d8eb2375d2fdc60066d5d9922","gitlabCommit":"4cedcd08f700824d8eb2375d2fdc60066d5d9922","gitlabCommitPath":"4cedcd08f700824d8eb2375d2fdc60066d5d9922","gitlabIssuePath":"4cedcd08f700824d8eb2375d2fdc60066d5d9922","integrated":false,"__typename":"SentryDetailedError"},"__typename":"SentryErrorCollection"},"__typename":"Project"}}}]
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Daniele Rossetti