Hi everyone, I try to implement SigNoz on nuxt js ...
# general
a
Hi everyone, I try to implement SigNoz on nuxt js but I got this error The code that I implement is const resource = new Resource({ 'service.name': serviceName }) const provider = new WebTracerProvider({ resource }) const collector = new CollectorTraceExporter({ url: 'http://localhost:4318/v1/traces' }) provider.addSpanProcessor(new SimpleSpanProcessor(collector)) provider.register({ contextManager: new ZoneContextManager() }) const webTracerWithZone = provider.getTracer(serviceName) declare const window: any let bindingSpan: Span | undefined window.startBindingSpan = ( traceId: string, spanId: string, traceFlags: number ) => { bindingSpan = webTracerWithZone.startSpan('') bindingSpan.spanContext().traceId = traceId bindingSpan.spanContext().spanId = spanId bindingSpan.spanContext().traceFlags = traceFlags } registerInstrumentations({ instrumentations: [ new FetchInstrumentation({ propagateTraceHeaderCorsUrls: ['/.*/g'], clearTimingResources: true, applyCustomAttributesOnSpan: ( span: Span, request: Request | RequestInit, result: Response | FetchError ) => { const attributes = (span as any).attributes if (attributes.component === 'fetch') { span.updateName(
${attributes['http.method']} ${attributes['http.url']}
) } if (result instanceof Error) { span.setStatus({ code: SpanStatusCode.ERROR, message: result.message }) span.recordException(result.stack || result.name) } } }) ] }) export function traceSpan<F extends (...args: any) => ReturnType<F>>( name: string, func: F ): ReturnType<F> { let singleSpan: Span if (bindingSpan) { const ctx = trace.setSpan(context.active(), bindingSpan) singleSpan = webTracerWithZone.startSpan(name, undefined, ctx) bindingSpan = undefined } else { singleSpan = webTracerWithZone.startSpan(name) } return context.with(trace.setSpan(context.active(), singleSpan), () => { try { const result = func() singleSpan.end() return result } catch (error) { singleSpan.setStatus({ code: SpanStatusCode.ERROR }) singleSpan.end() throw error } }) } Is there any idea about how to solve this?
v
Which doc/tutorial did you follow? Please follow this: https://signoz.io/blog/opentelemetry-nextjs/
p
window object is not available in server side
a
I'm following this tutorial https://signoz.io/blog/nodejs-performance-monitoring/ because I'm using vue js
Okay @Vishal Sharma I'll try your tutorial. Thankyou for your reference
Okay @Palash Gupta I'll try another way to implement this
p
thanks @Adi 😄 hope we were able to resolve your query
a
@Palash Gupta if window object is not available in server side, then what should I do with the code? I'm stuck with this error
p
would
window
&&
your script
would work ?