Devtools context

Using the devtools context to trace events and send them to the network tab

TanStack DevTools Integration

React Router Devtools v6+ integrates with TanStack DevTools, providing enhanced debugging capabilities alongside React Router specific features. The devtools now include:

React Router specific tabs (Active Page, Routes, Network, Timeline, Settings)
TanStack DevTools panels for advanced state inspection
Unified debugging experience with seamless integration

You can configure TanStack-specific behavior through the general configuration.

Devtools extended context

The devtools context is a set of utilities that you can use in your data fetching functions to trace events in the network tab of react-router-devtools. You can also include them in your production builds if you do not want the hassle of having to optionally check if they are defined.

The general usage of the devtools context is as follows:

// The devTools object is available in all data fetching functions
export const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
  const tracing = devTools?.tracing;
  // tracing is a set of utilities to be used in your data fetching functions to trace events
  // in network tab of react-router-devtools
  const end = tracing.start("my-event")
  // do something here, eg DB call
  end()
  return "data"
}

You can also use the devtools context in your action functions:

export const action = async ({ request, devTools }: ActionFunctionArgs) => {
  const tracing = devTools?.tracing;
  // tracing is a set of utilities to be used in your data fetching functions to trace events
  // in network tab of react-router-devtools
  const end = tracing?.start("my-event")
  // do something
  end()
  return "data"
}

The devtools context is also available in your client loader and client action functions:

export const clientLoader = async ({ request, devTools }: ClientLoaderFunctionArgs) => {
  const tracing = devTools?.tracing;
  // tracing is a set of utilities to be used in your data fetching functions to trace events
  // in network tab of react-router-devtools
  const end = tracing?.start("my-event")
  // do something
   end()
  return "data"
}

export const clientAction = async ({ request, devTools }: ClientActionFunctionArgs) => {
  const tracing = devTools?.tracing;
  // tracing is a set of utilities to be used in your data fetching functions to trace events
  // in network tab of react-router-devtools
  const end = tracing?.start("my-event")
  // do something
   end()
  return "data"
}

Good to know

If you want to make the devTools available always in your project, you can set includeInProd to { devTools: true } in your vite config.

In production the trace calls won't do anything, but the tracing will be more convinient to use.

If you do so you can also override the types by adding the following to your project:

import type { ExtendedContext } from "react-router-devtools/context";

declare module "react-router" {
 interface LoaderFunctionArgs {
   devTools: ExtendedContext
 }
 interface ActionFunctionArgs {
   devTools: ExtendedContext
 }
}

RouteId

The routeId is a string that is used to identify the route that is being processed. You can access it like so:

const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
  const routeId = devTools?.routeId;
  // do something with the routeId
  return "data"
}

Tracing

The tracing object contains all the utilities related to network tab tracing feature of react-router-devtools.

There are two functions you can use:

trace
start

trace

The trace function is a function that will trace the event given to it, pipe it to the network tab of react-router-devtools and show you analytics.

This works by calling the provided function and analyzing the time it takes to execute it.

const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
  const tracing = devTools?.tracing;
  // this will be traced in the network tab of react-router-devtools
  const user = tracing?.trace("my-event",() => getUser())
  return { user }
}

Parameters

name - The name of the event
event - The event to be traced

Returns

The result of the event

start

The start function is a function that will start a trace for the name provided to it and return the start time. This is used together with end to trace the time of the event.

export const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
  const tracing = devTools?.tracing;
  // this will be traced in the network tab of react-router-devtools
  const end = tracing?.start("my-event")
  // do something here, eg DB call

  // End the trace
   end()
  return "data"
}

Warning

This function relies on you using the endreturned from it, otherwise the event will never end in your devtools

Parameters

name - The name of the event

Returns

The end trace function