feat: Browser profiling

[timfish]

Closes #792

Adds a new RendererProfiling integration:

• Requires Electron >= v15 (For Chrome 94)
• Enabled via the new enableRendererProfiling option
• It adds 'Document-Policy': 'js-profiling' headers to all renderer requests
• Caches profile envelope items as they arrive in the main process from renderers
• Hooks beforeEnvelope to re-add the profiles to the correct envelopes

This PR also adds a test to ensure a profile is sent with the transaction.

Enabling Browser Profiling

From a users perspective, to enable profiling in the renderers, you'll need to pass enableRendererProfiling: true in the main process:

const { init } = require('@sentry/electron/main');

init({
  dsn: '__DSN__',
  enableRendererProfiling: true,
});

Then in the renderer follow the regular browser profiling instructions:

import { addTracingExtensions, init, BrowserProfilingIntegration } from '@sentry/electron/renderer';

addTracingExtensions();

init({
  integrations: [new BrowserProfilingIntegration()],
  tracesSampleRate: 1,
  profilesSampleRate: 1,
});

[AbhiPrasad]

awesome

[AbhiPrasad]

We need both RendererProfiling and BrowserProfilingIntegration?

[timfish]

RendererProfiling is only for the main node process and enables the header injection. BrowserProfilingIntegration does the actual profiling in the browser.

[timfish]

I added some more detail to the top post to show how this would be used by users

[JonasBa]

No blocking comments, just wondering if we can reduce the config point down to a single entry

[timfish]

can we automatically inject BrowserProfiling

Electron has a "preload" context where you can inject code but it's

• isolated from the browser context
• will only load from a path which isn't compatible with bundling.

We can inject code into the browser context via either the debugger interface or via intercepting the requests for existing assets (html, js, etc).

The debugger is a bit heavy handed and likely won't happen before init has occurred.

Assuming the browser front end is loading from a file:https:// URI, we could attempt to intercept and inject js code but which files should we inject into? Can we inject a script into all html files?

If we could determine a reliable way to do this, we could inject all the browser code automatically, not just additional features like this!

Due to (optional but common) bundling of the main node process code, any code we inject would need to be inlined into the main process SDK source and we'd need add this in a way that doesn't impact app size for those not using this feature.

[JonasBa]

I think it's very reasonable to ask people to do two different configuration changes in this context for now, the isolation seems unreliable to work around, but it could be a nicer DX improvement later on if we can find a way to do it reliably.