Integrating with NextJS

See Working Example

NextJS runs on both the client and server, and errors can occur in either context. To get full coverage of errors, we recommend you use both the TrackJS browser agent as well as the NodeJS agent in an isomorphic pattern.

To do this in NextJS, create a trackjs-loader.ts file in the root of app:

export const TrackJS = (typeof window !== "undefined") ?
  require("trackjs").TrackJS :
  require("trackjs-node").TrackJS;

export function TrackJSInstall() {
  if (!TrackJS.isInstalled()) {
    TrackJS.install({
      token: "YOUR_TOKEN",
      /* other settings */
    });
  }
}

Client-Side Error Handling

To integrate the TrackJS loader to capture the client-side errors from NextJS, create a global-error.tsx in the root of app. This can be customized to show your own user error UI in addition to tracking the error.

"use client";

import NextError from "next/error";
import { useEffect } from "react";
import { TrackJS, TrackJSInstall } from "./trackjs-loader";

TrackJSInstall();

export default function GlobalError({ error, reset }) {

  useEffect(() => {
    TrackJS.track(error);
  }, [error]);

  return (
    <html>
      <body>
        {/* This is the default Next.js error component. */}
        <NextError statusCode={undefined as any} />
      </body>
    </html>
  );
}

NOTE global-error.tsx is only enabled in production builds of NextJS. To verify it’s functionality, build and run the code in production mode.

For more customization options, check out the Error Handling documentation in NextJS.

Server-Side Error Handling

There are some cases where the server-side components of NextJS will throw an error and it not be routed global-error.tsx. To capture these, you need to ensure that the TrackJS agent is installed in the server context as well.

The easiest way to do this is to install TrackJS from the root layout.tsx file. This will depend on the same trackjs-loader.ts file we created earlier.

import type { Metadata } from "next";
import { TrackJS, TrackJSInstall } from "./trackjs-loader";

TrackJSInstall();

export const metadata: Metadata = {...};

export default function RootLayout({ children }: Readonly) {
  return (/*your layout markup*/);
}

The NextJS ecosystem is evolving rapidly, so if you have any trouble with the integration, let us know!