Docs-website: [Gatsby Core] Anchor parameter is stripped out of redirected links

[aswanson-nr]

Related Gatsby Issue

https://github.com/gatsbyjs/gatsby/discussions/27582

Description

The redirects generated by the gatsby-plugin-meta-redirect plugin do not remove the trailing slash. This causes any #anchor parameters to be stripped out of the link and most likely applies to query parameters as well.

Steps to reproduce

1. Go to (https://docs.newrelic.com/docs/insights/new-relic-insights/using-new-relic-query-language/nrql-reference#functions)[https://docs.newrelic.com/docs/insights/new-relic-insights/using-new-relic-query-language/nrql-reference#functions]
2. Notice that the page redirects
3. Notice that the #functions was removed from the URL and the page did not scroll down to that section

Expected

When a user clicks on the link in the example above, they should land on the Functions section of the page.

Other information

• @jerelmiller submitted an issue to the plugin we use to generate these redirects to add an option to remove trailing slashes https://github.com/nsresulta/gatsby-plugin-meta-redirect/issues/11

[austin-schaefer]

Thanks @aswanson-nr . There are a lot of redirects on the site and a lot of anchor links, so a fix here will be very helpful!

[jpvajda]

from @zstix I believe those redirects come from https://www.gatsbyjs.com/docs/reference/config-files/actions/#createRedirect in Gatsby. Not sure if we have the option to pass along the extra URL params

[rudouglas]

Notes:
Not sure if this is an issue anymore, i've having trouble reproducing it.

https://docs.newrelic.com/docs/insights/new-relic-insights/using-new-relic-query-language/nrql-reference#functions
Redirects to
https://docs.newrelic.com/docs/query-your-data/nrql-new-relic-query-language/get-started/nrql-syntax-clauses-functions/

Example Anchors that redirect correctly:

• https://docs.newrelic.com/docs/query-your-data/nrql-new-relic-query-language/get-started/nrql-syntax-clauses-functions/#state-select
• https://docs.newrelic.com/docs/query-your-data/nrql-new-relic-query-language/get-started/introduction-nrql-new-relics-query-language/#start-learning
• https://docs.newrelic.com/docs/telemetry-data-platform/ingest-manage-data/get-started/get-know-telemetry-data-platform/#capabilities
• https://docs.newrelic.com/docs/full-stack-observability/observe-everything/get-started/get-started-full-stack-observability/#start-anywhere
• https://docs.newrelic.com/docs/alerts-applied-intelligence/new-relic-alerts/get-started/introduction-alerts/#security

Tested on Chrome/Firefox/Safari and all seem to be anchoring correctly

[jpvajda]

We netted out that this is still a problem in Sprint Planning today

[nr-kkenney]

@jpvajda it looks like we can't implement this easily since gatsby doesn't have support for this currently (see here).

is it cool if i close this ticket out?

[jpvajda]

I'm going to bump Gatsby about it, and try to get an ETA of when this may be available in Gatsby.

[pieh]

~Hey @jpvajda! We published today new release ([email protected]), I'm currently veryfying it and will open PR with bump if all things look good.~

Ops, sorry I was meant to respond to different issue - sorry for confussion

[rudouglas]

This may be a moot point now if the Gatsby update fixes this, but I figured out a workaround for this, i've got this working in develop build successfully, but for some reason it's not working in production, i'm confused about why these would work differently so it would be good to learn more about the redirection process.

Here's the branch with the changes I made: https://github.com/newrelic/docs-website/tree/ruairi/anchor-redirect

I used sessionStorage and a few of the Browser API's to achieve this.

https://user-images.githubusercontent.com/17122543/118829348-f392af00-b8b5-11eb-951c-ef5a31ba6031.mp4

Maybe it has something to do with the fact that it throws a 404 first in develop

Notes:
The Issue linked by Alec seems to be separate to this but does seem to be an issue: https://github.com/nsresulta/gatsby-plugin-meta-redirect/issues/11

[pieh]

I want to correct myself - I meant to write this to different (but still related to redirects) issue ( https://github.com/newrelic/docs-website/issues/1874 ). For forwarding query params and hash, we didn't implement that in Gatsby yet

[rudouglas]

no worries at all @pieh 😸

[nr-kkenney]

@rudouglas just to give you an update. had a quick chat with @roadlittledawn near the end of the day about this ticket just to get his thoughts, and he was thinking this might be difficult.

in particular, his question was how do we differentiate a hash in a url we know is a redirect versus a hash in a url from exploring a page, since not every hash needs to be carried forward to subsequent pages viewed.

so before you go too far, might double check that case.

[rudouglas]

@nr-kkenney ye I had considered that, I was storing the anchor, and then only applying it to the path if there wasn't already an anchor after the route change. So it was only catching instances where the anchor was being stripped. After more testing it doesn't look like this is going to be possible without an update on the Gatsby side to the createRedirect function.

I tested every Browser API available in Gatsby and none of them catch the anchor from the path before it redirects 😞
https://github.com/newrelic/docs-website/pull/2392
https://gatsbyjs-org-prefetched.netlify.app/docs/browser-apis

I think we should move this to blocked but lets chat and decide today

[jpvajda]

Our decision is to hold off on trying to solve this and wait for Gatsby to fix in place for it, I'll follow up with them on an ETA.

[jpvajda]

Adding to sprint 7 so I can follow up on this issue

[jpvajda]

waiting on confirmation from gatsby this fix has been released gatsbyjs/gatsby#27582