CODEWITHSUNDEEP
next.jsintegrationdatadogapp-router
Eitan Avgil
Eitan Avgil

Reputation: 23

Integrate Datadog with NextJs with app router

I have an app written in NextJs 14 using the app router. My company is using Datadog, and I have integrated previously older react or nextJs apps without the app router. Typically these things would be integrated in the top level page/component and in a useEffect hook. Having NextJs with app-router this means the top level layout.tsx file, but here's the catch This file is a server-side page and not client (hence no hooks) I cannot add a use-client to this page, and U have tried to write the datadog initialization code in this file above the JSX but that did not triggered any logs.

Her's the code I have now which does not work on my layout.tsx

import React from 'react';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { NextIntlClientProvider, useMessages } from 'next-intl';
import { datadogLogs } from '@datadog/browser-logs';

const initDD = () => {
  datadogLogs.init({
    clientToken: process.env.NEXT_PUBLIC_DD_CLIENT as string,
    env: process.env.NEXT_PUBLIC_ENV as string,
    site: 'datadoghq.com',
    forwardConsoleLogs: ['error', 'info'],
    sessionSampleRate: 100,
    service: 'something',
  });
};
initDD();

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'something',
  description: 'something',
};

export default function RootLayout({
  children,
  params: { locale },
}: Readonly<{
  children: React.ReactNode;
  params: { locale: string };
}>) {
  const messages = useMessages();

  return (
    <html lang={locale}>
      <body className={inter.className}>
        <NextIntlClientProvider locale={locale} messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

I would be glad to receive any advice on Datadog or similar services that requires initialisations specifically on Next with app-router Thanks

I tried to look the web for that problem or a similar problems with app-router (also in older version of NextJs like 13) I have found some articles and post on integrate Datadog with NextJs but they were not using the app-router implementation method which is recommended now by the NextJs team

Since this feature is relatively new I would be happy to hear approaches to solve this. I believe this could be helpful to other integration with NextJs and app-router

Upvotes: 2

Views: 3213

Answers (1)

Youssouf Oumar
Youssouf Oumar

Reputation: 46191

If you want to keep you layout.ts as a server component, you can move the data dog initialiton part to a client component, that you import in your layout:

// components/InitDataDog.tsx

"use client";

import { datadogLogs } from "@datadog/browser-logs";
import { useEffect } from "react";

export default function InitDataDog() {
  useEffect(() => {
    const initDD = () => {
      datadogLogs.init({
        clientToken: process.env.NEXT_PUBLIC_DD_CLIENT as string,
        env: process.env.NEXT_PUBLIC_ENV as string,
        site: "datadoghq.com",
        forwardConsoleLogs: ["error", "info"],
        sessionSampleRate: 100,
        service: "something",
      });
    };
    initDD();
  }, []);
  return <></>;
}

// app/layout.tsx

import InitDataDog from "@/components/InitDataDog";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <InitDataDog />
        {children}
      </body>
    </html>
  );
}

Upvotes: 1

Related Questions