element-hq / element-hq/element-web
Do not fail to locate messages when a fragment directive has been appended.
- Dominant language
- TypeScript
- Stars
- 13.5k
- Forks
- 2.8k
- PR merge metrics
- PR metrics pending
Description
### My Use Case
- #### What I Want To Achieve
Do not fail to locate messages included in the URI fragment, merely when a fragment directive has been appended, thereby allowing the browser to `` the content of text directives contained therein.
- #### Why I Want To Achieve This
Although being able to hyperlink messages is useful, like [`develop.element.io/#/room/#foundation-office:matrix.org/$w_Qy0VgvRXswQWFPxHEOkPMV0xodm8VR6eQGf99SeTs`](https://develop.element.io/#/room/#foundation-office:matrix.org/$w_Qy0VgvRXswQWFPxHEOkPMV0xodm8VR6eQGf99SeTs), being able to link to specific sections thereof can be more important, when a long message is sent. However, if I [append `:~:text=hopefully%20the%20new%20rooms%20are%20more%20performant%20for%20you%2C%20and%20don't%20reset%20as%20often`, to create `develop.element.io/#/room/#foundation-office:matrix.org/$w_Qy0VgvRXswQWFPxHEOkPMV0xodm8VR6eQGf99SeTs:~:text=hopefully%20the%20new%20rooms%20are%20more%20performant%20for%20you%2C%20and%20don't%20reset%20as%20often`](https://develop.element.io/#/room/#foundation-office:matrix.org/$w_Qy0VgvRXswQWFPxHEOkPMV0xodm8VR6eQGf99SeTs:~:text=hopefully%20the%20new%20rooms%20are%20more%20performant%20for%20you%2C%20and%20don't%20reset%20as%20often), I see:
> Tried to load a specific point in this room's timeline, but was unable to find it.
The ECMAScript console outputs:
~~~MA
15:42:54.696 XHRGET
https://matrix-client.matrix.org/_matrix/client/v3/rooms/!XnktFVraJdZXcy_wxBQYoDUGWFqgffmDYrK7m6sW90w/event/$w_Qy0VgvRXswQWFPxHEOkPMV0xodm8VR6eQGf99SeTs:~:text=And finally, thanks for your patience while we bombard you with at-room notifications - hopefully the new rooms are more performant for you, and don't reset as often. If you have any questions, let us know here.
[HTTP/2 404 1094ms]15:42:56.139 XHRGET
https://matrix-client.matrix.org/_matrix/client/v3/rooms/!XnktFVraJdZXcy_wxBQYoDUGWFqgffmDYrK7m6sW90w/context/$w_Qy0VgvRXswQWFPxHEOkPMV0xodm8VR6eQGf99SeTs:~:text=And finally, thanks for your patience while we bombard you with at-room notifications - hopefully the new rooms are more performant for you, and don't reset as often. If you have any questions, let us know here.?limit=0&filter={"lazy_load_members":true}
[HTTP/2 404 121ms]15:42:56.380 Error loading timeline panel at !XnktFVraJdZXcy_wxBQYoDUGWFqgffmDYrK7m6sW90w/$w_Qy0VgvRXswQWFPxHEOkPMV0xodm8VR6eQGf99SeTs:~:text=And finally, thanks for your patience while we bombard you with at-room notifications - hopefully the new rooms are more performant for you, and don't reset as often. If you have any questions, let us know here. M_NOT_FOUND: MatrixError: [404] Event not found. (https://matrix-client.matrix.org/_matrix/client/v3/rooms/!XnktFVraJdZXcy_wxBQYoDUGWFqgffmDYrK7m6sW90w/context/%24w_Qy0VgvRXswQWFPxHEOkPMV0xodm8VR6eQGf99SeTs%3A~%3Atext%3DAnd%20finally%2C%20thanks%20for%20your%20patience%20while%20we%20bombard%20you%20with%20at-room%20notifications%20-%20hopefully%20the%20new%20rooms%20are%20more%20performant%20for%20you%2C%20and%20don't%20reset%20as%20often.%20If%20you%20have%20any%20questions%2C%20let%20us%20know%20here.?limit=0&filter=%7B%22lazy_load_members%22%3Atrue%7D)
HTTPError errors.ts:41
MatrixError errors.ts:109
parseErrorResponse utils.ts:95
requestOtherUrl fetch.ts:321
request fetch.ts:219
doAuthedRequest fetch.ts:167
authedRequest fetch.ts:131
getEventContext client.ts:4473
getEventTimeline client.ts:4523
load timeline-window.ts:139
loadTimeline TimelinePanel.tsx:1535
initTimeline TimelinePanel.tsx:1374
componentDidUpdate TimelinePanel.tsx:341
React 23
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
rageshake.ts:69:27
fnName rageshake.ts:69
instrumentConsole console.ts:39
logger.ts:114
onError TimelinePanel.tsx:1480
(Async: promise callback)
loadTimeline TimelinePanel.tsx:1544
initTimeline TimelinePanel.tsx:1374
componentDidUpdate TimelinePanel.tsx:341
React 60
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
recursivelyTraverseLayoutEffects
commitLayoutEffectOnFiber
flushLayoutEffects
commitRoot
commitRootWhenReady
performWorkOnRoot
performWorkOnRootViaSchedulerTask
performWorkUntilDeadline scheduler.production.js:151
~~~
- #### How I Want To Achieve This
Navigate to text directives manually appended to the URI fragment.
### Considered Alternatives
Discard fragment directives, and render a banner that informs the user of this, if the fragment directive contained a text directive. [^1] The banner should contain the included text, albeit sanitised.
[^1]: [`stackoverflow.com/revisions/79839038/1`](https://stackoverflow.com/revisions/79839038/1#content:~:text=At%20web.dev/articles/text%2Dfragments%23the_fragment_directive%2C%20Google%20states%20that,therefore%20called%20a%20text%20directive.)
### Additional Context
I originally reported, at [`issues/31023#issuecomment-3616595234`](https://github.com/element-hq/element-web/issues/31023#issuecomment-3616595234), that “Appending a fragment directive to the URI causes the viewport to move upward 50 %.” However:
> We don't support this as a feature so I don't think that this is a bug. Feel free to open a separate feature request though.
Considering that, in those situations, the text directive *is* supported, I'm surprised.
That decision is why I haven't first reported not being able to navigate to linked-to messages as a bug. In its stead, I have included it as an aim of this enhancement request, but shall separate it if advised to.
Contributor guide
Assessment
This issue has not been assessed yet.