fix(runtime-core/async-component): fix error component when there are…

… no error handlers fix #2129
vuejs · Sep 16, 2020 · c7b4a37 · c7b4a37
1 parent bad0ecb
commit c7b4a37
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 7 deletions.
diff --git a/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts b/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts
@@ -206,6 +206,51 @@ describe('api: defineAsyncComponent', () => {
  expect(serializeInner(root)).toBe('resolved')
  })
 
+ // #2129
+ test('error with error component, without global handler', async () => {
+ let resolve: (comp: Component) => void
+ let reject: (e: Error) => void
+ const Foo = defineAsyncComponent({
+ loader: () =>
+ new Promise((_resolve, _reject) => {
+ resolve = _resolve as any
+ reject = _reject
+ }),
+ errorComponent: (props: { error: Error }) => props.error.message
+ })
+
+ const toggle = ref(true)
+ const root = nodeOps.createElement('div')
+ const app = createApp({
+ render: () => (toggle.value ? h(Foo) : null)
+ })
+
+ app.mount(root)
+ expect(serializeInner(root)).toBe('<!---->')
+
+ const err = new Error('errored out')
+ reject!(err)
+ await timeout()
+ expect(serializeInner(root)).toBe('errored out')
+ expect(
+ 'Unhandled error during execution of async component loader'
+ ).toHaveBeenWarned()
+
+ toggle.value = false
+ await nextTick()
+ expect(serializeInner(root)).toBe('<!---->')
+
+ // errored out on previous load, toggle and mock success this time
+ toggle.value = true
+ await nextTick()
+ expect(serializeInner(root)).toBe('<!---->')
+
+ // should render this time
+ resolve!(() => 'resolved')
+ await timeout()
+ expect(serializeInner(root)).toBe('resolved')
+ })
+
  test('error with error + loading components', async () => {
  let resolve: (comp: Component) => void
  let reject: (e: Error) => void

diff --git a/packages/runtime-core/src/apiAsyncComponent.ts b/packages/runtime-core/src/apiAsyncComponent.ts
@@ -117,7 +117,12 @@ export function defineAsyncComponent<
 
  const onError = (err: Error) => {
  pendingRequest = null
- handleError(err, instance, ErrorCodes.ASYNC_COMPONENT_LOADER)
+ handleError(
+ err,
+ instance,
+ ErrorCodes.ASYNC_COMPONENT_LOADER,
+ !errorComponent /* do not throw in dev if user provided error component */
+ )
  }
 
  // suspense-controlled or SSR.
@@ -152,7 +157,7 @@ export function defineAsyncComponent<
 
  if (timeout != null) {
  setTimeout(() => {
- if (!loaded.value) {
+ if (!loaded.value && !error.value) {
  const err = new Error(
  `Async component timed out after ${timeout}ms.`
  )

diff --git a/packages/runtime-core/src/errorHandling.ts b/packages/runtime-core/src/errorHandling.ts
@@ -99,7 +99,8 @@ export function callWithAsyncErrorHandling(
 export function handleError(
  err: unknown,
  instance: ComponentInternalInstance | null,
- type: ErrorTypes
+ type: ErrorTypes,
+ throwInDev = true
 ) {
  const contextVNode = instance ? instance.vnode : null
  if (instance) {
@@ -131,10 +132,15 @@ export function handleError(
  return
  }
  }
- logError(err, type, contextVNode)
+ logError(err, type, contextVNode, throwInDev)
 }
 
-function logError(err: unknown, type: ErrorTypes, contextVNode: VNode | null) {
+function logError(
+ err: unknown,
+ type: ErrorTypes,
+ contextVNode: VNode | null,
+ throwInDev = true
+) {
  if (__DEV__) {
  const info = ErrorTypeStrings[type]
  if (contextVNode) {
@@ -144,8 +150,12 @@ function logError(err: unknown, type: ErrorTypes, contextVNode: VNode | null) {
  if (contextVNode) {
  popWarningContext()
  }
- // crash in dev so it's more noticeable
- throw err
+ // crash in dev by default so it's more noticeable
+ if (throwInDev) {
+ throw err
+ } else {
+ console.error(err)
+ }
  } else {
  // recover in prod to reduce the impact on end-user
  console.error(err)