Skip to content

Enhanced logs flag #215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AlemTuzlak merged 2 commits into from
Aug 21, 2025
Merged

Enhanced logs flag #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d37aa62
enhance logs flag & leak fix
AlemTuzlak Aug 21, 2025
7456acc
Merge branch 'main' into enhanced-logs-flag
AlemTuzlak Aug 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34,980 changes: 17,490 additions & 17,490 deletions docs/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

131 changes: 67 additions & 64 deletions docs/posts/main/configuration/general.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,67 @@
---
title: React Router Devtools General Configuration
description: General Configuration options for the React Router Devtools to interface with your editor
---

import Warn from "./warn.tsx";

This covers the general configuration options for the React Router Devtools.

## General Config

```ts
type GeneralConfig = {
pluginDir?: string
includeInProd?: {
client?: boolean
server?: boolean
}

}
```

## `pluginDir`

The relative path to your plugin directory. If you have a directory for react-router-devtools plugins you can point to it and they
will be automatically imported and added to the dev tools.

## `includeInProd`

This option is used to set whether the plugin should be included in production builds or not.

By default it is set to `undefined` and if you set this option to an object with the `client`, `context` and `server` properties set to `true` the plugin will be included in production builds.

The client part includes the dev tools with the plugin and the server part includes the info logs. You can granularly configure the
exact behavior of both sides with client and server configs respectively.


Each of these flags will include a part of the plugin in production, in order for any of these to work `react-router-devtools` need to be switched over to
a regular dependency and included in your project. If you only want to include the `devTools` helper in production, for example, you can
set `includeInProd` to `{ devTools: true }` and the `devTools` part will be included in production and available always.

<Warn title="Be careful!">
If you decide to deploy parts to production you should be very careful that you don't expose the dev tools to your clients or anybody
who is not supposed to see them. Also the server part uses chalk which might not work in non-node environments!

Also, if you wish to edit the plugin server config in production you can set `process.rdt_config` to an object with the same shape as the
config object and it will be used instead of the default production config (`{ silent: true }`).
</Warn>

```ts
import { reactRouterDevTools } from "react-router-devtools";

export default defineConfig({
plugins: [
reactRouterDevTools({
includeInProd: {
client: true,
server: true,
devTools: true
},
}),
],
});
```
---
title: React Router Devtools General Configuration
description: General Configuration options for the React Router Devtools to interface with your editor
---

import Warn from "./warn.tsx";

This covers the general configuration options for the React Router Devtools.

## General Config

```ts
type GeneralConfig = {
pluginDir?: string
includeInProd?: {
client?: boolean
server?: boolean
}

}
```
## enhancedLogs

This configuration flag enables/disables enhanced logs feature.

## `pluginDir`

The relative path to your plugin directory. If you have a directory for react-router-devtools plugins you can point to it and they
will be automatically imported and added to the dev tools.

## `includeInProd`

This option is used to set whether the plugin should be included in production builds or not.

By default it is set to `undefined` and if you set this option to an object with the `client`, `context` and `server` properties set to `true` the plugin will be included in production builds.

The client part includes the dev tools with the plugin and the server part includes the info logs. You can granularly configure the
exact behavior of both sides with client and server configs respectively.


Each of these flags will include a part of the plugin in production, in order for any of these to work `react-router-devtools` need to be switched over to
a regular dependency and included in your project. If you only want to include the `devTools` helper in production, for example, you can
set `includeInProd` to `{ devTools: true }` and the `devTools` part will be included in production and available always.

<Warn title="Be careful!">
If you decide to deploy parts to production you should be very careful that you don't expose the dev tools to your clients or anybody
who is not supposed to see them. Also the server part uses chalk which might not work in non-node environments!

Also, if you wish to edit the plugin server config in production you can set `process.rdt_config` to an object with the same shape as the
config object and it will be used instead of the default production config (`{ silent: true }`).
</Warn>

