Update Span Processor With Attributes in Real Time?

[mmeyer1]

Hey all,

I'm working on developing a React library for use by ~30+ SPAs in an enterprise setting.

The idea is the enterprise would like to set pre-defined attributes on all telemetry to standardize across a bunch of different product teams. All telemetry produced by apps should have this attributes. Some of these attributes can change in real time as they reflect state which might alter as the user navigates the app.

So far I've got the auto-web-sdk working and can export telemetry to the enterprise's chosen telemetry tool - great. This library works from a React context so most of the registration of the SDK/exporters are done there. in the context provider.

I developed a custom span processor to auto-append the enterprise attributes to every span - works great for the initial set of attributes provided to the context when its first newed up.

Where I'm stuck now is how to update the registered span processor when the attributes change. Fair warning I am not a super-React developer (how I ended up writing this React SDK is a bit of a mystery :P )

I tried essentially wrapping the whole thing (the registration of the processors and the provider.register call) in a useEffect but no luck. I guess what I'm after is there a better way to approach this (modify an already registered spanProcessor or dump it and register a new one in real time)? Other things I've thought about:

Stashing attributes in local storage and modifying them when changed and having my span processor just go grab the object to append to the span from there onStart.

Its also possible I'm just not Reacty enough and am missing something obvious.

export function Context({initialAttributes, children, telemetryOptions} : TelemetryProps) {
const [state, setState] = useState<ContextModelAttributes>(initialAttributes || {});
// a custom hook is exposed which ultimately sets the attributes
const setAttributes = (update:ContextModelAttributes) => {
setState({...state, ...update}); 
// leaving out some boring boilerplate setting up OLTP exporter
useEffect(() => {
const provider = new WebTracerProvider(providerConfig); 
const processor = new CustomSpanProcessor(new TelemetryCoolModel(state).attributes, new ConsoleSpanExporter());
provider.addSpanProcessor(processor);

registerInstrumentations({
// options omitted but nothing weird here
})

provider.register({
contextManager: new ZoneContextManager(),
propagator: new B3Propagator()
}); 
}, [state]);

CustomSpanProcessor implementation:

class CustomSpanProcessor extends SimpleSpanProcessor {
attributes: Record<string, string>;

constructor(attributes: Record<string, string>. exporter: SpanExporter) {
super(exporter);
this.attributes=attributes; 
}

onStart(span: Span, context: Context): void {
span = this.setAttributes(span, this.attributes);
super.onStart(span, context); 
}

private setAttributes(span: Span, attributes: Object) : Span
// not important for this context so omitting 

[mmeyer1]

I ended up using local storage and referencing that in a custom span processor - but it would be nice if there a way to update an already registered span processor