How can I define common error handler on client part in inertiajs app?

Question

I would like to make some common error handler on client part in inertiajs app. Seems vue has methods like app.config.errorHandler , errorCaptured How can I define them with inertiajs ?

 "inertiajs/inertia-laravel": "^0.5.2",

 "@inertiajs/inertia": "^0.10.0",
 "@inertiajs/inertia-vue3": "^0.5.1",
 "@inertiajs/progress": "^0.2.6",        
 "vue": "^3.2.30",
 "vue-loader": "^16.1.2"

ADDITIVE INFO :

But I got error after I changed calling of existing function into invalid and modified my resources/js/app.js file :

require('./bootstrap');

window.Toast = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: false,
    didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
})

require('@fortawesome/fontawesome-free/js/all.min.js');

// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

import mitt from 'mitt';
window.emitter = mitt();


const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
// console.log('appName::')
// console.log(appName)


import Multiselect from '@vueform/multiselect'

import VueUploadComponent from 'vue-upload-component'
import Paginate from "vuejs-paginate-next";


const app =  createInertiaApp({
    title: (title) => `${title} 12345 - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .component('inertia-link', Link)
            .component('Paginate', Paginate)
            .component('file-upload', VueUploadComponent)

            .mixin({ methods: { route } })
            .component('multiselect', Multiselect)
            .mount(el);
    },
});

console.log('app::') // I check this var
console.log(app)

console.log('app.config::') // But that is invalid
console.log(app.config)

app./*config.*/errorHandler = (err, instance, info) => {  // I ADDED THESE LINES !
    alert( 'errorHandler::' ) // THIS CODE IS NOT TRIGGERED!
    console.log('errorHandler err::')
    console.log(err)

    console.log('errorHandler instance::')
    console.log(instance)

    console.log('errorHandler info::')
    console.log(info)

    // handle error, e.g. report to a service
}

InertiaProgress.init({
    // The delay after which the progress bar will
    // appear during navigation, in milliseconds.
    delay: 50,

    // The color of the progress bar.
    color: 'red',

    // Whether to include the default NProgress styles.
    includeCSS: true,

    // Whether the NProgress spinner will be shown.
    showSpinner: false,
});
// InertiaProgress.init({ color: '#4B5563' });

But I got uncatched error : https://prnt.sc/LedRNSWU8Xkx

"@inertiajs/inertia": "^0.10.0",
"@inertiajs/inertia-vue3": "^0.5.1",
"@vue/compiler-sfc": "^3.0.5",
"admin-lte": "^3.1.0",
"axios": "^0.25",
"bootstrap": "^4.6.0",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"resolve-url-loader": "^5.0.0",
"sass": "^1.49.8",
"sass-loader": "^12.6.0",
"tailwindcss": "^3.0.0",
"vue": "^3.2.30",
"vue-loader": "^16.1.2"

What is wrong ?

Thanks!

Answer 1

Inertia.js is like the bridge between your server-side code and client-side code. This makes it agnostic towards the frameworks you use as long as there is an adapter for it.

In the case of setting up Inertia.js in your Vue.js project, go into your main app.js file and add any handlers you'd want to use there.

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) })

    app.config.errorHandler = (err, instance, info) => {
      // handle error, e.g. report to a service
    }

    app.use(plugin)
      .mount(el)
  },
})

Documentation on the Vue error handler.

PingCRM example app.js file