```ts
import { reactRouterDevTools } from "react-router-devtools";

export default defineConfig({
plugins: [
reactRouterDevTools({
includeInProd: {
client: true,
server: true,
devTools: true
},
}),
],
});
```
35 changes: 35 additions & 0 deletions docs/posts/v1.0.0/_index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
title: Quick Start
hidden: true
toc: false
---

import Info from './info.tsx'

This documentation covers everything you need to know to get started with `react-router-devtools`.

## Prerequisites

- React Router version **7.0** or higher.
- Your project needs to run on **ESM**. If you are using CommonJS, you will need to convert your project to ESM.

## Why ESM?

In order to use the full feature-set of **Vite** the project has to run on ESM. This is because Vite exposes a websocket
that **react-router-devtools** uses to communicate with the server. This websocket is **only** available in ESM projects
because it's exposed by `import.meta` which is only available in ESM.

To avoid creating user confusion and giving you a subpar experience, we have decided to only support ESM projects running on Vite.


## Why use `react-router-devtools`?

`react-router-devtools` is a set of tools that help you to develop your React Router application.

They help you, but are not limited to, to do the following things:
- **Loader data display** - You can see the data that is being loaded by your loaders.
- **Route display** - You can see the routes that are being used by your application in list/tree format.
- **Error tracking** - You can see invalid HTML rendered on your page and where it's coming from.
- **Hydration mismatch tracking** - You can see if there are any hydration mismatches in your application, what was rendered on the client and what was rendered on the server.
- **Server logs** - You can see the logs of your server in the browser.
- **Route boundaries** - You can see the route boundaries by hovering over elements.
202 changes: 202 additions & 0 deletions docs/posts/v1.0.0/configuration/client.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
---
title: React Router Devtools Client Configuration
description: Configuration options for the React Router Devtools client
---

import Info from "./info.tsx";
import Warn from "./warn.tsx";

<Info>
All of the following options can be set in the dev tools panel **"Settings page"** and they override the default ones. Your preferences are
stored in localStorage and if they do not exist there the default ones are used.
</Info>

Before we explain all the possible options here is the client configuration Typescript type:

```ts
type RdtClientConfig = {
position: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle-left" | "middle-right";
liveUrls: { name: string, url: string }[];
liveUrlsPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right";
defaultOpen: boolean;
expansionLevel: number;
height: number;
minHeight: number;
maxHeight: number;
hideUntilHover: boolean;
panelLocation: "top" | "bottom";
requireUrlFlag: boolean;
urlFlag: string;
breakpoints: {name: string, min: number, max: number }[],
routeBoundaryGradient: "sea" | "hyper" | "gotham" | "gray" | "watermelon" | "ice" | "silver";
showBreakpointIndicator: boolean;
showRouteBoundariesOn: "hover" | "click";
}
```

Let's go through each option and see what it does.

## Live URLs

This option is used to set the live urls that will be displayed in the bottom left corner of the screen. The default value is an empty array.
It allows you to specify multiple live urls that you can use to open the current page in a new tab.

## Live URLs position

This option is used to set the position of the live urls that will be displayed in the bottom left corner of the screen. The possible values are:
- `top-left` - the live urls will be positioned at the top left corner of the screen
- `top-right` - the live urls will be positioned at the top right corner of the screen
- `bottom-left` - the live urls will be positioned at the bottom left corner of the screen
- `bottom-right` - the live urls will be positioned at the bottom right corner of the screen

## Position

This option is used to set the position of the React Router Devtools trigger (the button that opens the panel). The possible values are:
- `top-left` - the trigger will be positioned at the top left corner of the screen
- `top-right` - the trigger will be positioned at the top right corner of the screen
- `bottom-left` - the trigger will be positioned at the bottom left corner of the screen
- `bottom-right` - the trigger will be positioned at the bottom right corner of the screen
- `middle-left` - the trigger will be positioned at the middle left of the screen
- `middle-right` - the trigger will be positioned at the middle right of the screen

