Skip to content

feat(ourlogs): Add logs to replays #92498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

k-fish
Copy link
Member

@k-fish k-fish commented May 29, 2025

Summary

Adds logs to the replays tab, querying via traceid first then fetching all logs.

Closes LOGS-86

Adds logs to the replays tab, querying via traceid first then fetching
all logs.

Closes LOGS-86
@k-fish k-fish requested review from a team as code owners May 29, 2025 19:21
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label May 29, 2025
Copy link
Member

@billyvg billyvg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

missing borders

--

Also there's two diff loading states:

  • "Loading logs..." text inside of a panel (i.e. with borders)
  • loading spinner, no panel
  • switching into the Logs tab always shows "Loading logs"
  • pagination is always loading indicator

@k-fish
Copy link
Member Author

k-fish commented Jun 2, 2025

@billyvg got rid of the missing borders by just excluding that side since I've split infinite scrolling up, so we only show one table now. Imported the loading and error states to show to maintain consistency.

You can check now with ourlogs-infinite-scroll override.

Screenshots

Screenshot 2025-06-02 at 11 38 21 AM Screenshot 2025-06-02 at 12 03 56 PM

Copy link

codecov bot commented Jun 2, 2025

Codecov Report

Attention: Patch coverage is 0% with 1 line in your changes missing coverage. Please review.

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...atic/app/views/replays/detail/layout/focusTabs.tsx 0.00% 1 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           master   #92498       +/-   ##
===========================================
+ Coverage   72.82%   82.95%   +10.12%     
===========================================
  Files       10246    10231       -15     
  Lines      587612   585502     -2110     
  Branches    22823    22703      -120     
===========================================
+ Hits       427926   485680    +57754     
+ Misses     158282    99400    -58882     
+ Partials     1404      422      -982     

@@ -32,9 +36,12 @@ type Props = {
function FocusTabs({isVideoReplay}: Props) {
const organization = useOrganization();
const {getActiveTab, setActiveTab} = useActiveReplayTab({isVideoReplay});
const hasLogsFeature =
organization.features.includes('ourlogs-enabled') &&
organization.features.includes('ourlogs-infinite-scroll');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see a ff for this, could you add the replay team so we can poke around?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been using our overrides more recently rather than options automator, do you not see it?
Screenshot 2025-06-02 at 2 19 01 PM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah ok, had to manually add it myself

@billyvg billyvg requested a review from a team June 2, 2025 17:02
Copy link
Member

@billyvg billyvg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's some design "quirks" in here, but I think this is fine to slam in if we're still iterating and this isn't available for users yet.

@@ -32,9 +36,12 @@ type Props = {
function FocusTabs({isVideoReplay}: Props) {
const organization = useOrganization();
const {getActiveTab, setActiveTab} = useActiveReplayTab({isVideoReplay});
const hasLogsFeature =
organization.features.includes('ourlogs-enabled') &&
organization.features.includes('ourlogs-infinite-scroll');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah ok, had to manually add it myself

@k-fish
Copy link
Member Author

k-fish commented Jun 3, 2025

@billyvg can you list them so I can track them? I'll fix them before we turn on infinite scroll

@billyvg
Copy link
Member

billyvg commented Jun 3, 2025

@k-fish

  • Needs some margin here
    image
  • Headers are a bit too big:
    image
    they should match our other tables:
    image
  • Ideally scrolling should be inside of the panel body (see Network table)
  • The panel should fill the tab area (height-wise): image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants