如何在inertiajs应用程序中定义客户端上常见的错误处理程序？

Question

我想在inertiajs应用程序中对客户端做一些常见的错误处理程序。vue似乎有像app.config.errorHandler、errorCaptured这样的方法，如何用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"

加法信息:

但是，在将现有函数的调用更改为无效并修改了资源/js/app.js文件后，出现了错误：

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' });

但是我得到了一个未捕获的错误：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"

怎么了？

谢谢!

Answer 1

Inertia.js就像连接服务器端代码和客户端代码之间的桥梁。这使得它与您使用的框架无关，只要有适配器就行。

在您的Inertia.js项目中设置Vue.js时，进入您的主app.js文件并添加您想要在那里使用的任何处理程序。

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)
  },
})

关于Vue错误处理程序的文档。

PingCRM示例app.js文件