errorHandling.ts 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. import { VNode } from './vnode'
  2. import { ComponentInternalInstance, LifecycleHooks } from './component'
  3. import { warn, pushWarningContext, popWarningContext } from './warning'
  4. import { isPromise, isFunction } from '@vue/shared'
  5. // contexts where user provided function may be executed, in addition to
  6. // lifecycle hooks.
  7. export const enum ErrorCodes {
  8. SETUP_FUNCTION,
  9. RENDER_FUNCTION,
  10. WATCH_GETTER,
  11. WATCH_CALLBACK,
  12. WATCH_CLEANUP,
  13. NATIVE_EVENT_HANDLER,
  14. COMPONENT_EVENT_HANDLER,
  15. DIRECTIVE_HOOK,
  16. TRANSITION_HOOK,
  17. APP_ERROR_HANDLER,
  18. APP_WARN_HANDLER,
  19. FUNCTION_REF,
  20. SCHEDULER
  21. }
  22. export const ErrorTypeStrings: Record<number | string, string> = {
  23. [LifecycleHooks.BEFORE_CREATE]: 'beforeCreate hook',
  24. [LifecycleHooks.CREATED]: 'created hook',
  25. [LifecycleHooks.BEFORE_MOUNT]: 'beforeMount hook',
  26. [LifecycleHooks.MOUNTED]: 'mounted hook',
  27. [LifecycleHooks.BEFORE_UPDATE]: 'beforeUpdate hook',
  28. [LifecycleHooks.UPDATED]: 'updated',
  29. [LifecycleHooks.BEFORE_UNMOUNT]: 'beforeUnmount hook',
  30. [LifecycleHooks.UNMOUNTED]: 'unmounted hook',
  31. [LifecycleHooks.ACTIVATED]: 'activated hook',
  32. [LifecycleHooks.DEACTIVATED]: 'deactivated hook',
  33. [LifecycleHooks.ERROR_CAPTURED]: 'errorCaptured hook',
  34. [LifecycleHooks.RENDER_TRACKED]: 'renderTracked hook',
  35. [LifecycleHooks.RENDER_TRIGGERED]: 'renderTriggered hook',
  36. [ErrorCodes.SETUP_FUNCTION]: 'setup function',
  37. [ErrorCodes.RENDER_FUNCTION]: 'render function',
  38. [ErrorCodes.WATCH_GETTER]: 'watcher getter',
  39. [ErrorCodes.WATCH_CALLBACK]: 'watcher callback',
  40. [ErrorCodes.WATCH_CLEANUP]: 'watcher cleanup function',
  41. [ErrorCodes.NATIVE_EVENT_HANDLER]: 'native event handler',
  42. [ErrorCodes.COMPONENT_EVENT_HANDLER]: 'component event handler',
  43. [ErrorCodes.DIRECTIVE_HOOK]: 'directive hook',
  44. [ErrorCodes.TRANSITION_HOOK]: 'transition hook',
  45. [ErrorCodes.APP_ERROR_HANDLER]: 'app errorHandler',
  46. [ErrorCodes.APP_WARN_HANDLER]: 'app warnHandler',
  47. [ErrorCodes.FUNCTION_REF]: 'ref function',
  48. [ErrorCodes.SCHEDULER]:
  49. 'scheduler flush. This is likely a Vue internals bug. ' +
  50. 'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next'
  51. }
  52. export type ErrorTypes = LifecycleHooks | ErrorCodes
  53. export function callWithErrorHandling(
  54. fn: Function,
  55. instance: ComponentInternalInstance | null,
  56. type: ErrorTypes,
  57. args?: unknown[]
  58. ) {
  59. let res
  60. try {
  61. res = args ? fn(...args) : fn()
  62. } catch (err) {
  63. handleError(err, instance, type)
  64. }
  65. return res
  66. }
  67. export function callWithAsyncErrorHandling(
  68. fn: Function | Function[],
  69. instance: ComponentInternalInstance | null,
  70. type: ErrorTypes,
  71. args?: unknown[]
  72. ): any[] {
  73. if (isFunction(fn)) {
  74. const res = callWithErrorHandling(fn, instance, type, args)
  75. if (res != null && !res._isVue && isPromise(res)) {
  76. res.catch((err: Error) => {
  77. handleError(err, instance, type)
  78. })
  79. }
  80. return res
  81. }
  82. const values = []
  83. for (let i = 0; i < fn.length; i++) {
  84. values.push(callWithAsyncErrorHandling(fn[i], instance, type, args))
  85. }
  86. return values
  87. }
  88. export function handleError(
  89. err: Error,
  90. instance: ComponentInternalInstance | null,
  91. type: ErrorTypes
  92. ) {
  93. const contextVNode = instance ? instance.vnode : null
  94. if (instance) {
  95. let cur = instance.parent
  96. // the exposed instance is the render proxy to keep it consistent with 2.x
  97. const exposedInstance = instance.proxy
  98. // in production the hook receives only the error code
  99. const errorInfo = __DEV__ ? ErrorTypeStrings[type] : type
  100. while (cur) {
  101. const errorCapturedHooks = cur.ec
  102. if (errorCapturedHooks !== null) {
  103. for (let i = 0; i < errorCapturedHooks.length; i++) {
  104. if (errorCapturedHooks[i](err, exposedInstance, errorInfo)) {
  105. return
  106. }
  107. }
  108. }
  109. cur = cur.parent
  110. }
  111. // app-level handling
  112. const appErrorHandler = instance.appContext.config.errorHandler
  113. if (appErrorHandler) {
  114. callWithErrorHandling(
  115. appErrorHandler,
  116. null,
  117. ErrorCodes.APP_ERROR_HANDLER,
  118. [err, exposedInstance, errorInfo]
  119. )
  120. return
  121. }
  122. }
  123. logError(err, type, contextVNode)
  124. }
  125. // Test-only toggle for testing the unhandled warning behavior
  126. let forceRecover = false
  127. export function setErrorRecovery(value: boolean) {
  128. forceRecover = value
  129. }
  130. function logError(err: Error, type: ErrorTypes, contextVNode: VNode | null) {
  131. // default behavior is crash in prod & test, recover in dev.
  132. if (__DEV__ && (forceRecover || !__TEST__)) {
  133. const info = ErrorTypeStrings[type]
  134. if (contextVNode) {
  135. pushWarningContext(contextVNode)
  136. }
  137. warn(`Unhandled error${info ? ` during execution of ${info}` : ``}`)
  138. console.error(err)
  139. if (contextVNode) {
  140. popWarningContext()
  141. }
  142. } else {
  143. throw err
  144. }
  145. }