Creating a Custom Language Code Editor Using React

July 22, 2022
Est. reading time:
8 min.
See how Tracetest developed a code editor for adding advanced selectors in our UI. Discusses the business need, requirements, and React implementation utilizing the Code Mirror editor & Lezer parser.
Oscar Reyes
Engineer, Tracetest
Kubeshop
Table of Contents
Creating a Custom Language Code Editor Using React

In this post, we  will showcase how we at Tracetest built a custom front-end non-simple code editor based on React for the advanced query language created by the team to target spans across an OTEL Trace.

# Introduction to Our Advanced Selector Query Language

Tracetest allows users to create assertions targeting specific spans from a trace simply and reliably.

A Trace can be composed by N number of spans that, at the same time, can be nested, repeated, or split into multiple queue producer/consumer sections.

Having a simple way to target the spans that matter for your assertions is instrumental to have good and reliable tests that will help you sleep at night.

To achieve this, Tracetest uses a custom span selector language to target spans. It inherits part of its syntax highlighting from CSS by using attribute matches, pseudo selectors, and child-parent operators.

This query language enables users to create the selectors the Tracetest system uses to apply the different assertions. Each section of the selector is composed of the following tokens:

* **Span Wrapper.** To start describing a query, a span wrapper is the first thing that needs to be added.

   * Example: span[].

* **Attribute Matchers.** Inside the span wrapper, a list of expressions can be added to narrow down the specific span that the user wants to match.

   * Example: name="get request" tracetest.span.type = "database".

* **Pseudo Selectors.** Sometimes you’ll need to be more specific around what span to choose from a collection and a pseudo selector similar to CSS can help with that.

   * Example: span[]:first.

* **Span Operators.** Currently, the query language we’ve built supports the child-parent (ancestor) operator and Or operator. You can write and combine both to match multiple spans or select one that is a child of a specific one.

   * Example: span[name="get request"] span[tracetest.span.type = "database"], span[http.status_code contains "200"]

Advanced Examples:

For more information about advanced selectors and the query language, visit the Tracetest [docs](https://github.com/kubeshop/tracetest/blob/main/docs/advanced-selectors.md).

## We Needed a Code Editor in Our UI

There are two main ways to use Tracetest.

The first is by using the [CLI](https://kubeshop.github.io/tracetest/command-line-tool/) that can be fed by YAML text files allowing CI/CD processes and automation.

The second is by using the UI to create tests, execute requests and create assertions/checks. Tests created directly in YAML can be loaded into the UI and vice versa.

When using the YAML text files, creating advanced queries is pretty straightforward as you can define the different selectors as text to trigger the process.

The complexity comes when trying to implement the same level of functionality the language provides in the UI as there can be many branches, nested selectors, operators, etc.

The initial UI implementation only supported a single span wrapper with its attribute expressions and a separated input for pseudo selectors.

Another important issue is that if a user creates a selector that uses any of the language features that are not supported by the UI, then, when viewing it in the UI, the selector won't match the original text version. Trying to edit it will break the selector in most of the cases.

# Creating the Non-simple Code Editor in React

At Tracetest, we knew we needed to let users build complex queries using some advanced query method in the near future. And with that in mind, we started thinking about the key features that we wanted to implement with the advanced editor. They are:

1. Syntax Highlighting

2. Autocomplete

3. Lint and Error Prompt

In order to achieve this, we started researching potential solutions and found [Code Mirror](https://codemirror.net/).

Code Mirror is an all-in-one code editor for the web that can be extended to support multiple standard languages and themes like Javascript, Go, Ruby, etc. It also provides a simple way to build your own custom parsers and themes.

And that’s just what we needed in order to accomplish the key features - to come up with our own parser. For that, we used [Lezer](https://lezer.codemirror.net/docs/), which is a tool to create custom grammar rules by specifying the different tokens and expressions.

As you learned at the beginning of this post, we defined the query language tokens and, based on that, we started to mix them to create our expressions.

Things like:

Once we had the grammar ready, we could finalize the language setup using Typescript.

Next, we had to come up with a way to support Autocomplete and Linting.

The Code Mirror framework includes two separate packages to handle Autocomplete and Linting, where you can add the different rules that, combined with the parser, can enable these features.

We created two custom hooks to handle this functionality that can be found [here](https://github.com/kubeshop/tracetest/tree/main/web/src/components/AdvancedEditor/hooks).

When complete, the editor React component looked like this:

# Final Code Editor Look, Feel and Functionality

From the UI perspective, this was the final result:

The video showcases the final version of the advance editor. It includes a demo of the main features and how the React application switches the state of the Diagram when updating the code within the editor.

It also shows the invalid query state error message which validates if the input is valid before triggering the request to the backend.

At Tracetest, we always try to provide you the best user experience. No matter the platform (UI/CLI) we want to ensure you have the tools to interact with the system in an easy way.

Having said that, if you have any comments or suggestions feel free to join our [Discord Community](https://discord.gg/6zupCZFQbe) - we are always looking for feedback that can help improve Tracetest in any way.

Using OpenTelemetry tracing (you should be!) and want to give Tracetest a try? Download [Tracetest](https://github.com/kubeshop/tracetest) from Github (MIT Licensed) and experience the latest in trace-based testing!

Tags:
tutorial
React

Recent Articles

Subscribe to stay up to date by getting the blog direct to your inbox
Or join the Kubeshop Community in one of these channels