When rendering on the nuxt server, there is an error in one of the interfaces of multiple concurrent requests, so that the whole page cannot be rendered.
recently, a problem has been found in the project of rendering all ends of the server with nuxt.js. For example, there are multiple concurrent requests on a page, and as long as there is a problem with one request, the whole page will not work. When rendering with the client, you can usually give a pop-up window to show the error message returned by the server.
so here comes the problem. When using nuxt, how to make sure that when there is something wrong with the interface, the page will not crash completely. two How to quickly locate errors
- use
errorCaptured of vue to stop bubbling error in vue instance
- errors that do not occur in the vue instance are checked in debug, either
.catch , or try catch . Who tells the browser to execute JS on a single thread?
axios request needs to be globally encapsulated.
when responding to an error in the intercept reject . An error is indicated in catch when using
.
- axios and fetch can be encapsulated again,
you can handle it in catch . As long as the interface of the main module of this page is not linked, it should be displayed.
if the main module is dead, you can go directly to 500,404 pages!
debug? Just read the error report when debugging.
online, if you have a request, go directly to the error page
.
have you solved it
all server rendering methods (asyncData, fetch...) add exception catch code
just jump to the specified page or give a prompt.
async asyncData({ app, store, redirect }) {
if (process.server) {
const [error, { data }] = await exception(
app.$http().serverGet(store.state.token, '/personal/info'),
redirect
)
if (error) {
return false
}
return {
biz: data
}
})
}
export default function exception(promise, redirect) {
return promise
.then(response => {
if (response && response.code === '000000') {
if (response.data) {
// eslint-disable-next-line
return [{ data, status }, null]
} else {
return [true, null]
}
} else if (response.code === 'SYS002') {
redirect({
path: '/login'
})
} else {
return [null, response]
}
})
.catch(error => {
return [error, { data: null }]
})
}
