feat: enable Sentry in renderer process

[cristianoventura]

Description

This PR enables the Sentry integration in the renderer process, accounting for the user's preference to opt out of it. This PR is dependant on #393.

How to Test

• Enable Sentry to run the development environment (both in main.ts and renderer.ts)
• Manually throw an error in the React code
• Run the app with the SENTRY_DSN env variable set (grab it from the project in Sentry) SENTRY_DSN=xx npm start
• Reproduce the error in runtime and check Sentry

Checklist

• I have performed a self-review of my code.
• I have added tests for my changes.
• I have run linter locally (npm run lint) and all checks pass.
• I have run tests locally (npm test) and all tests pass.
• I have commented on my code, particularly in hard-to-understand areas.

Screenshots (if appropriate):

Related PR(s)/Issue(s)

Resolves #396

[cristianoventura]

Enabled some basic integrations such as browser tracing and session replay, which may help us debug issues when they arise.

[going-confetti]

Should we consider filtering events to scrub sensitive data?

[e-fisher]

Unhandled promise rejections are not reported to sentry, to reproduce it: add a throw to an async method, I've used validateAndSaveHarFile in views/Recorder/Recorder.tsx.

I've skimmed through docs and looks like sentry/react integration should handle this automatically if we add it additionally to sentry/electron, here's an example how to setup additional SDK: https://docs.sentry.io/platforms/javascript/guides/electron/#framework-specific-sdks

[cristianoventura]

@e-fisher Unfortunately @sentry/react didn't work and after spending some time trying to figure out why I learned the following.

The unhandled rejection gets raised inside the callback of the onBrowserClosed subscription, which is where validateAndSaveHarFile is being called.

k6-studio/src/views/Recorder/Recorder.tsx

Lines 153 to 155 in 898bde8

	useEffect(() => {
	return window.studio.browser.onBrowserClosed(async () => {
	const fileName = await validateAndSaveHarFile()

However, onBrowserClosed is declared in the preload context (not in the main renderer).

Electron creates two separate environments for the renderer process: the main renderer and the preload script. Sentry was only initialized in the renderer.ts file, which prevented it from capturing errors originating from functions or callbacks within the preload context.

The problem was solved by:

• initializing Sentry in the preload and renderer contexts
• adding an event listener for unhandledrejection to catch unhandled promise rejections

[cristianoventura]

window isn't available in the preload context so I'm adding flexibility here to pass the getSettings function as an argument optionally.

[e-fisher]

Looks like that did the trick! 🙌
I've noticed this error in the console when sentry is enabled, otherwise LGTM No longer reproducible

Refused to create a worker from 'blob:http://localhost:5173/45616690-949f-4daf-a53c-4fc7e0a2906f' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

[cristianoventura]

I've removed the integrations as we've discussed today!