✨ [RUMF-1286] test for expected features before starting recording

packages/rum/src/boot/recorderApi.spec.ts

@@ -1,4 +1,4 @@
-import { noop } from '@datadog/browser-core'
+import { isIE, noop } from '@datadog/browser-core'
 import type { RecorderApi, ViewContexts, LifeCycle, RumConfiguration } from '@datadog/browser-rum-core'
 import { LifeCycleEventType } from '@datadog/browser-rum-core'
 import { createNewEvent, deleteEventBridgeStub, initEventBridgeStub } from '../../../core/test/specHelper'
@@ -36,6 +36,9 @@ describe('makeRecorderApi', () => {
   let rumInit: () => void
 
   beforeEach(() => {
+    if (isIE()) {
+      pending('IE not supported')
+    }
     setupBuilder = setup().beforeBuild(({ lifeCycle, sessionManager }) => {
       stopRecordingSpy = jasmine.createSpy('stopRecording')
       startRecordingSpy = jasmine.createSpy('startRecording').and.callFake(() => ({
@@ -151,6 +154,26 @@ describe('makeRecorderApi', () => {
         expect(startRecordingSpy).not.toHaveBeenCalled()
       })
     })
+
+    describe('if browser is not supported', () => {
+      let originalArrayFrom: typeof Array['from']
+
+      beforeEach(() => {
+        originalArrayFrom = Array.from
+        delete (Array as any).from
+      })
+
+      afterEach(() => {
+        Array.from = originalArrayFrom
+      })
+
+      it('does not start recording', () => {
+        setupBuilder.build()
+        recorderApi.start()
+        rumInit()
+        expect(startRecordingSpy).not.toHaveBeenCalled()
+      })
+    })
   })
 
   describe('stopSessionReplayRecording()', () => {

packages/rum/src/boot/recorderApi.ts

@@ -44,7 +44,7 @@ export function makeRecorderApi(
   startRecordingImpl: StartRecording,
   startDeflateWorkerImpl = startDeflateWorker
 ): RecorderApi {
-  if (canUseEventBridge()) {
+  if (canUseEventBridge() || !isBrowserSupported()) {
     return {
       start: noop,
       stop: noop,
@@ -155,3 +155,15 @@ export function makeRecorderApi(
     isRecording: () => state.status === RecorderStatus.Started,
   }
 }
+
+/**
+ * Test for Browser features used while recording
+ */
+function isBrowserSupported() {
+  return (
+    // Array.from is a bit less supported by browsers than CSSSupportsRule, but has higher chances
+    // to be polyfilled. Test for both to be more confident. We could add more things if we find out
+    // this test is not sufficient.
+    typeof Array.from === 'function' && typeof CSSSupportsRule === 'function'
+  )
+}