Handle error cases in element.animate() (#34096)

Author: spmonahan

change/@fluentui-react-motion-798994c5-fba9-4fa0-8228-bd0e7a12cf8d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: handle error cases in \"element.animate()\"",
+  "packageName": "@fluentui/react-motion",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.test.tsx

@@ -11,6 +11,20 @@ function createElementMock() {
   return [{ animate } as unknown as HTMLElement, animate] as const;
 }
 
+function createNullElementMock() {
+  const animate = jest.fn().mockReturnValue(null);
+
+  return [{ animate } as unknown as HTMLElement, animate] as const;
+}
+
+function createErrorElementMock() {
+  const animate = jest.fn().mockImplementation(() => {
+    throw new Error('Animation error');
+  });
+
+  return [{ animate } as unknown as HTMLElement, animate] as const;
+}
+
 const DEFAULT_KEYFRAMES = [{ transform: 'rotate(0)' }, { transform: 'rotate(180deg)' }];
 const REDUCED_MOTION_KEYFRAMES = [{ opacity: 0 }, { opacity: 1 }];
 
@@ -85,4 +99,39 @@ describe('useAnimateAtoms', () => {
       });
     });
   });
+
+  // See: https://github.com/microsoft/fluentui/issues/33902
+  describe('error handling', () => {
+    it('handle "element.animate()" returning null', () => {
+      const { result } = renderHook(() => useAnimateAtoms());
+
+      const [element, animateMock] = createNullElementMock();
+      const motion: AtomMotion = {
+        keyframes: DEFAULT_KEYFRAMES,
+        reducedMotion: { duration: 100, easing: 'linear' },
+      };
+
+      const handle = result.current(element, motion, { isReducedMotion: false });
+
+      expect(animateMock).toHaveBeenCalledTimes(1);
+      expect(animateMock).toHaveReturnedWith(null);
+      expect(handle).toBeDefined();
+    });
+
+    it('handles "element.animate()" throwing an error', () => {
+      const { result } = renderHook(() => useAnimateAtoms());
+
+      const [element, animateMock] = createErrorElementMock();
+      const motion: AtomMotion = {
+        keyframes: DEFAULT_KEYFRAMES,
+        reducedMotion: { duration: 100, easing: 'linear' },
+      };
+
+      const handle = result.current(element, motion, { isReducedMotion: false });
+
+      expect(animateMock).toHaveBeenCalledTimes(1);
+      expect(animateMock).toThrow();
+      expect(handle).toBeDefined();
+    });
+  });
 });

packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts

@@ -28,32 +28,42 @@ function useAnimateAtomsInSupportedEnvironment() {
       const atoms = Array.isArray(value) ? value : [value];
       const { isReducedMotion } = options;
 
-      const animations = atoms.map(motion => {
-        // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
-        const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
-        // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
-        const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
-
-        const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
-        const animationParams: KeyframeEffectOptions = {
-          ...DEFAULT_ANIMATION_OPTIONS,
-          ...params,
-
-          // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
-          ...(isReducedMotion && reducedMotionParams),
-        };
-
-        const animation = element.animate(animationKeyframes, animationParams);
-
-        if (SUPPORTS_PERSIST) {
-          animation.persist();
-        } else {
-          const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
-          Object.assign(element.style ?? {}, resultKeyframe);
-        }
-
-        return animation;
-      });
+      const animations = atoms
+        .map(motion => {
+          // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
+          const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
+          // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
+          const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
+
+          const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
+          const animationParams: KeyframeEffectOptions = {
+            ...DEFAULT_ANIMATION_OPTIONS,
+            ...params,
+
+            // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
+            ...(isReducedMotion && reducedMotionParams),
+          };
+
+          try {
+            // Firefox can throw an error when calling `element.animate()`.
+            // See: https://github.com/microsoft/fluentui/issues/33902
+            const animation = element.animate(animationKeyframes, animationParams);
+
+            if (SUPPORTS_PERSIST) {
+              // Chromium browsers can return null when calling `element.animate()`.
+              // See: https://github.com/microsoft/fluentui/issues/33902
+              animation?.persist();
+            } else {
+              const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
+              Object.assign(element.style ?? {}, resultKeyframe);
+            }
+
+            return animation;
+          } catch (e) {
+            return null;
+          }
+        })
+        .filter(animation => !!animation) as Animation[];
 
       return {
         set playbackRate(rate: number) {