Diagnostics

By enabling SSR tracing on the Next.js server you can observe the rendering of the widgets and the sequence of requests, their count and duration and verify any performance hits that could occur when rendering your the pages.

We provide @progress/sitefinity-nextjs-sdk/diagnostics/dev module with sample implementation for tracing widget performance utilizing the Next.js experimental implementation and OpenTelemetry.

By default the module that is required in the nextjs-sdk is the @progress/sitefinity-nextjs-sdk/diagnostics/empty which is an API mock with no dependencies that does not carry and side effects when deployed in production.

IMPORTANT: The Next.js instrumentation implementation is at an experimental stage at the moment and both their and our API can be subject to changes.

IMPORTANT: The OpenTelemetry implementation is currently only supported for SSR components and server code. For performance analytics on the Front end, please refer to the Next.JS usage of useReportWebVitals. 

1. Install the needed OpenTelemetry npm packages to your local development setup:
2. Enable tracing for Next.js in the next.config.js and change the module resolution in the webpack config:
   
   npm i @opentelemetry/api @opentelemetry/exporter-trace-otlp-http @opentelemetry/resources @opentelemetry/sdk-node @opentelemetry/sdk-trace-node @opentelemetry/semantic-conventions --save-dev
   
   
   
3. Include the intrumentation.ts and instrumentation.node.ts to your project.
   

For more information, see Next.js' documentaion on Manual OpenTelemetry configuration.

Import the @progress/sitefinity-nextjs-sdk/diagnostics/empty package to make sure that your widget works and is not reporting data if you disable the tracing and remove the module alias in the webpack config.

Tracing server-to-server http requests

await RestClient.sendRequest({url, traceContext});

await RestClient.getItems({/*... getAllArgs*/, traceContext})

Obtaining trace context

You can obtain an optional trace context in several ways. Not providing such context logs the request in the root of the Next.js route render span.

• First method:
  
  
  
• Second method:
  
  
• Third method:
  

Furthermore, you can use any functionality that the NodeSDK for Open Telemetry provides.