Diagnostics
SSR 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.
Enabling tracing in your development application
- Install the needed OpenTelemetry npm packages to your local development setup:
- 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
- Include the
intrumentation.ts and instrumentation.node.ts to your project.
For more information, see Next.js' documentaion on Manual OpenTelemetry configuration.
Consuming and reading the trace data
We suggest using the dev Docker setup provided by Next.js in the following repository:
OpenTelemetry Collector Demo.
Filtering the precise page requests can be achieved in Jaeger and Zipkin by the
http.route,
http.target,
next.route tags assigned to the traces by Next.js.
SSR Widget tracing
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.
Other tracing
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.