## Default Open

This option is used to set the initial state of the panel. If set to `true` the panel will be open by default, if set to `false`
the panel will be closed by default.

## Expansion Level

This option is used to set the initial expansion level of the returned JSON data in the **Active Page** tab. By default it is set to
1 and if you open up the **Active Page** and look at the returned loader data it will look like this:

```ts
"data": { ... } +
```

If you set the expansion level to 1 the returned loader data will look like this:

```ts
"data": {
"property": "value"
}
```

## Height

This option is used to set the initial height of the panel. The default value is 400px.

## Min Height

This option is used to set the minimum height of the panel. The default value is 200px.

## Max Height

This option is used to set the maximum height of the panel. The default value is 800px.

## Hide Until Hover

This option is used to set whether the trigger should be hidden until you hover over it. The default value is `false`.

## Panel Location

This option is used to set the location of the panel. The possible values are:
- `top` - the panel will be positioned at the top of the screen
- `bottom` - the panel will be positioned at the bottom of the screen

## Require URL Flag

This option is used to set whether the panel should be opened only if the URL contains a specific flag. The default value is `false`.

<Warn title="Be careful!">
If you set this option to `true` and you forget to set the URL flag, the panel will hide and you will not be able to see it
until you enter the url flag.

The default one is `rdt=true` and if you set this option to `true` you will have to add `?rdt=true` to the URL in order to see the panel.
</Warn>

## URL Flag

This option is used to set the URL flag that is required to open the panel. The default value is `rdt`.

You can set it to whatever you wish and if you set the **Require URL Flag** option to `true` you will have to add `?yourFlag=true` to the URL in order to see the panel.

## Route Boundary Gradient

This option is used to set the color of the route boundary gradient. The possible values are:
- `sea`
- `hyper`
- `gotham`
- `gray`
- `watermelon`
- `ice`
- `silver`

<Info>
This changes the color of the route boundary gradient in the **Active Page** tab. When you hover over any route in the panel it will show you it's boundaries.
</Info>

The default value is `ice`.

## Breakpoints

This option allows you to define custom breakpoints that show in the bottom left corner of the panel to help you determine the current screen breakpoint you have defined.
By default the breakpoints are set to tailwind breakpoints but you can change them to whatever you want.

Eg:
```ts
breakpoints: [{name: "lg", min: 0, max: 768}, {name: "xl", min: 768, max: 1024}, {name: "2xl", min: 1024, max: Infinity}],
```

## Show breakpoint indicator

This option allows you to show/hide the current breakpoint in the bottom left corner of the panel.

## Show route boundaries on

This option allows you to either show route boundaries when you hover a route segment on the pages tab or
it shows a dedicated button called "Show Route Boundary" that shows the route boundary for that route on click.

Default value is `click`;

## Creating a custom configuration

To create a custom configuration you can use the following code snippet:

```ts
import { defineRdtConfig } from "react-router-devtools";

const customConfig = defineRdtConfig({
client: {
position: "top-right",
defaultOpen: true,
expansionLevel: 1,
height: 500,
minHeight: 300,
maxHeight: 1000,
hideUntilHover: true,
panelLocation: "bottom",
requireUrlFlag: true,
urlFlag: "customFlag",
routeBoundaryGradient: "gotham",
breakpoints: [{name: "lg", min: 0, max: 768}, {name: "xl", min: 768, max: 1024}, {name: "2xl", min: 1024, max: Infinity}],
showBreakpointIndicator: false
}
});

export default customConfig;
```

Then you can use this configuration in your `vite.config.js` file like this:

```ts
import customConfig from "./rdt.config";
import { reactRouterDevTools } from "react-router-devtools";

export default defineConfig({
plugins: [reactRouterDevTools(customConfig)],
});
```

<Info title="Try it out!">
Try opening up the dev tools panel deployed on this site and playing around with the settings in the settings tab!
</Info>
Loading
Loading