Feature request: Debug Mode

[mmorris8]

I just spent two weeks wrestling with getting tabs driven by react-router-dom and react-aria to work. I'm now two weeks behind on a project as I didn't think this functionality would take more than a couple hours to put in. We need to be able to put instant search into debug mode.

const search = instantsearch({
  debug: {} // object or true
});

In debug mode console.log statements will be executed at strategic points in the execution flow. True can be passed for a logical default, or an object can be passed to detail which log statements will be executed and what data will be shown.

Hook points

Critical functions will be monitored with the args fed to them logged and their output logged.

• Refine
• Clear Facets
• stateMapping - routeToState
• stateMapping - stateToRoute
• history - createUrl
• history - parseUrl

Flags

• uiState - whether to log the uiState before and after a hook function is called

This is a quick draft. I'm still tired. I'm prepared to fork and write this, but I want some input from the community on whether anyone else would find this useful and what other sorts of information could be logged. Also, instead of simply doing "true" perhaps string descriptions of what to log.

[Haroenv]

This seems like an interesting idea. In the past we've experimented with a browser extension as well, but found it tough to narrow down what to expose, so that doesn't exist.

I think the way to go would be a middleware that logs out the uiState changes, as well as on-demand which widgets are mounted, this way it doesn't have impact on all the parts of the code and become hard to tree shake out (text for logs is usually quite large).

[theocampbell]

I would definitely find this useful. I am trying to set up a multi index search where the user can change tab and search a different index. I obviously want the search term to remain while the user is changing tabs. I have been playing round with createURL, parseURL, stateMapping etc but I find it very difficult to work out where there are problems in my code and how the state is maintained throughout the user journey.

[Haroenv]

So for you the actual search parameters probably would also be interesting on top of the ui state?

[theocampbell]

Yes that would be useful too! Here is what I am working on at the moment. But I am not syncing my url and routeState properly I think.

[mmorris8]

I just finished doing this and will be giving a detailed writeup of my approach. The process of doing this isn't as straightforward as it should be. Out of curiosity, what are you using for tabs and clientside routing? I'm using react-aria for the tab system and react-router-dom for the clientside routing.

[theocampbell]

@mmorris8, I would love to see a write up of your approach. I am using Next JS with the app router. I created a layout that includes the search bar and the tabs, each tab is a link to a different route with an Algolia Instance for that tab. I stopped using the routing provided by Algolia and am parsing the query useing next js useSearchParams and refining it in a virtual searchbox within each tab. Not sure if this is the correct way to go about it and I have still not implemented facets (which I only need on one of the indices). Code is open source here if you want to take a look: https://github.com/Dark-Matter-Labs/circulaw/tree/agg-search-routes