diff --git a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js index 2dda5c2200..71282a7b31 100644 --- a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js +++ b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js @@ -1,4 +1,5 @@ import { getConfig } from '@edx/frontend-platform'; +import { sendTrackEvent } from '@edx/frontend-platform/analytics'; import React from 'react'; import { useDispatch } from 'react-redux'; @@ -94,6 +95,10 @@ const useIFrameBehavior = ({ const handleIFrameLoad = () => { if (!hasLoaded) { setShowError(true); + sendTrackEvent('edx.bi.error.learning.iframe_load_failed', { + iframeUrl, + unitId: id, + }); logError('Unit iframe failed to load. Server possibly returned 4xx or 5xx response.', { iframeUrl, }); diff --git a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js index 4a4142d29f..28b23faadf 100644 --- a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js +++ b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js @@ -5,6 +5,7 @@ import { getEffects, mockUseKeyedState } from '@edx/react-unit-test-utils'; import { logError } from '@edx/frontend-platform/logging'; import { getConfig } from '@edx/frontend-platform'; +import { sendTrackEvent } from '@edx/frontend-platform/analytics'; import { fetchCourse } from '@src/courseware/data'; import { processEvent } from '@src/course-home/data/thunks'; import { useEventListener } from '@src/generic/hooks'; @@ -17,6 +18,8 @@ jest.mock('@edx/frontend-platform', () => ({ getConfig: jest.fn(), })); +jest.mock('@edx/frontend-platform/analytics'); + jest.mock('react', () => ({ ...jest.requireActual('react'), useEffect: jest.fn(), @@ -271,6 +274,16 @@ describe('useIFrameBehavior hook', () => { expect(state.setState.showError).toHaveBeenCalledWith(true); expect(logError).toHaveBeenCalled(); }); + it('sends track event if has not loaded', () => { + hook = useIFrameBehavior(props); + hook.handleIFrameLoad(); + const eventName = 'edx.bi.error.learning.iframe_load_failed'; + const eventProperties = { + unitId: props.id, + iframeUrl: props.iframeUrl, + }; + expect(sendTrackEvent).toHaveBeenCalledWith(eventName, eventProperties); + }); it('does not set/log errors if loaded', () => { state.mockVals({ ...defaultStateVals, hasLoaded: true }); hook = useIFrameBehavior(props); @@ -278,6 +291,12 @@ describe('useIFrameBehavior hook', () => { expect(state.setState.showError).not.toHaveBeenCalled(); expect(logError).not.toHaveBeenCalled(); }); + it('does not send track event if loaded', () => { + state.mockVals({ ...defaultStateVals, hasLoaded: true }); + hook = useIFrameBehavior(props); + hook.handleIFrameLoad(); + expect(sendTrackEvent).not.toHaveBeenCalled(); + }); it('registers an event handler to process fetchCourse events.', () => { hook = useIFrameBehavior(props); hook.handleIFrameLoad();