fix(runtime-core): should catch dom prop set TypeErrors

based on #1051

Author: yyx990803

packages/runtime-dom/__tests__/patchProps.spec.ts

@@ -1,7 +1,10 @@
 import { patchProp } from '../src/patchProp'
 import { render, h } from '../src'
+import { mockWarn } from '@vue/shared'
 
 describe('runtime-dom: props patching', () => {
+  mockWarn()
+
   test('basic', () => {
     const el = document.createElement('div')
     patchProp(el, 'id', null, 'foo')
@@ -92,4 +95,16 @@ describe('runtime-dom: props patching', () => {
     patchProp(el, 'srcObject', null, null)
     expect(el.srcObject).toBe(intiialValue)
   })
+
+  test('catch and warn prop set TypeError', () => {
+    const el = document.createElement('div')
+    Object.defineProperty(el, 'someProp', {
+      set() {
+        throw new TypeError('Invalid type')
+      }
+    })
+    patchProp(el, 'someProp', null, 'foo')
+
+    expect(`Failed setting prop "someProp" on <div>`).toHaveBeenWarnedLast()
+  })
 })

packages/runtime-dom/src/modules/props.ts

@@ -1,6 +1,9 @@
 // __UNSAFE__
 // Reason: potentially setting innerHTML.
 // This can come from explicit usage of v-html or innerHTML as a prop in render
+
+import { warn } from '@vue/runtime-core'
+
 // functions. The user is reponsible for using them with only trusted content.
 export function patchDOMProp(
   el: any,
@@ -35,6 +38,17 @@ export function patchDOMProp(
     // e.g. <div :id="null">
     el[key] = ''
   } else {
-    el[key] = value
+    // some properties perform value validation and throw
+    try {
+      el[key] = value
+    } catch (e) {
+      if (__DEV__) {
+        warn(
+          `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
+            `value ${value} is invalid.`,
+          e
+        )
+      }
+    }
   }
 }