feat: do not throw for webgl2 fail

packages/extension/src/entrypoints/sidepanel/components/misc.tsx

@@ -43,6 +43,7 @@ export function MotionOverlay({ active }: { active: boolean }) {
 	const motionRef = useRef<Motion | null>(null)
 
 	useEffect(() => {
+		try {
 			const mode = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
 			const motion = new Motion({
 				mode,
@@ -54,9 +55,12 @@ export function MotionOverlay({ active }: { active: boolean }) {
 			motionRef.current = motion
 			containerRef.current!.appendChild(motion.element)
 			motion.autoResize(containerRef.current!)
+		} catch (e) {
+			console.warn('[MotionOverlay] Motion unavailable:', e)
+		}
 
 		return () => {
-			motion.dispose()
+			motionRef.current?.dispose()
 			motionRef.current = null
 		}
 	}, [])

packages/page-controller/src/mask/SimulatorMask.ts

@@ -8,13 +8,7 @@ import cursorStyles from './cursor.module.css'
 export class SimulatorMask {
 	shown: boolean = false
 	wrapper = document.createElement('div')
-	motion = new Motion({
+	motion: Motion | null = null
-		mode: isPageDark() ? 'dark' : 'light',
-		styles: {
-			position: 'absolute',
-			inset: '0',
-		},
-	})
 
 	#cursor = document.createElement('div')
 
@@ -30,8 +24,17 @@ export class SimulatorMask {
 		this.wrapper.setAttribute('data-browser-use-ignore', 'true')
 		this.wrapper.setAttribute('data-page-agent-ignore', 'true')
 
-		this.wrapper.appendChild(this.motion.element)
+		try {
-		this.motion.autoResize(this.wrapper)
+			const motion = new Motion({
+				mode: isPageDark() ? 'dark' : 'light',
+				styles: { position: 'absolute', inset: '0' },
+			})
+			this.motion = motion
+			this.wrapper.appendChild(motion.element)
+			motion.autoResize(this.wrapper)
+		} catch (e) {
+			console.warn('[SimulatorMask] Motion overlay unavailable:', e)
+		}
 
 		// Capture all mouse, keyboard, and wheel events
 		this.wrapper.addEventListener('click', (e) => {
@@ -145,8 +148,8 @@ export class SimulatorMask {
 		if (this.shown) return
 
 		this.shown = true
-		this.motion.start()
+		this.motion?.start()
-		this.motion.fadeIn()
+		this.motion?.fadeIn()
 
 		this.wrapper.style.display = 'block'
 
@@ -163,8 +166,8 @@ export class SimulatorMask {
 		if (!this.shown) return
 
 		this.shown = false
-		this.motion.fadeOut()
+		this.motion?.fadeOut()
-		this.motion.pause()
+		this.motion?.pause()
 
 		this.#cursor.classList.remove(cursorStyles.clicking)
 
@@ -174,7 +177,7 @@ export class SimulatorMask {
 	}
 
 	dispose() {
-		this.motion.dispose()
+		this.motion?.dispose()
 		this.wrapper.remove()
 	}
 }