Tooling

Logging

Reatom has incredible capabilities for debugging and tracing your code. We will publish our devtools soon, but now you can use connectLogger for simple (or not!) logging.

main.tsx

import './setup' // import setup file before all other modules!
import ReactDOM from 'react-dom/client'
import { App } from './app'

const root = ReactDOM.createRoot(document.getElementById('root')!)
root.render(<App />)

For better logging, you can use built-in log function, it will forward all arguments to the native console.log.

setup.ts

import { connectLogger, log } from '@reatom/core'

if (import.meta.env.MODE === 'development') {
  connectLogger()
}

declare global {
  var LOG: typeof log
}
globalThis.LOG = log

Log action

log may give you huge DX impact:

• the name is short name and handy
• it will trace the relative call stack and show each time
• you can put it everywhere and commit to the source code, logs will not be visible in production
• you can extend it!

log is an action, which means you can extend it with withCallHook or other action extensions to add custom behavior (e.g., sending logs to a remote service, filtering specific log types, etc.).

import { withCallHook } from '@reatom/core'

LOG.extend(
  withCallHook((params) => {
    // Send logs to a remote service
    sendToAnalytics({ level: 'debug', args: params })
  }),
)

Eslint

We recommend using ESLint to enforce best practices and coding standards in your Reatom projects. We will publish our own ESLint plugin for name autofix soon, but you can use this plugin right now to automate action, computed, effect naming:

• https://github.com/artalar/eslint-plugin-react-component-name

{
  "plugins": ["react-component-name"],
  "rules": {
    "prefer-arrow-callback": ["error", { "allowNamedFunctions": true }],

    "react-component-name/react-component-name": [
      "error",
      {
        "targets": ["action", "computed", "effect", "reatomComponent"]
      }
    ]
  }
}

Global Extensions

You can automatically track all Reatom entities (atoms and actions) in your application using global extensions. This is particularly useful for analytics, monitoring, debugging, or logging.

Track user interactions by monitoring action calls:

analytics.ts

import { addGlobalExtension, isAction, withCallHook } from '@reatom/core'

addGlobalExtension((target) => {
  if (isAction(target)) {
    target.extend(
      withCallHook((payload, params) => {
        analytics.track('action_called', {
          action: target.name,
          timestamp: Date.now(),
          params: JSON.stringify(params),
        })
      }),
    )
  }
  return target
})

Tip

Call addGlobalExtension early in your application initialization, before creating any atoms or actions. Extensions are applied only to entities created after registration.

You can learn more about extensions development in the Extensions chapter.