angular-instantsearch
angular-instantsearch copied to clipboard
Sporadic facet error message
I sporadically get the following error message:
dataType is not a retrieved facet.
The dataType is defined as a facet and faceting works client side (using your widgets).
Here is the stack trace
at SearchResults.getFacetValues (index.js:647)
at Object.render (connectRefinementList.js:322)
at eval (InstantSearch.js:359)
at arrayEach (_arrayEach.js:15)
at forEach (forEach.js:38)
at InstantSearch._render (InstantSearch.js:355)
at AlgoliaSearchHelper.EventEmitter.emit (events.js:84)
at eval (algoliasearch.helper.js:1245)
at arrayEach (_arrayEach.js:15)
at forEach (forEach.js:38)
Would it be possible to create a sandbox in which this happens? Since this isn't happening consistently, I think that it might be possibly something to do with the specific way you're rendering the widgets. There's a template here
So I don't have time to create a sample but looking at this function:
function extractNormalizedFacetValues(results, attribute) {
var predicate = {name: attribute};
if (results._state.isConjunctiveFacet(attribute)) {
var facet = find(results.facets, predicate);
if (!facet) return [];
return map(facet.data, function(v, k) {
return {
name: k,
count: v,
isRefined: results._state.isFacetRefined(attribute, k),
isExcluded: results._state.isExcludeRefined(attribute, k)
};
});
} else if (results._state.isDisjunctiveFacet(attribute)) {
var disjunctiveFacet = find(results.disjunctiveFacets, predicate);
if (!disjunctiveFacet) return [];
return map(disjunctiveFacet.data, function(v, k) {
return {
name: k,
count: v,
isRefined: results._state.isDisjunctiveFacetRefined(attribute, k)
};
});
} else if (results._state.isHierarchicalFacet(attribute)) {
return find(results.hierarchicalFacets, predicate);
}
}
the last return should be
return find(results.hierarchicalFacets, predicate) || [];
Cc @bobylito since this is about the helper
Hi @mwawrusch thanks for reporting this issue. You're right about the return value for the hierarchical facet, it's inconsistent that we return undefined
when we find no values. Are you using a hierarchical menu with the dataType
attribute?
Hi Boby, I do not but it was the only obvious potential bug I found so far. The angular implementation on top of the base library fails if that one returns null or undefined so that's my best guess.
Which widget are you using with dataType
?
<ng-ais-refinement-list attribute="dataType">
</ng-ais-refinement-list>
<ng-ais-current-refined-values [clearAll]="false">
</ng-ais-current-refined-values>
<ng-ais-clear-all clearAllLabel="Reset everything">
</ng-ais-clear-all>
I get this everytime, here is my setup with material2.
<span>
<!-- <input aria-label="search" placeholder="Search" type="search"> -->
<ng-ais-instantsearch [config]="algoliaConfig" #algoliaSearch>
<!-- SearchBox -->
<ng-ais-search-box (focus)="onSearchFocus(true)" #algoliaSearchBox></ng-ais-search-box>
<!-- Hits -->
<div id="search-wrapper" class="show-search wrapper" *ngIf="searching">
<div fxLayout="column" fxLayoutGap="5px">
<div fxLayout="row">
<mat-expansion-panel fxFlex="90">
<mat-expansion-panel-header>
<mat-panel-title>
Filters
</mat-panel-title>
</mat-expansion-panel-header>
<mat-list>
<ng-ais-current-refinements autoHideContainer="true" clearRefinementsLabel="Clear Filter"></ng-ais-current-refinements>
Category
<mat-divider></mat-divider>
<ng-ais-refinement-list attribute="dpCategory">
</ng-ais-refinement-list>
Country
<mat-divider></mat-divider>
<ng-ais-refinement-list attribute="country" searchable="true">
</ng-ais-refinement-list>
</mat-list>
</mat-expansion-panel>
<button color="accent" fxFlex="10" fxFlexAlign="start" mat-raised-button (click)="onSearchFocus(false)">
Close
<mat-icon aria-label="Close">close</mat-icon>
</button>
</div>
<!-- RefinementList -->
<div fxLayout="row" fxLayoutAlign="start" fxLayout.xs="column" fxLayoutAlign.xs="start stretch" fxLayoutGap="10px">
<div fxFlex="25%">
<!-- Pagination -->
<ng-ais-pagination [totalPages]="20" [padding]="1">
</ng-ais-pagination>
</div>
<div fxFlex="75%">
<ng-ais-hits>
<ng-template let-hits="hits">
<mat-nav-list class="scrollList">
<mat-list-item *ngFor="let hit of hits" (click)="navigate(hit, algoliaSearchBox)" [ngSwitch]="hit.dpCategory">
<img matListAvatar [src]="hit.thumbnailURL" alt="." *ngSwitchCase="'wineries'">
<img matListAvatar [src]="hit.labelURL" alt="." *ngSwitchCase="'wine'">
<ng-ais-highlight attribute="name" [hit]="hit">
</ng-ais-highlight>
</mat-list-item>
</mat-nav-list>
</ng-template>
</ng-ais-hits>
</div>
</div>
</div>
</div>
</ng-ais-instantsearch>
</span>
Hi @ajonp is it possible to have access to an URL where the bugs happens? Or a small repro case with https://codesandbox.io/s/github/algolia/instantsearch-templates/tree/master/src/Angular%20InstantSearch
This would help a lot, thanks 🙏
@iam4x sure you can hit https://www.drinkpublic.net and click the search bar at the top.
Getting the same issue. This causes breakage on the page we are using instantsearch on.
Can you explain how this causes breakage please? When I test this the error gets caught and the rendering continues.
Note that this is a fixed upstream issue which will come out with the upgrade to InstantSearch v4
I believe this issue no longer can happen with the latest versions which depend on InstantSearch v4