fix: debug mode now shows `sessionId`

[cuserox]

Why does this PR exist?

Closes #2772

At the bottom of the plugin Settings, a user can toggle the permission to record the session for debugging purposes. This was not showing the sessionId when turned ON!

What does this pull request do?

• Shows a console warning when the user toggles ON session recording won't work (i.e. in the development environment) - will work on production, alpha & beta.
• Polishes the UI when the session recording is ON

Doubts & further considerations

• 🤔 📈 Not sure if the Session Replay(s) take time to process - as I could not find them on the dashboard
• Upgrading our @sentry/react package. Although for replay to work we are covering the minimum requirements of the SDK to be >7.27.0 (we are on "@sentry/react": "^7.53.1")
• Enriching our replay config: https://docs.sentry.io/platforms/javascript/session-replay/configuration/
• Migrating to the latest Sentry SDK: https://docs.sentry.io/platforms/javascript/migration/v7-to-v8/

Testing this change

• Run yarn build
• Set up the plugin to import through the manifest.json - this should have set the environment to production
• Open the plugin, go to Settings
• Scroll to the bottom & enable the "Grand permission to record..." ---> see a sessionId appear

Before	After

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 743e861e75a37bb3ad229447e11e7a47d2c5d93f

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.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

[cuserox]

Unsure of the sampling rates that we set when initialising Sentry as these are controlled by environment variables that get included in the pipeline (docs):

• tracesSampleRate: process.env.SAMPLING
• profilesSampleRate: process.env.PROFILE_RATE
• replaysSessionSampleRate: process.env.REPLAY_RATE

The Sentry -> Replays dashboard has entries. Tried to manually test locally, by setting all values to 1.0, but to no avail.

I have hope that this still works, but we should look to migrate and improve error handling as part of the DX epic.

[six7]

Thank you!! 🎉