如何配置 Rollbar 以使用应用程序路由与 next.js 14 集成？

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

我目前正在配置 Rollbar 以与 Next.js 集成，但是 Rollbar 上的文档 (https://docs.rollbar.com/docs/nextjs) 似乎有点过时了，因为它提到页面路由、pages/_document 和已弃用的旧版 api 函数 scuh 作为 getInitialProps。

虽然文档指出 Rollbar 可与页面路由器和应用程序路由器一起使用，但设置是相同的并使用旧的页面路由功能。

尽管如此，我还没有得到任何可以正常工作的东西，那么我应该如何使用应用程序路由器在 Next.js 14+ 中配置和设置 Rollbar？

作为参考，我做了一些研究：

  • 对于客户端配置，我可能可以避免使用pages/_document文件，并使用next/Script中的Script元素传入配置对象和Rollbar中的内联片段。

   <Script
       id='rollbar'
       dangerouslySetInnerHTML={{
           __html: `
               var _rollbarConfig = {
                   accessToken: 'token',
                   captureUncaught: true,
                   captureUnhandledRejections: true,
                   payload: {
                   environment: 'testenv',
                      // context: 'rollbar/test'
                      client: {
                          javascript: {
                              code_version: '1.0',
                              // source_map_enabled: true,
                              // guess_uncaught_frames: true
                          }
                      }
                  }
              };
              // Rollbar Snippet
              // ....
              // ....
              // End Rollbar Snippet
              `,
        }}
      />

这似乎有效，唯一的缺点是打字稿抱怨 window.Rollbar?.error() 因为 Rollbar 不存在（但这可能会被抑制）。

  • 对于服务器端配置，当服务器组件中发生错误时，haivng 会通读 Next.js 上的文档，并将其提升到最近的 error.jsx 文件，所以我猜测我可能需要通知 Rollbar 该文件中的错误，但是我没有任何有效的方法。

关于 Rollbar 如何与 Next.js 14 集成有什么想法吗？

next.js logging server-side client-side rollbar
1个回答
0
投票

您可以使用与应用程序路由器配合使用的 @rollbar/react npm 包，而不是使用 browser.js 步骤将 Rollbar 与 Next.js 集成 (https://www.npmjs.com/package/@rollbar/react) .

首先配置客户端和服务器rollbar实例：

import Rollbar from 'rollbar';

const baseConfig: Rollbar.Configuration = {
  captureUncaught: true,
  captureUnhandledRejections: true,
  environment: process.env.NODE_ENV,
};

export const clientConfig: Rollbar.Configuration = {
  accessToken: process.env.NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN,
  ...baseConfig,
};

export const serverInstance: Rollbar = new Rollbar({
  accessToken: process.env.ROLLBAR_SERVER_TOKEN,
  ...baseConfig,
});

然后就可以使用layout.tsx中RollbarProvider中的clientConfig了：

<RollbarProvider config={clientConfig}>
  <html lang='en'>
    <body className={`${geistSans.variable} ${geistMono.variable}`}>
      {children}
    </body>
  </html>
</RollbarProvider>

此时，rollbar 应该捕获任何未捕获或未处理的拒绝，但是您可以添加全局错误文件并手动调用 Rollbar 以确保记录任何错误：

'use client';
import { useRollbar } from '@rollbar/react';
import { useEffect } from 'react';

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
    const { rollbar } = useRollbar();
    useEffect(() => {
        rollbar.error(error);
    }, [error, rollbar]);


    return (
    <html>
      <body>
        <div>
          <h2>Something went wrong!</h2>
          <button onClick={() => reset()}>Try again</button>
        </div>
      </body>
    </html>
  );
}

然后，您还可以添加 middleware.ts 文件以从请求中捕获其他信息：

import { NextRequest, NextResponse } from 'next/server';
import { serverInstance as serverLogger } from './config/logger';

export function middleware(request: NextRequest) {
    serverLogger.configure({ payload: { context: request.nextUrl.pathname } });

    return NextResponse.next();
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.