The Filter Section

The Filter section is used to filter the requests in the current session to narrow down the search scope or just to get a better overview, which can come in really handy when dealing with a lot of requests. This can be done by writing a filter function in JavaScript, which enables creating complex and flexible queries, suitable for every scenario.

A no-code alternative to the JavaScript solution is also planned for the future.

How the Code gets executed

The code in the builtin editor gets evaluated once as a JavaScript module (which allows top-level await) to initialize the environment for the filter function. This module should export a single function called filter, which can be async i.e. return a Promise.

The filter function is getting called for every entry that already exists in the session once the filter gets applied and every time a session entry gets added to the session or updated, updating the results of the filter in real-time without needing to manually re-run the filter over and over again.

This is all running inside a custom JavaScript runtime which uses fewer resources and provides a secure environment which has no access to critical APIs like the filesystem.

The Filter Function

Every time the filter function is getting called, it receives two arguments: request and response. These two arguments provide you with the latest information of the entry which should be used to determine if the entry should pass the filter or not by returning a boolean.

The entry successfully passes the filter if the function returns true and fails i.e. not getting displayed on the screen and removed from the search scope when it returns false.

The TypeScript function signature of filter and the types of its parameters look like the following:

type Option<T> = T | undefined;

type Headers = {
    get(name: string): string | null,
    has(name: string): boolean,
    entries(): Array<[string, string]>,
    keys(): Array<string>,
    values(): Array<string>,
    [Symbol.iterator](): Iterable<[string, string]>,
};

type Request = {
    url: URL,
    method: Option<string>,
    httpVersion: Option<string>,
    headers: Headers,
    bytes(): Uint8Array,
    text(): string,
    json(): any
};

type Response = {
    statusCode: Option<number>,
    statusText: Option<string>,
    httpVersion: Option<string>,
    headers: Headers,
    bytes(): Uint8Array,
    text(): string,
    json(): any
};

function filter(
  request: Request,
  response: Option<Response>
): boolean | Promise<boolean>;

Note: The json method of the Request or Response type might throw if the body doesn't contain valid JSON.

Available APIs

There are currently four APIs available you can use with more to come in the future. All of them are Web APIs and should be usable just like you normally would in any other JavaScript runtime that supports these.

• console
• URL
• TextEncoder
• TextDecoder

Note: All messages logged using the console API are getting displayed in the builtin console of the Filter section inside of powhttp.