Vue3 app.config.errorHandler Propiedad

Vue3 API global

app.config.errorHandlerEs una propiedad muy práctica que permite a los desarrolladores capturar y manejar errores en la aplicación a nivel global.

1. ¿Qué es app.config.errorHandler?

app.config.errorHandlerEs una opción de configuración global en Vue3, utilizada para capturar y manejar errores no capturados en la aplicación. Ya sean errores lanzados en funciones de ciclo de vida de componentes, manejadores de eventos u operaciones asincrónicas, todos pueden serapp.config.errorHandlercapturados y manejados.

2. ¿Cómo usar app.config.errorHandler?

Para usarapp.config.errorHandler, primero necesita crear una instancia de Vue y configurar laerrorHandlerpropiedad. A continuación se muestra un ejemplo sencillo:

Ejemplo

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.errorHandler = (err, vm, info) => {
  console.error('Error global capturado:', err)
  console.error('Instancia del componente donde ocurrió el error:', vm)
  console.error('Mensaje de error:', info)
}

app.mount('#app')

En este ejemplo, creamos una aplicación Vue y configuramoserrorHandler. Cuando aparece un error no capturado en la aplicación,errorHandlerse llamará a la función, y se le pasarán la información del error, la instancia del componente donde ocurrió el error y el mensaje de error.

Descripción de parámetros:

  • err: objeto de error, contiene la información detallada del error.
  • vm: la instancia del componente donde ocurrió el error.
  • info: una cadena que indica el origen del error, por ejemplo'ganchos del ciclo de vida'、'manejadores de eventos', etc.

3. Escenarios de aplicación práctica

app.config.errorHandlerHay muchos escenarios de aplicación en el desarrollo real. A continuación se muestran algunos usos comunes:

3.1 Registro de registros de errores

En el entorno de producción, capturar y registrar registros de errores es muy importante. A través deapp.config.errorHandler, podemos enviar la información del error al servidor para su almacenamiento y análisis.

Ejemplo

app.config.errorHandler = (err, vm, info) => {
  // Enviar la información del error al servidor
  fetch('/log-error', {
    method: 'POST',
    body: JSON.stringify({ err, vm, info })
  })
  console.error('Error global capturado:', err)
}

3.2 Avisos amigables para el usuario

Cuando ocurre un error en la aplicación, podemos usarapp.config.errorHandlerpara mostrar mensajes de aviso amigables para el usuario, en lugar de hacer que el usuario vea complejas trazas de error.

Ejemplo

app.config.errorHandler = (err, vm, info) => {
  alert('Lo sentimos, la aplicación ha tenido un problema. Por favor, inténtelo de nuevo más tarde.')
  console.error('Error global capturado:', err)
}

3.3 Recuperación de errores

En algunos casos, podemos intentarapp.config.errorHandlerrecuperar el error dentro de él, para evitar que la aplicación se bloquee.

Ejemplo

app.config.errorHandler = (err, vm, info) => {
  console.error('Error global capturado:', err)
  // Intentar recuperar el estado de la aplicación
  vm.$forceUpdate()
}

4. Precauciones

  • Propagación de errores：app.config.errorHandlerNo impide la propagación del error. Si el error no se captura, el navegador lo capturará y lo mostrará en la consola.
  • Errores asincrónicos：app.config.errorHandlerPuede capturar errores en operaciones asincrónicas, pero hay que prestar atención al mecanismo de manejo de errores del código asincrónico.

Vue3 API global

Otras extensiones