fix(browser): Send client outcomes through tunnel if configured (#4031)

Author: kamilogorek

packages/browser/src/transports/base.ts

@@ -114,7 +114,7 @@ export abstract class BaseTransport implements Transport {
 
     const url = this._api.getEnvelopeEndpointWithUrlEncodedAuth();
     // Envelope header is required to be at least an empty object
-    const envelopeHeader = JSON.stringify({});
+    const envelopeHeader = JSON.stringify({ ...(this.options.tunnel && { dsn: this._api.getDsn().toString() }) });
     const itemHeaders = JSON.stringify({
       type: 'client_report',
     });

packages/browser/test/unit/transports/base.test.ts

@@ -92,6 +92,25 @@ describe('BaseTransport', () => {
         `{}\n{"type":"client_report"}\n{"timestamp":12.345,"discarded_events":${JSON.stringify(outcomes)}}`,
       );
     });
+
+    it('attaches DSN to envelope header if tunnel is configured', () => {
+      const tunnel = 'https://hello.com/world';
+      const transport = new SimpleTransport({ dsn: testDsn, sendClientReports: true, tunnel });
+
+      transport.recordLostEvent(Outcome.BeforeSend, 'event');
+
+      visibilityState = 'hidden';
+      document.dispatchEvent(new Event('visibilitychange'));
+
+      const outcomes = [{ reason: Outcome.BeforeSend, category: 'error', quantity: 1 }];
+
+      expect(sendBeaconSpy).toHaveBeenCalledWith(
+        tunnel,
+        `{"dsn":"${testDsn}"}\n{"type":"client_report"}\n{"timestamp":12.345,"discarded_events":${JSON.stringify(
+          outcomes,
+        )}}`,
+      );
+    });
   });
 
   it('doesnt provide sendEvent() implementation', () => {