【应用SSR-nuxt开发日记5】error相关问题

1.如何在开发环境让error.vue模版有效

我们知道在layouts里可以编写模版页,错误页面的默认模版是nuxt-error.vue 位于nuxt源码的components目录 不可更改。
如果你想定制就在layouts下创建error.vue。
这时生成的.nuxt>index 等相关引用error组件的文件中的错误页面组件引用会改为你自己的编写的layouts>error.vue文件。
但是你npm run dev会发现 mmp 无效 还是一堆堆栈信息 为什么？
因为在nuxt源码中使用了一个供内部debug使用的模块

image.png image.png

如果nuxt.config.js中 debug没有配置 且还在dev环境下启动 那么无论你怎么定义错误页面 都会被youch模块接手 把错误堆栈信息打印出来 初衷是方便调试。

image.png

源码中的这句话 你可以尝试在nuxt.config.js中定义dev 但是你会发现 不好使
大家看下源码lib>common>options 中的Options.defaults定义就知道了

dev: process.env.NODE_ENV !== 'production',
  debug: undefined, // Will be equal to dev if not provided

所以想强制的在dev环境下 看error的线上表现 可以通过在nuxt.config.js中定义
debug:false,dev:false 来达到目的

2.错误级别

ssr里有几种错误级别

• ssr服务端渲染错误 对应servermiddleware
• 前端vue-router错误 对应middleware
• �业务中接收到的错误，也就是上面两级捕捉不到的 比如业务场景中的请求错误需要自己写error-handler

在error-handler中 你可以使用context.error方法 来把错误引导到 error.vue组件来显示
比如文档中介绍的

随便写个示意 把error到一个方法里 用ErrorHandler去统一处理

/**
 * 错误处理
 * @param {*} context 
 * @param {*} error 
 */
const errorHandler = (ContextError, error) => {
    if (error) {
        switch (error.statusCode) {
            case 401:
                ContextError({
                    statusCode: 401,
                    message: 'You need back to login again'
                })
                break;
            case 500:
                ContextError({
                    statusCode: 500,
                    message: 'it\'s a innner wrong'
                })
                break;
            default:
                ContextError({
                    statusCode: 100,
                    message: 'unknown error'
                })
                break;
        }
    }
}