Algolia search is broken

[baumannzone]

Describe the bug

I am experiencing an issue with the integrated search component (Algolia).
The search function is not working properly, as it returns zero results when I use the web interface in my recently created project with Vitepress.

However, if I perform a search using the API or on Algolia's website, the search function works correctly and returns results.

It's possible that there may be an issue with the search component in Vitepress that's causing this problem.

I wanted to bring this to your attention in the hopes that it can be addressed and fixed as soon as possible.

Reproduction

• Create an Algolia account
• Configure the algolia section with index, API key and app id.

  •   appId: '5D6FRGxxxx',  
      apiKey: 'e04451b589c484090xxxxxxxxxxxxxxx',  
      indexName: 'csspills'
    

• Create the index (both manually / via API)

  • [
      {
        title: 'Pill 1 CLI',
        description: 'Create a new project with the CLI',
        tags: [ 'demo1', 'cli' ]
      },
      {
        title: 'Pill 2 AWS',
        description: 'Create a new AWS project from the command line',
        tags: [ 'demo2', 'AWS' ]
      }
    ]
    

• Start the local server
• Search

Expected behavior

Show results after searching

System Info

System:
    OS: macOS 13.2.1
    CPU: (8) x64 Apple M1
    Memory: 7.73 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Brave Browser: 107.1.45.133
    Chrome: 109.0.5414.119
    Chrome Canary: 112.0.5609.0
    Firefox: 95.0.2
    Firefox Developer Edition: 108.0
    Safari: 16.3

Additional context

UI Request:

https://5d6frgc6t9-dsn.algolia.net/1/indexes/*/queries?x-algolia-agent=Algolia%20for%20JavaScript%20(4.8.5)%3B%20Browser%20(lite)%3B%20docsearch%20(3.3.3)%3B%20docsearch-react%20(3.3.3)%3B%20docsearch.js%20(3.3.3)&x-algolia-api-key=e04451b589c484090xxxxxxxxxxxxxxx&x-algolia-application-id=5D6FRGxxxx

Request Method: POST
Status Code: 200 OK

API Request (Node.js)

{
  hits: [
    {
      title: 'Pill 2 AWS',
      description: 'Create a new AWS project from the command line',
      tags: [Array],
      objectID: '85344354000',
      _highlightResult: [Object]
    }
  ],
  nbHits: 1,
  page: 0,
  nbPages: 1,
  hitsPerPage: 20,
  exhaustiveNbHits: true,
  exhaustiveTypo: true,
  exhaustive: { nbHits: true, typo: true },
  query: 'AWS',
  params: 'query=AWS',
  renderingContent: {},
  processingTimeMS: 1,
  processingTimingsMS: {
    getIdx: { load: [Object], total: 1 },
    request: { roundTrip: 30 },
    total: 1
  },
  serverTimeMS: 1
}

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[baumannzone]

Please let me know if there is any further information or details I can provide to assist with troubleshooting this issue."

[brc-dd]

your index needs the lang information too as we are filtering based on that

[baumannzone]

Hi, @brc-dd! Thanks for your reply.
Where should I put that lang key and what values does it accept, any link to the doc?

My question is, why does it work through the API?

[brc-dd]

I'm not sure how you're creating that index, but if you'd run algolia's crawler it would've indexed the html lang attribute too.

It's working through the API because you haven't specified facetFilters: ['lang:en-US'] in your request.

[baumannzone]

Im using the free quote, I don't have access to the crawler. I'm completely new to Algolia, I may be missing something (?)

[brc-dd]

Just a clarification on our side: we only support https://docsearch.algolia.com/ (docsearch is free for open-source libraries). If that's the case for you, then you can use https://crawler.algolia.com/admin/ to access crawler configuration.

If that's not the case, then you will need to build your own search component or use any of the ones mentioned at #670

[baumannzone]

Thanks for your clarification. It's a public repo and it's open source.
Here is the website and this is the repo.

So if I'm not wrong, I should have access to the algolia crawler, right?

[brc-dd]

Yeah, you should have, can you try logging in that admin dashboard?

[baumannzone]

Thank you. Actually, I dont have access. But it looks like an auth error. I will try later.

[brc-dd]

If it's a blocker than try downgrading to [email protected] or older. Those versions should work. Or you can also patch vitepress to delete this line:

vitepress/src/client/theme-default/components/VPAlgoliaSearchBox.vue

Line 39 in e8e8721

facetFilters

[baumannzone]

I just requested access to the crawler. It seems to be that was the problem.
If that doesn't solve my problem, I'll be creating a custom search component. Let's keep this issue open until I figure out what's going on.

As feedback, I think Vitepress docs should provide more context about how Algolia should work.

[MarkusKeck]

