Hello.

We have React application(with react-router and react-query) which consists of several microfrontends and does a lot of requests to different services.

The requirement is - error report should contain no client sensitive information and a lot of requests which app currently does contain that info in url path params.

For examle /users/12134/orders/2345 - should be transformed to smth like - /users/:userId/orders/:orderId.

Currently have two ideas:

1. Solid, but will require a lot of work - create a collection of all possible url route masks which we are using on FE side.

Sort of:

const apiMasks = [
/users/:userId/orders/:orderId
]

Having that info, I can find a match between url string and such pattern and understand where params are placed, to finaly make some nice substitution like react-router actually does for transaction value.

Then I define beforeSendTransaction / beforeSend / beforeBreadcrumb / beforeSendSpan - to find all possible url injections within event data and update them.

2. If we assume that all sensitive params are represented as a number strings - there is no need to have any api structure info, we can just split url into tokens and substitute all numeral strings with generic text, like ':param'.

This way is much simpler, but is based on assumptions and output urls are not so nice.

Tbh I don't think there are some nice solutions here, cause we need to know information about api to make some nice polishing from FE side, but maybe there is already libs or approaches implemented by community?