Nextjs

Install the IUDEX browser package

npm i iudex-web @vercel/otel

pnpm add iudex-web @vercel/otel

yarn add iudex-web @vercel/otel

bun add iudex-web @vercel/otel

Create a write-only API key 🔑

Click settings in the top left corner of the IUDEX dashboard and create a write-only API key.

Add IUDEX to your server 🚀

We will follow the first half of NextJS’s OpenTelemetry Guide then make a few changes to introduce IUDEX features and pipe the telemetry to the IUDEX backend which then can be viewed at https://app.iudex.ai/traces.

1. Add experimental.instrumentationHook = true in your next.config.js
2. Create a file instrumentation.ts in your project source root (or src if you’re using one).
3. Add this to instrumentation.ts

import { registerOTel } from '@vercel/otel';
import { registerOTelOptions } from 'iudex-web';
 
export function register() {
  // Make sure this sits at the top of the function
  const options = registerOTelOptions({
    serviceName: 'YOUR_SERVICE_NAME', // highly encouraged
    publicWriteOnlyIudexApiKey: 'YOUR_PUBLIC_WRITE_ONLY_KEY', // only ever commit your WRITE ONLY key
    githubUrl: 'GITHUB_URL_TO_YOUR_REPO', // Optional, this sets up code linking
  });
  registerOTel(options);
  
  // If you have Sentry or Datadog, move the initialization code here.
}

Add IUDEX to your frontend 🚀

In order to have frontend telemetry, you must be using ‘use client’ (more on that here). At the root component of your frontend code, often this is layout.tsx, add the following code snippet:

'use client';
import { instrument } from 'iudex';
instrument({
  serviceName: 'YOUR_SERVICE_NAME', // Highly encouraged
  publicWriteOnlyIudexApiKey: 'YOUR_PUBLIC_WRITE_ONLY_KEY', // Only ever commit your WRITE ONLY key
  githubUrl: 'GITHUB_URL_TO_YOUR_REPO', // Optional, this sets up code linking
});
//  ^ place this as high as possible in your code

Set up Slack alerts 📣

Click the Slack logo in the top right of the dashboard and follow the prompts.

Note: you must have admin permissions to add apps to your workspace.

Create a log 🪵

Add code to emit a log in your NextJS app.

For example:

export default function Page() {
  // Add this, will log on mount.
  useEffect(() => console.log('Hello IUDEX!', { ctx: { 'iudex.slack_channel_id': 'YOUR_SLACK_CHANNEL_ID' } }), []);
 
  return <div>Welcome to Next.js!</div>
}

Then run and open your Nextjs app to emit the log.

Verify 🧐

You should see the log in Slack and in your IUDEX dashboard log view.

Go in-depth 👉

Check out more in-depth guides on how to get the most out of IUDEX for your stack.