Error-Handling.md

Error Handling (& HTTP Status Codes)

Error Handling

This project comes with a mixin to help you handle and manage errors (mostly errors generated during the asyncData part of the code).

First of all you have to import the mixin and mount it in your component.

import ErrorHandler from "mixins/errorHandler"

// Your component declaration
export default {
	// ...
	mixins: [ErrorHandler]
	// ...
}

Then you have to catch the error, and, after you catched the error, commit the mutation SET_ERROR, passing the error as a parameter

asyncData({ store }) {
	return store.dispatch("LOAD_PAGE")
		.catch((error) => {
			return store.commit("SET_ERROR", { error: error.message })
		})
}

This will make the error available in the this.error variable, allowing you to render it on the page:

// display the error
div(v-if="error")
	br
	b Error
	p {{ error }}

You can combine this behavior with the next section to achieve the best results

HTTP Status Codes

Sometimes when rendering the page you might want to return a different HTTP status code (because for example it is a 404 page or because the data you requested in the asyncData hook was not available).

This is pretty simple.

In the meta() function you can add an httpStatusCode field, giving it the value you want to be sent to the browser requesting the page.

Remember, the meta() function has access to data and computed values, so you can vary the status code according to the value of variables.

For example this meta() function will return 200 when this.varValue is set, 404 otherwise:

meta() {
		return {
			title: this.varValue || "No var",
			description: "This is the meta description for the page",
			httpStatusCode: this.varValue ? 200 : 404
		}
	}