If you really need a fast solution and you need the newest vitepress version you can try vitepress-plugin-search.
It is an offline search so you dont need to register anything, in the meantime you can try to configure angolia.

//vite.config.ts
import { SearchPlugin } from "vitepress-plugin-search";
import { defineConfig } from "vite";

//default options
var options = {
  ...flexSearchIndexOptions,
  previewLength: 62,
  buttonLabel: "Search",
  placeholder: "Search docs",
};

export default defineConfig({
  plugins: [SearchPlugin(options)],
});

[Richard-Zhang1019]

guys, I use your solution to resolve my search question, but when toggle docs language it can't work perfect

[brc-dd]

@Richard-Zhang1019 just wait for a week or so, we'll ship local search out-of-box!

[Richard-Zhang1019]

Amazing information！！

[Richard-Zhang1019]

I am looking forward to this feature！！！

[brc-dd]

As feedback, I think Vitepress docs should provide more context about how Algolia should work.

Yeah, the docs are missing many things. I agree that it's sort of ironic considering we are building a docs-centered framework 😅. But yeah we will update that with an official crawler config and hopefully support for local search as well.

After you get access, try adding attributesForFaceting (ref. #1935 (comment))

[baumannzone]

Thank you very mucho, amigo. I'll let you know how it goes.

@MarkusKeck I want to try using the default search component, I'll try your solution if I can't get it to work.

[baumannzone]

I just got a message, it says my site won't be accepted bcs is under construction and has tons of lorem ipsums text. But I think when I finish creating the website, I will be given access to the tool.

[baumannzone]

It works: https://onebeyond.github.io/css-pills/

#2030 (comment)

[brc-dd]

Let's move this to discussion. If there is any issue you need some help you can directly post in our discord too. For now you can either wait for approval or use the plugin Markus mentioned above.

[lslzl3000]

@brc-dd I tried https://docsearch.algolia.com/docs/legacy/run-your-own/#integration with docker

the crawl config:

{
  "index_name": "orillusion",
  "start_urls": [
    {
      "url": "https://xxxx.com/guide/",
      "variables": {
        "lang": [
          "zh"
        ],
        "version": [
          "latest"
        ]
      },
      "page_rank": 5,
      "selectors_key": "doc"
    },
    {
      "url": "https://xxxx.com/api/",
      "variables": {
        "lang": [
          "en",
          "zh"
        ],
        "version": [
          "latest"
        ]
      },
      "page_rank": 4,
      "selectors_key": "api"
    }
  ],
  "selectors": {
    "doc":{
      "lvl0": ".vp-doc h1",
      "lvl1": ".vp-doc h2",
      "lvl2": ".vp-doc h3",
      "lvl3": ".vp-doc h4",
      "text": ".vp-doc p, .vp-doc ul, .vp-doc ol"
    },
    "api":{
      "lvl0": ".vp-doc h1",
      "lvl1": ".vp-doc h3"
    }
  }
}

The record in Algolia dashboard works fine
and the config in vitepress (1.0.0-alpha.60):

algolia: {
      appId: 'xxxxxx',
      apiKey: 'xxxxxxx',
      indexName: 'orillusion',
      searchParameters:{
        facetFilters: ["lang:zh", "version:latest"]
      }
}

But I can't get any search record in vitepress, do I miss someting?

[brc-dd]

I'm not completely sure if the legacy scrapper is compatible with DocSearch v3, but can you try running ./docsearch playground to see if the generated index is working? Also when you're searching from VitePress are you getting any errors on the browser console?

[lslzl3000]

./docsearch playground ? in where?
No errors or logs on browser console, just no hits{"results":[{"hits":[],"nbHits":0,"page":0,"nbPages":0, ...

[lslzl3000]

Thanks, I will try change crawler config

The facetFilters:["lang:zh"] just for test, Algolia doc said lang could be changed in local facetFilters

[brc-dd]

Yeah you can totally skip that thing. If you are using locales, vitepress will automatically adjust the config for you so that whatever language docs your user is viewing, searching will show content relevant to that only.

https://vitepress.dev/guide/i18n
https://vitepress.dev/reference/default-theme-search#i18n

[lslzl3000]

the long config you provided, it is new v3 DocSearch, so many things missing in legacy crawl(only few filed in v2), no idea how to match the v3 result, I will keep tring

[brc-dd]

Ah, ok. Have you tried changing the selectors to what's mentioned in #1935?

My guess is you've wrong lvl0 and lvl1.

[lslzl3000]

Yes, wrong about lvl0 & lvl1，finally got it work, thanks for your help

[baumannzone]

Algolia is working! I just got accepted to join the program for free and they sent me the appId and the apiKey and now everything works as expected.