Add position indicator in session logs

[syedbarimanjan]

Summary

closes #4872
/claim #4872
I noticed that the arrow icon in the network logs doesn't function, whereas it works as a 'go-to' button in error logs. Is this intentional or does it need fixing?
I also noticed that when switching tabs, if I'm at a certain timestamp in one tab and then switch to another tab, the new tab doesn't automatically scroll to the current active log.(By tab i mean console, error and network tabs)
Screencast from 17-04-2024 10:58:45.webm

How did you test this change?

Screencast.from.17-04-2024.10.27.46.webm

Are there any deployment considerations?

None

Does this work require review from our design team?

No

[changeset-bot]

⚠️ No Changeset found

Latest commit: ad589f3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "rrdom" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrdom-nodejs" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-player" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-snapshot" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/types" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/web-extension" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrvideo" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

[algora-pbc]

💵 To receive payouts, sign up on Algora, link your Github account and connect with Stripe/Alipay.

[syedbarimanjan]

@et @Vadman97 could you review.

[Vadman97]

preview looks great! thank you for your contribution

I noticed that the arrow icon in the network logs doesn't function, whereas it works as a 'go-to' button in error logs. Is this intentional or does it need fixing?

not intentional - would you mind helping fix this?

I also noticed that when switching tabs, if I'm at a certain timestamp in one tab and then switch to another tab, the new tab doesn't automatically scroll to the current active log.(By tab i mean console, error and network tabs)

yup, i see that as well. would be great to fix that - looks like some useEffect needs to fix on tab change to trigger a scroll on tab change?

[syedbarimanjan]

preview looks great! thank you for your contribution

I noticed that the arrow icon in the network logs doesn't function, whereas it works as a 'go-to' button in error logs. Is this intentional or does it need fixing?

not intentional - would you mind helping fix this?

I also noticed that when switching tabs, if I'm at a certain timestamp in one tab and then switch to another tab, the new tab doesn't automatically scroll to the current active log.(By tab i mean console, error and network tabs)

yup, i see that as well. would be great to fix that - looks like some useEffect needs to fix on tab change to trigger a scroll on tab change?

Should i create a seperate pr for these or implement them here? @Vadman97

[syedbarimanjan]

I will make the changes today.

[syedbarimanjan]

@Vadman97 as this is approved can you merge it I will create a new pr for the changes.

[Vadman97]

@syedbarimanjan can you run yarn format:all to fix the lint errors?

[syedbarimanjan]

@syedbarimanjan can you run yarn format:all to fix the lint errors?

Did it @Vadman97

[syedbarimanjan]

@Vadman97

[syedbarimanjan]

@Vadman97 I would like to further contribute to the project but most of the issues are created by a bot and are a link to linear which is making it hard to pick an issue.