将 Datadog 与 NextJs 与应用程序路由器集成

问题描述 投票：0回答：1

我有一个使用应用程序路由器在 NextJs 14 中编写的应用程序。 我的公司正在使用 Datadog，并且我集成了以前较旧的 React 或 nextJs 应用程序，而无需应用程序路由器。 通常这些东西会集成在顶级页面/组件和 useEffect 挂钩中。让 NextJs 与 app-router 一起使用，这意味着顶级的 layout.tsx 文件，但这里有一个问题 该文件是服务器端页面而不是客户端页面（因此没有钩子） 我无法在此页面添加 

use-client
，并且您尝试在 JSX 上方的文件中编写 datadog 初始化代码，但这没有触发任何日志。

她是我现在拥有的代码，但不适用于我的

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>
  );
}

我很高兴收到有关 Datadog 或类似服务的任何建议，这些服务需要专门在 Next 上使用应用程序路由器进行初始化 谢谢

我尝试在网上查找该问题或应用程序路由器的类似问题（也在旧版本的 NextJs 中，例如 13） 我找到了一些关于将 Datadog 与 NextJs 集成的文章和帖子，但他们没有使用 NextJs 团队现在推荐的应用程序路由器实现方法

由于此功能相对较新，我很高兴听到解决此问题的方法。我相信这可能有助于与 NextJs 和 app-router 的其他集成

next.js integration datadog app-router
1个回答
0
投票

如果您想将 

layout.ts
保留为服务器组件，您可以将数据狗初始化部分移动到您在布局中导入的客户端组件：

// 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>
  );
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.