Adding error handling
​
Overview
The Shopware 6 Administration stores API errors in the Vuex store. There they are centrally accessible to your components, with a flat data structure looking like this:
1
(state)
2
|- entityNameA
3
|- id1
4
|- property1
5
|- property2
6
...
7
|- id2
8
|- property1
9
|- property2
10
...
11
|- entityNameB
12
...
Copied!
In this guide you will learn how to access this error store directly or via one of the provided helper functions. ​
Read errors from the store
​ Errors can be read from the store by calling the getter method
getApiErrorFromPath. ​1
function getApiErrorFromPath (state) => (entityName, id, path)
Copied!
​ In there, the parameter
path is an array representing the nested property names of your entity.Also we provide a wrapper which can also handle nested fields in object notation, being much easier to use for scalar fields: ​
1
function getApiError(state) => (entity, field)
Copied!
​ For example, an empty product name would result in an error with the path
product.name, instead of having the array ['product', 'name'] present.In your Vue component, use computed properties to avoid flooding your templates with store calls. ​
1
computed: {
2
propertyError() {
3
return this.$store.getters.getApiError(myEntity, 'myFieldName');
4
},
5
nestedpropertyError() {
6
return this.$store.getters.getApiError(myEntity, 'myFieldName.nested');
7
}
8
}
Copied!
Those computed properties can then be used in your templates the familiar way:
1
<div>
2
<sw-field ... :error="propertyError"></sw-field>
3
</div>
Copied!
​
The mapErrors Service
​ Like every Vuex mapping, fetching the errors from the store may be very repetitive and error-prone. Because of this we provide you an Vuex like mapper function: ​
1
mapPropertyErrors(subject, properties)
Copied!
​ Here, the
subject parameter is the entity name (not the entity itself) and properties is an array of the properties you want to map. You can spread its result to create computed properties in your component. The functions returned by the mapper are named like a camelCase representation of your input, suffixed with Error.This is an example from the
sw-product-basic-form component: ​1
const { mapPropertyErrors } = Shopware.Component.getComponentHelper();
2
​
3
Component.register('sw-product-basic-form', {
4
computed: {
5
...mapPropertyErrors('product', [
6
'name',
7
'description',
8
'productNumber',
9
'manufacturerId',
10
'active',
11
'markAsTopseller'
12
])
13
}
14
})
Copied!
Which then are bound to the inputs like this:
1
<sw-field type="text" v-model="product.name" :error="productNameError">
Copied!
​
Error configuration for pages
​ When working with nested views, you need a way to tell the user that an error occurred on another view, e.g in another
tab. For this you can write a config for your sw-page component which looks like seen below: ​1
{
2
"sw.product.detail.base": {
3
"product": [
4
"taxId",
5
"price",
6
"stock",
7
"manufacturerId",
8
"name"
9
]
10
},
11
"sw.product.detail.cross.selling": {
12
"product_cross_selling": [
13
"name",
14
"type",
15
"position"
16
]
17
}
18
}
Copied!
​ This can then directly imported and used in the
mapPageError computed property:1
import errorConfiguration from './error.cfg.json';
2
​
3
const { mapPageErrors } = Shopware.Component.getComponentHelper();
4
​
5
Shopware.Component.register('sw-product-detail', {
6
computed: {
7
...mapPageErrors(errorConfiguration),
8
}
9
}
Copied!
This makes it possible to indicate if one or more errors exists, in another view or a tab:
1
<sw-tabs
2
:hasError="swProductDetailBaseError">
3
</sw-tabs>
Copied!
Last modified 18d ago
Copy link
Edit on GitHub