Open in ChatGPTOpen in Claude

Next.js

The Coralogix RUM SDK is a library (plugin) for Next.js that provides telemetry instrumentation. Learn how to integrate with Coralogix's Real User Monitoring (RUM).

What you need

Selecting the SendRumData preset makes the API key public, so you cannot combine it with other role presets. Conversely, a key with the SendData preset must remain secret, and carries no RUM permissions.

• Source-map key: a separate Team key with the SourceMapping preset. The RUM CLI uses it at build time to upload source maps.

Installation

1. Create a file named coralogix.tsx in the app folder and include the following code:
   

   • For SDK version 2.1.0 and above:
     

   'use client';
   import { CoralogixRum } from '@coralogix/browser';
   
   export default function CoralogixRumInit() {
     CoralogixRum.init({
       environment: 'test',
       application: 'my-app',
       version: '1.0.0',
       public_key: 'my-key-123',
       coralogixDomain: 'EU2',
     });
   
     return null;
   }

   • For SDK version below 2.1.0:

   'use client';
   import { useEffect } from 'react';
   
   export default function CoralogixRumInit() {
     useEffect(() => {
     initializeCoralogixRUM();
     }, []);
   
   return null;
   }
   
   export const initializeCoralogixRUM = async () => {
     const { CoralogixRum } = await import('@coralogix/browser');
     
     CoralogixRum.init({
     environment: 'test',
     application: 'my-app',
     version: '1.0.0',
     public_key: 'my-key-123',
     coralogixDomain: 'EU2',
   });
   };

2. In your main tsx file, call CoralogixRumInit.

import CoralogixRumInit from "@/app/coralogix";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  return (
      <html lang="en">
      <body>
      <CoralogixRumInit/>
      {children}
      </body>
      </html>
  );
}