Some Webhook documentation anchors are incorrect

[magni-]

Core or SDK?

Core Sentry product

Which part? Which one?

Integrations/Webhooks

Description

Affected URL: https://docs.sentry.io/product/integrations/integration-platform/webhooks

Specifically, the Issues and Errors are pointing to #uninstallation and #issue-alerts, rather than the expected #issues and #errors. The Attributes anchors in each section are also wrong. They point to #attributes and #attributes-1 (meaning the Attributes under [Un]installation and Issue Alerts) rather than #attributes-3 and #attributes-4. This means that the Table of Contents is unusable for these two sections (since clicking on Issues will bring you to [Un]installation] instead, and likewise for Errors/Issue Alerts).

I tried fixing this myself, but I'm not seeing where the issue is coming from. The anchors are correctly set when viewing the docs on GitHub: https://github.com/getsentry/sentry-docs/blob/master/src/docs/product/integrations/integration-platform/webhooks.mdx

Suggested Solution

If I knew what was broken, I'd have submitted a PR 😅

[imatwawana]

The issue appeared to be fixed in preview on the PR, but in production, it's still not fixed. I'm also stumped. We'll keep investigating.

[imatwawana]

@untitaker I've linked issue 4778 to this one in case it's the same underlying problem (links not pointing where they should). If it turns out, fixing this issue doesn't also solve that one, we can just unlink them.

[untitaker]

So we recently restructured the above page, therefore the bug is no longer visible there but present on other pages. It is now less important to fix. I am dropping the investigation I did on this in favor of more pressing issues.

The observable behavior is that the header anchors generated by gatsby-remark-autolink-headers are messed up. Those broken header anchors are then picked up by our tableOfContents (which just scrapes page content for those anchors)

To summarize the investigation, we didn't find the root cause. It seems that:

• Development mode works fine
• The static page is rendered fine (i.e. the files on disk public/ look fine)
• Some javascript mangles anchors upon pageload
• If JS is disabled in teh browser, the bug disappears, but then the right sidebar is also gone.

@AbhiPrasad concluded that "rehydration" (??) messes up everything

next steps would be to:

bisect

one can automate this using a script for git-bisect such as this:

toggle

#!/bin/sh

yarn && yarn gatsby clean && yarn build || exit 125

set -e

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --disable-gpu --dump-dom http://localhost:8080/sdk/event-payloads/types/ | rg EventProcessingError

dive into the browser JS that messes up the page

We haven't tried to understand the browser JS bundle yet. It comes minified by default, and we didn't check whether the bug happens in other build modes where the JS bundle is not minified.

[imatwawana]

Possibly related issues (tracking this problem on this issue): #4915 #5321 #5607

[stephanie-anderson]

It seems that once a code fragment cannot be rendered correctly, it leads to this issue in consequence:

[stephanie-anderson]

This behaviour seems to be fixed due to the migration from Gatsby to Next.js