devtape-nextjs

devtape-nextjs

DevTape for Next.js — App Router and Pages Router route capture for causal browser failure timelines.

Install

npm install devtape-nextjs

Peer dependencies: Next.js 13+, React 18+.

App Router

"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { FailureRecorderProvider } from "devtape-react";
import { AppRouterNavigationProbe } from "devtape-nextjs";

export function Providers({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const search = useSearchParams().toString();

  return (
    <FailureRecorderProvider environment="development" overlay>
      <AppRouterNavigationProbe pathname={pathname} search={search}>
        {children}
      </AppRouterNavigationProbe>
    </FailureRecorderProvider>
  );
}

Pages Router

import { useEffect } from "react";
import { useRouter } from "next/router";
import { useFailureRecorder } from "devtape-react";
import { subscribePagesRouterNavigation } from "devtape-nextjs";

export function usePagesRouterCapture() {
  const router = useRouter();
  const handle = useFailureRecorder();

  useEffect(
    () => subscribePagesRouterNavigation(router, handle?.recorder),
    [router, handle?.recorder],
  );
}

License

MIT