Docusaurus x Algolia x Netlify - Not crawling hierarchy

Hi everyone,

I’m having some issues when using the search on my documentation.

I’m using Docusaurus v2 with docusaurus/theme-search-algolia deploying in Netlify with a custom domain.
The website code is on GitHub, so every time a commit is done for “Master”, a new build is triggered.

I’ve enable the Algolia crawler plugin and when it builds the website, it runs the crawler successfully since I can see new records being added to the index.
However my issue is that when I try to search I got an error.
“Uncaught (in promise) TypeError: Cannot read property ‘lvl0’ of undefined”

Has anyone had this problem or similar?
Could it be a misconfiguration in my website config?

Thank you!

Hey @operations1

Are you able to share your site/repo?

Hi @the ,
Of course:
GitHub Repo - GitHub - SkillsWorkflow/Documentation

Website - https://documentation.skillsworkflow.com

I’m adding an record example of what I see on my index.

Thanks!

So I haven’t come up with anything conclusive (other than I am unlikely to use this myself.)

Using your search credentials I was able to perform a successful search via cURL. From this I can tell there is nothing wrong with your credentials.

curl -X GET \
     -H "X-Algolia-API-Key: {apiKey}" \
     -H "X-Algolia-Application-Id: {appID}" \
    "https://{appID}-dsn.algolia.net/1/indexes/{index}?query=skill"

One of the things I noted on the @docusaurus/theme-search-algolia page is it provides a /search page. This is very much broken; as soon as a single character is entered into the search box focus is removed. This is no use to anyone (especially the user.) There is an open issue for /search Docusaurus sends incorrect Algolia DocSearch request under /search · Issue #5084 · facebook/docusaurus · GitHub which is possibly related.

On a demo React/Netlify CMS site https://dazzling-goldberg-06f636.netlify.app I have Algolia crawler running with Instantsearch via CDN and it works great.

I suggest this is not misconfiguration on your part. There are several open issues on docusaurus with regards algolia.

Hi @the ,
I was able to crawl the hierarchy by adding a netlify.toml

[[plugins]]
package = "@algolia/netlify-plugin-crawler"
  [plugins.inputs]
  template = "hierarchical"

However, the search is returning values, but it looks that it is not able to find the values/titles to display.
i.e. the class ‘DocSearch-Hit-content-wrapper’ and its contents are not being added

Any advise on this?

Thanks

What I can see is the error

Uncaught (in promise) TypeError: Cannot read property 'value' of undefined

which is caused by the line

var t = (e._highlightResult
    ? e._highlightResult.hierarchy.lvl0
    : e.__docsearch_parent._highlightResult.hierarchy.lvl0).value;

In the same script is

attributesToRetrieve: [
  "hierarchy.lvl0",
  "hierarchy.lvl1",
  "hierarchy.lvl2",
  "hierarchy.lvl3",
  "hierarchy.lvl4",
  "hierarchy.lvl5",
  "hierarchy.lvl6",
  "content",
  "type",
  "url"
],

but it would appear from the screenshot of your data previously posted, you have no hierarchy data attribute to retrieve (unless that has now changed with the new crawl.)

Yes, the new crawl got the hierarchy, however not sure why the “type” is not there.
On the example below I got the hierarchy levels: lvl0, 1 and 2.

I think I’ve figured it out. That’s not to say I have the solution.

I still see an error in the console, hierarchy is certainly returned in the data.

But this is the real issue

which you want to look like this

Results are populating the spaces however you have an SVG in place of text

When you probably want it to look like this

1 Like

Hello,

Thanks for the thorough report I’ll get in touch with the docsearch team as it seems to be coming from the frontend

1 Like

Thanks!
I’ve also found out that when setting contextualSearch: true, the search results are 0.

  • Language metadata on my index is crawled as “lang”
  • On the API call from my website it is passed on the facetFilters “language” and 2 additonal defaults one

Should I configure anything else on my netlify.toml file so that:

  • Language is correctly crawled
  • Remove “docusaurus_tag:default” and “docusaurus_tag:docs-default-current” facetFilters from contextual search since it would be required to have the ContextualSearch for the language filtering purpose

Hi @samuel.bodin,
Did you get any update from the docsearch team on this issue?

Let me know if you need further information from my side.

Thank you :slight_smile:

Hello,

We have identified the issue but we lack the bandwidth to fix it right now unfortunately.
The problem is quite simple, the indexSettings are not correct for your Algolia Index, but once it’s set we no longer touch them.
To fix it, you should delete add those settings:

      searchableAttributes: [
        'hierarchy.lvl0',
        'hierarchy.lvl1',
        'hierarchy.lvl2',
        'hierarchy.lvl3',
        'hierarchy.lvl4',
        'hierarchy.lvl5',
        'hierarchy.lvl6',
        'content',
      ],
      attributeForDistinct: 'pathname',
1 Like

Not sure if I understood the steps that I need to perform:

  1. Go to Algolia and select the Index
  2. Go to Index Configuration
    2.1 Relevace Essentials > Searchable attributes > Remove all searchable attributes > Save
    2.2 Search Behavior > Attribute for Distinct > Remove pathname (although I can not remove it, since it requires one attribute to be set)
  3. Go to Netlify and redeploy the website (with clear cache)

I’ve performed these steps, and it is still not showing text/content when using the Search, only empty boxes.

Am I missing anything?

Thanks. :slight_smile:

Hi @operations1, I haven’t followed everything by I think that you need to add the settings mentioned by Samuel:

  1. Go to Algolia and select the Index
  2. Go to Index Configuration
    2.1 Relevance Essentials > Searchable attributes > Add the mentioned attributes and remove the others > Save
    2.2 Search Behavior > Deduplication and Grouping > Attribute for Distinct > Set pathname > Save

Hi @sylvain.bellone ,
Thank you for your message.

I’ve already applied all the changes as you mention and it is still not showing text/content.
Below is an example of what i’m getting on my documentation website.

The configuration are as follow:


Trying to test again, but getting nothing again (still?)

with the same error as previously even though results are returned

TypeError: Cannot read property 'value' of undefined

This is a step backwards as a least some rendering (e.g. icons) was happening previously.

This is what I see in DevTools when using your live site:

And this is what I see with a local build:

While the error is the same either way, the live site is missing lvl0 in _highlightResult.hierarchy as hierarchy.lvl0 is null (local it is Actions.)

I wonder if it is worth posting on the docusaurus issues also. There is also a docusaurus tag on Stack Overflow, and a Discord channel too.

Hi @operations1, sorry for the late answer.
I’ve checked with the DocSearch team, and they have released a fix for those errors: https://github.com/algolia/docsearch/pull/1039
Can you update to the alpha.40 version and retry?

We’ll also work on more templates for the Netlify plugin to expose a template fully compatible with the DocSearch UI.

Hi @sylvain.bellone,

Thank you for your message.

We’ve updated as you mention, and we are still having the same issues. :frowning_face:

We’ve also set on the package.json: “@algolia/netlify-plugin-crawler”: “^1.0.9”.
Our GitHub repo is located at: https://github.com/SkillsWorkflow/Documentation
Live Documentation: https://documentation.skillsworkflow.com

Below is the current package.json configuration.

Hey, I’m still seeing that the requests are sent with the DocSearch UI 3.0.0-alpha.39

Hi @sylvain.bellone,
Thank you for the help, I had to force it on the package.json to set a new dependency:
@docsearch/js”: “^3.0.0-alpha.40”,

Now it works!
There are no errors on the console and I see that we are now using 3.0.0-alpha.40.

However, my results are still without content, only the # is shown, any advice on that?

Thanks