Configuring Signoz in your Next.js Supabase SaaS kit

Signoz is an open source monitoring provider that you can use to monitor your application. It's fully self-hostable and can be installed in your own infrastructure.

Install Signoz plugin

The Signoz package is released as a plugin in the Plugins repository. You can fetch it by running the following command:

npx @makerkit/cli@latest plugins install

Now, install the Signoz package in the monitoring package:

pnpm --filter "@kit/monitoring" add "@kit/signoz"

Registering the Provider

Add the snippet below at the bottom of the file:

// Register the Signoz provider
monitoringProviderRegistry.register('signoz', async () => {
  const { SignozProvider } = await import('@kit/signoz/provider');
  return {
    default: function SignozProviderWrapper({
      children,
    }: React.PropsWithChildren) {
      return <SignozProvider>{children}</SignozProvider>;
    },
  };
});

Register instrumentation

Add the snippet below at the bottom of the file:

instrumentationRegistry.register('signoz', async () => {
  const { register } = await import('@kit/signoz/instrumentation');
  return {
    register,
  };
});

Register monitoring service

Add the snippet below at the bottom of the file:

// Register the 'signoz' monitoring service
serverMonitoringRegistry.register('signoz', async () => {
  const { SignozServerMonitoringService } = await import('@kit/signoz/server');
  return new SignozServerMonitoringService();
});

Environment Variables

Below are the complete environment variables required to set up Signoz:

NEXT_PUBLIC_MONITORING_PROVIDER=signoz
NEXT_PUBLIC_OTEL_SERVICE_NAME=makerkit
NEXT_PUBLIC_SIGNOZ_INGESTION_KEY='clientkey'
NEXT_PUBLIC_SIGNOZ_INGESTION_URL=http://localhost:4318/v1/logs
OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318
OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=http://localhost:4318/v1/traces
OTEL_EXPORTER_OTLP_TRACES_PROTOCOL=http/protobuf
OTEL_EXPORTER_OTLP_LOGS_ENDPOINT=http://localhost:4318/v1/logs
OTEL_RESOURCE_ATTRIBUTES="service.name=makerkit,service.version=1.2.3"
OTEL_EXPORTER_OTLP_HEADERS="signoz-ingestion-key=clientkey"

The above will allow you to run Signoz locally in Docker.

To run Signoz locally you can follow the guide on Signoz.io.

When you go to production, you must update the above environment variables according to your remote Signoz instance's settings.

Unsupported Functionality

Logging

Due to some issues between Next.js and the OpenTelemetry transport library for Pino (the logger we use by default) - we're currently unable to send logs to Signoz. The workaround seems to be to use a different supported logger, such as Winston.

Switch to Winston

Fortunately, Makerkit's modular architecture allows you to easily switch to a different logger.

You can switch to Winston by updating the LOGGER environment variable to winston in the .env.local file.

LOGGER=winston

Then, you can update the logger implementation in the packages/shared/src/logger/index.ts file to use Winston.

// Register the 'console' logger implementation
loggerRegistry.register('winston', async () => {
  const { Logger: WinstonLogger } = await import('./impl/winston');
  return WinstonLogger;
});

You can then update the logger implementation in the packages/shared/src/logger/impl/winston.ts file to use Winston.

Complete the integration with Winston

Follow the instrunctions for setting up Signoz and Winston to complete the integration.