# Ariadne: building a custom observability UI for personalized search

DevFeed: [Ariadne: building a custom observability UI for personalized search](<https://devfeed.tech/articles/ariadne-building-a-custom-observability-ui-for-personalized-search-29345.md>)

Original publisher: [Read original article](<https://multithreaded.stitchfix.com/blog/2023/06/13/ariadne-observability-ui-for-search/>)

Published: 2023-06-13T01:00:00Z

Content type: article

Language: en

Sources: [Stitch Fix](<https://devfeed.tech/sources/stitch-fix.md>)

Topics: [observability](<https://devfeed.tech/topics/observability.md>), [ui](<https://devfeed.tech/topics/ui.md>), [React](<https://devfeed.tech/topics/react.md>), [d3.js](<https://devfeed.tech/topics/d3-js.md>), [Microservice](<https://devfeed.tech/topics/microservice.md>), [Logging and metrics](<https://devfeed.tech/topics/logging-and-metrics.md>), [debugging](<https://devfeed.tech/topics/debugging.md>)

Tags: [d3-js](<https://devfeed.tech/tags/d3-js.md>), [debugging](<https://devfeed.tech/tags/debugging.md>), [development](<https://devfeed.tech/tags/development.md>), [logging-and-metrics](<https://devfeed.tech/tags/logging-and-metrics.md>), [microservices](<https://devfeed.tech/tags/microservices.md>), [observability](<https://devfeed.tech/tags/observability.md>), [react](<https://devfeed.tech/tags/react.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

Stitch Fix describes Ariadne, a custom interactive observability UI for introspecting its personalized search pipeline. Built with React, D3.js, visx, and internal libraries, the tool uses production and experimental search APIs to help teams trace search behavior, diagnose bugs, and support experimentation.

## Source excerpt

In June 2022, Stitch Fix launched the Freestyle search feature, transforming how our clients discover styles that are tailored to their taste. Under the hood, personalized search is fulfilled by a pipeline of modular microservices. We designed the search system to be composable, making it easy to swap in new components and speeding up experimentation and development. Composability also made the system more observable, making it simpler to make each event traceable and reproducible with built-in logging and metrics. However, even with extensive logging, debugging a complex system such as personalized search can be quite challenging. As a hypothetical example, if a client searches for running shoes and instead sees paisley sweaters, we need to quickly diagnose where in the search pipeline the problem occurred, so that the experts in that system can work on a resolution. Where did the sweaters come from, and where are the shoes we expected to see instead? Did the query get parsed into incorrect attributes? Did the attributes get poorly matched with items in our inventory? Did the result rankings disproportionately focus on the client's past preference for sweaters and disinterest in sportswear? Understanding which service is responsible for the problem is a crucial first step in addressing it. Ideally, we want to anticipate and prevent such problems through interrogating hypothetical search scenarios before clients encounter them. Early on, we knew that slogging through system logs to understand bugs and dependencies of search would not sustain our need for iterative experimentation and collaborative development. To reduce toil and enhance the impact of the Search team, we invested in building a dedicated tool. Ariadne, named after the labyrinth expert from Greek mythology, is a custom interactive UI designed for search introspection. Ariadne is built with React and custom visualization components based on D3.js, visx, and internal libraries, and is powered by producti