Biome GritQL plugin to enforce browserLogger instead of console in React components

README.md

Biome Plugin: no-console-in-tsx

A custom Biome GritQL plugin that prevents direct console.* usage in React components (.tsx files).

Why?

I use OpenObserve for centralized log aggregation. To ensure all browser logs are captured and sent to OpenObserve, I created a browserLogger utility that wraps console methods and forwards logs to my observability backend.

This plugin enforces that pattern by flagging any direct console.log, console.error, console.warn, console.info, or console.debug calls in React components as errors.

Why not use Biome's built-in noConsoleLog?

Biome has a built-in noConsoleLog rule, but I chose to write a custom plugin instead. The custom error message "Use browserLogger instead of console in React components" provides clear guidance that LLMs (like Claude, Cursor, etc.) can understand and act on when fixing code.

The Plugin

See no-console-in-tsx.grit in this gist.

Configuration

Add the plugin to your biome.json using overrides to apply it only to .tsx files:

{
  "overrides": [
    {
      "includes": ["**/*.tsx"],
      "plugins": ["./plugins/no-console-in-tsx.grit"]
    }
  ]
}

Usage

Run Biome as usual:

bunx biome check .

Any console.* calls in .tsx files will be flagged with:

Use browserLogger instead of console in React components

no-console-in-tsx.grit

or {
    `console.log($args)`,
    `console.error($args)`,
    `console.warn($args)`,
    `console.info($args)`,
    `console.debug($args)`
} as $console where {
    register_diagnostic(
        span = $console,
        message = "Use browserLogger instead of console in React components",
        severity = "error"
    )
}