Ein Artikel, der ausführlich erklärt, wie Vue3 globale Ausnahmen behandelt

// packages/runtime-core/src/errorHandling.ts

export function handleError(
  err: unknown,
  instance: ComponentInternalInstance | null,
  type: ErrorTypes,
  throwInDev = true
) {
  const contextVNode = instance ? instance.vnode : null
  if (instance) {
    // 省略其他代码
    // 读取 errorHandler 配置项
    const appErrorHandler = instance.appContext.config.errorHandler
    if (appErrorHandler) {
      callWithErrorHandling(
        appErrorHandler,
        null,
        ErrorCodes.APP_ERROR_HANDLER,
        [err, exposedInstance, errorInfo]
      )
      return
    }
  }
  logError(err, type, contextVNode, throwInDev)
}

3. Nachdenken🎜🎜Sie können darüber nachdenken, müssen Sie sich während des Geschäftsentwicklungsprozesses häufig mit diesen Fehlersituationen auseinandersetzen? Verwendet eine komplexe Bibliothek wie Vue3 also try...catch, um überall Ausnahmen zu behandeln? Werfen wir als nächstes einen Blick darauf. 🎜

2. Einfache globale Ausnahmebehandlung implementieren🎜🎜Bei der Entwicklung von Plug-Ins oder Bibliotheken können wir eine globale Ausnahmebehandlung durch try...catch kapseln Methode: Übergeben Sie die auszuführende Methode als Parameter. Der Aufrufer kümmert sich nur um das Aufrufergebnis und muss die interne Logik der globalen Ausnahmebehandlungsmethode nicht kennen. Die allgemeine Verwendung ist wie folgt: 🎜

(err: Error, instance: Component, info: string) => ?boolean

Nach dem Login kopieren

Nach dem Login kopieren

🎜Testen Sie es: 🎜

<template>
  <Message></Message>
</template>
<script setup>
// App.vue  
import { onErrorCaptured } from &#39;vue&#39;;
  
import Message from &#39;./components/Message.vue&#39;
  
onErrorCaptured(function(err, instance, info){
  console.log(&#39;[errorCaptured]&#39;, err, instance, info)
})
</script>

Nach dem Login kopieren

Nach dem Login kopieren

🎜Sie können sehen, dass Sie die Methode nur als Parameter übergeben müssen, wenn Sie Ausnahmen für eine Methode behandeln müssen. Das obige Beispiel unterscheidet sich jedoch ein wenig von der Logik der tatsächlichen Geschäftsentwicklung. Im tatsächlichen Geschäft stoßen wir häufig auf verschachtelte Methodenaufrufe. Versuchen wir es also: 🎜

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script setup>
// Message.vue
const sendMessage = () => {
  throw new Error(&#39;[test onErrorCaptured]&#39;)
}
</script>

Nach dem Login kopieren

Nach dem Login kopieren

🎜 Das ist kein Problem. Anschließend besteht der nächste Schritt darin, die entsprechende Ausnahmebehandlung im Zweig catch der Methode errorHandling zu implementieren. Schauen wir uns als nächstes an, wie es im Vue3-Quellcode gehandhabt wird. 🎜

3. ​​​​So implementieren Sie die Ausnahmebehandlung in Vue3🎜🎜Nachdem wir das obige Beispiel verstanden haben, schauen wir uns an, wie die Ausnahmebehandlung im Vue3-Quellcode implementiert wird auch sehr einfach umzusetzen. 🎜

1. Methoden zur Ausnahmebehandlung implementieren 🎜🎜 Definieren Sie callWithErrorHandling und callWithAsyncErrorHandling< in der Datei <code>errorHandling.ts / code>Zwei Methoden zur Behandlung globaler Ausnahmen. Wie der Name schon sagt, behandeln diese beiden Methoden jeweils: 🎜🎜🎜callWithErrorHandling: behandelt Ausnahmen in synchronen Methoden; 🎜🎜callWithAsyncErrorHandling: behandelt Ausnahmen in asynchronen Methoden. 🎜🎜🎜Die Verwendungsmethode ist wie folgt: 🎜

[errorCaptured] Error: [test onErrorCaptured]
    at Proxy.sendMessage (Message.vue:36:15)
    at _createElementVNode.onClick._cache.<computed>._cache.<computed> (Message.vue:3:39)
    at callWithErrorHandling (runtime-core.esm-bundler.js:6706:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6715:21)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:350:13) Proxy {sendMessage: ƒ, …} native event handler

Nach dem Login kopieren

Nach dem Login kopieren

🎜Die Code-Implementierung ist ungefähr wie folgt: 🎜

// packages/runtime-core/src/errorHandling.ts

export function handleError(
  err: unknown,
  instance: ComponentInternalInstance | null,
  type: ErrorTypes,
  throwInDev = true
) {
  const contextVNode = instance ? instance.vnode : null
  if (instance) {
    let cur = instance.parent
    // the exposed instance is the render proxy to keep it consistent with 2.x
    const exposedInstance = instance.proxy
    // in production the hook receives only the error code
    const errorInfo = __DEV__ ? ErrorTypeStrings[type] : type
    while (cur) {
      const errorCapturedHooks = cur.ec // ①取出组件配置的 errorCaptured 生命周期方法
      if (errorCapturedHooks) {
        // ②循环执行 errorCaptured 中的每个 Hook
        for (let i = 0; i < errorCapturedHooks.length; i++) {
          if (
            errorCapturedHooks[i](err, exposedInstance, errorInfo) === false
          ) {
            return
          }
        }
      }
      cur = cur.parent
    }
    // 省略其他代码
  }
  logError(err, type, contextVNode, throwInDev)
}

Nach dem Login kopieren

Nach dem Login kopieren

🎜Die Logik der callWithErrorHandling-Methode ist durch einen einfachen try relativ einfach. .catch-Schichtenkapselung. Die Methode callWithAsyncErrorHandling ist cleverer. Sie übergibt die auszuführende Methode zur Verarbeitung an die Methode callWithErrorHandling und das Ergebnis wird über .catch< verarbeitet /code> Methode. 🎜<h3 data-id="heading-7">2. Ausnahmen behandeln🎜🎜Wenn im obigen Code ein Fehler gemeldet wird, wird die Ausnahme über <code>handleError() behandelt. Die Implementierung sieht ungefähr wie folgt aus: 🎜

// packages/runtime-core/src/errorHandling.ts

export const enum ErrorCodes {
  SETUP_FUNCTION,
  RENDER_FUNCTION,
  WATCH_GETTER,
  WATCH_CALLBACK,
  // ... 省略其他
}

export const ErrorTypeStrings: Record<number | string, string> = {
  // 省略其他
  [LifecycleHooks.RENDER_TRACKED]: &#39;renderTracked hook&#39;,
  [LifecycleHooks.RENDER_TRIGGERED]: &#39;renderTriggered hook&#39;,
  [ErrorCodes.SETUP_FUNCTION]: &#39;setup function&#39;,
  [ErrorCodes.RENDER_FUNCTION]: &#39;render function&#39;,
  // 省略其他
  [ErrorCodes.SCHEDULER]:
    &#39;scheduler flush. This is likely a Vue internals bug. &#39; +
    &#39;Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next&#39;
}

Nach dem Login kopieren

Nach dem Login kopieren

🎜Nachdem Sie die Kernverarbeitungslogik beibehalten haben, können Sie sehen, dass die Verarbeitung auch hier recht einfach ist und der Fehlerinhalt direkt über console.error(err) ausgegeben wird . 🎜

3. 配置 errorHandler 自定义异常处理函数