feat(replay): Add Troubleshooting item for "clicks in wrong places" (#…

…12782)

Adds a troubleshooting entry for when clicks are in the wrong location (e.g. it looks like it is clicking nothing, but it should be clicking a checkbox or button).

ref: getsentry/sentry-javascript#15449

https://sentry.slack.com/archives/C03USURCFBJ/p1739781759800659

---------

Co-authored-by: Alex Krawiec <[email protected]>

docs/platforms/javascript/common/session-replay/troubleshooting.mdx

@@ -174,3 +174,10 @@ There are certain cases (such as clicking a button to play an audio clip) where
 If you want to turn off [rage click issues](/product/issues/issue-details/replay-issues/) altogether, you can disable them by going to the **Settings** page in Sentry, clicking "Projects", and selecting the project for which you want to disable rage clicks. From here, select "Replays" under the "PROCESSING" heading and toggle off "Create Rage Click Issues".
 
 </Expandable>
+
+<Expandable title="Clicks appear in the wrong location" permalink>
+
+Clicks in replays can appear in the incorrect location due to rendering differences between your application and the replayer. A common case of this is with text rendering: if custom fonts are not loaded properly in the replayer, it can cause the height of elements to differ between production and the replay. This means that the scroll position will be incorrect and will result in mouse clicks appearing in the wrong location. If you are hosting your own fonts, please configure the `Access-Control-Allow-Origin` headers to allow the `sentry.io` host to load your fonts, otherwise the replayer will be unable to load them due to CORS.
+
+Text masking of variable-width fonts can also cause this because the size of the masking text ("*") will not necessarily have the same dimensions as the original character it replaced. There is currently no workaround; please [follow this GitHub Issue](https://github.com/getsentry/sentry-javascript/issues/15449) for updates.
+</Expandable>