Vuejs: generate an error for non-existing components

Question

I would like to generate an error, instead of a simple warning like this in the console when we are trying to use a non-existent component:

[Vue warn]: Failed to resolve component: nonexisting-component
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

People sometimes break the flow and they don't notice it because the component just doesn't appear. Is it possible to do anything about it?

Answer 1

For people struggling with this, here is a solution:

https://vuejs.org/api/application.html#app-config-warnhandler

You can use this handler to notify when a missing component is rendered. Warnings only work during development, so this config is ignored in production mode. In my case, since I use quasar, I made a plugin in src/boot, which receives the Vuejs app object, and added the following code:

  app.config.warnHandler = (msg: string, instance: ComponentPublicInstance | null, trace: string): void => {
    if (msg.includes('Failed to resolve component')) {
      alert(`⚠️ ${msg}\nNothing will be rendered at its place.\n${trace}`)
    }
  }

I don't know how to place something in the DOM instead of the object, but an alert is good enough. Saved plenty of lives since then 😉