{"id":13756529,"url":"https://github.com/effector/logger","last_synced_at":"2025-04-04T22:08:32.616Z","repository":{"id":38987844,"uuid":"235765794","full_name":"effector/logger","owner":"effector","description":"Simple logger with stores inspector","archived":false,"fork":false,"pushed_at":"2024-01-19T23:02:31.000Z","size":1997,"stargazers_count":160,"open_issues_count":11,"forks_count":22,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-10-29T20:18:22.469Z","etag":null,"topics":["effector","inspector","log","logger"],"latest_commit_sha":null,"homepage":"https://npmjs.com/effector-logger","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/effector.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":null,"patreon":"sergeysova","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.buymeacoffee.com/sergeysova","https://vk.com/sovadev"]}},"created_at":"2020-01-23T09:50:31.000Z","updated_at":"2024-08-27T15:24:08.000Z","dependencies_parsed_at":"2024-01-22T03:54:11.873Z","dependency_job_id":null,"html_url":"https://github.com/effector/logger","commit_stats":{"total_commits":164,"total_committers":18,"mean_commits":9.11111111111111,"dds":0.6341463414634146,"last_synced_commit":"6a81462d00302019473be681f78e06629a30ce3a"},"previous_names":["sergeysova/effector-logger"],"tags_count":26,"template":false,"template_full_name":"toastyboost/rollup-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effector%2Flogger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effector%2Flogger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effector%2Flogger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effector%2Flogger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/effector","download_url":"https://codeload.github.com/effector/logger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256115,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["effector","inspector","log","logger"],"created_at":"2024-08-03T11:00:46.282Z","updated_at":"2025-04-04T22:08:32.600Z","avatar_url":"https://github.com/effector.png","language":"TypeScript","funding_links":["https://patreon.com/sergeysova","https://www.buymeacoffee.com/sergeysova","https://vk.com/sovadev"],"categories":["Packages","TypeScript"],"sub_categories":[],"readme":"# Effector Logger\n\nPretty logger for stores, events, effects and domains.\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n| ![Chrome-DevTools-Console](https://i.imgur.com/Pp4zPKy.png)      |\n| ---------------------------------------------------------------- |\n| ![Chrome-DevTools-Console-Dark](https://i.imgur.com/Vg54DsD.png) |\n\n## Installation\n\n```bash\nnpm add effector\nnpm add --dev effector-logger\n```\n\nor yarn\n\n```bash\nyarn add effector\nyarn add -D effector-logger\n```\n\n\u003e Note: **effector-logger** requires `effector` to be installed\n\n## Usage\n\n### Prepare metadata\n\nTo make logs more useful we need additional metadata (like names, locations in the code, etc), which is provided by one of the `effector` plugins.\n\n#### Babel-plugin\n\nBabel-plugin is built-in in the `effector` package.\n\nJust add it to your babel configuration.\n\n```json\n{\n  \"plugins\": [\"effector/babel-plugin\"]\n}\n```\n\nIt is also useful to enable `loc` generation for dev environment, to see for exact locations of units in the code.\n\n```json\n{\n  \"plugins\": [[\"effector/babel-plugin\", { \"addLoc\": true }]]\n}\n```\n\n[Read the docs](https://effector.dev/docs/api/effector/babel-plugin/#usage)\n\n#### SWC Plugin\n\n[Read effector SWC plugin documentation](https://github.com/effector/swc-plugin)\n\n### Start logging\n\nJust call `attachLogger` in your entrypoint module.\n\nNOTE: To \"see\" the `createStore`, `createEvent`, etc calls `effector-logger` needs to be imported at the very top of your entrypoint module. This way initial states of stores will be properly logged at the moment of `attachLogger` call.\n\nUpdate logs are not affected by import order.\n\n```ts\n// src/index.tsx\nimport { attachLogger } from 'effector-logger';\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { App } from './app';\nimport { appStarted } from './shared/app-events';\n\nattachLogger();\n\nappStarted();\n\ncreateRoot(document.querySelector('#app')).render(\u003cApp /\u003e);\n```\n\nAfter that you will see the logs in your console.\n\n### With `Scope`\n\nIf your app uses scope (e.g. you have Server-Side-Rendering) - you will need to pass it to the logger to work.\n\n```ts\nattachLogger({ scope });\n```\n\nUpdates related to provided scope will be prefixed with scope id.\n\n### Name\n\nThere optional `name` prefix to the logs.\nIt can be useful if there are few instances of your app, which are using different scopes or if you just want prefix that is better than boring scope id.\n\n```ts\nattachLogger({\n  scope,\n  name: `my-cool-app-${appId}`, // all logs will be prefixed with this string\n});\n```\n\n### Stop logs\n\nTo stop logs just call unsubscribe function.\n\n```ts\nconst unlogger = attachLogger();\n\nunlogger();\n```\n\n### Hide any unit from log\n\nSometimes it is required to hide some events or stores from log.\nIt is simple to implement: just call `configure` on your unit.\n\n```ts\nimport { createEvent } from 'effector';\nimport { configure } from 'effector-logger';\nimport { $data, loadDataFx } from './model';\n\nconst pageMounted = createEvent\u003cnumber\u003e();\n\nconfigure(pageMounted, { log: 'disabled' });\n\n// You can pass multiple units as array\nconfigure([$data, loadDataFx], { log: 'disabled' });\n```\n\n### Force any unit to be logged\n\nBy default only non-derived units are logged. If you want to force some unit to be logged, use configure `enabled`\n\n```ts\nimport { createEvent } from 'effector';\nimport { configure } from 'effector-logger';\nimport { $data, loadDataFx } from './model';\n\nconst pageMounted = createEvent\u003cnumber\u003e();\n\nconst mappedMounted = pageMounter.map((x) =\u003e x);\n\nconfigure(mappedMounted, { log: 'enabled' });\n\n// You can pass multiple units as array\nconfigure([$data, loadDataFx], { log: 'enabled' });\n```\n\n## Redux DevTools support\n\nRedux DevTools is moved to a different package.\n\nSee the [`@effector/redux-devtools-adapter`](https://github.com/effector/redux-devtools-adapter)\n\n## Contributors ✨\n\nThanks go to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Laiff\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/575885?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrey Antropov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/sergeysova/effector-logger/commits?author=Laiff\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://sova.dev\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/5620073?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSergey Sova\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/sergeysova/effector-logger/commits?author=sergeysova\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Sozonov\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/1931637?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSozonov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/sergeysova/effector-logger/commits?author=Sozonov\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## Release process\n\n1. Check out the [draft release](https://github.com/effector/logger/releases).\n1. All PRs should have correct labels and useful titles. You can [review available labels here](https://github.com/effector/logger/blob/master/.github/release-drafter.yml).\n1. Update labels for PRs and titles, next [manually run the release drafter action](https://github.com/effector/logger/actions/workflows/release-drafter.yml) to regenerate the draft release.\n1. Review the new version and press \"Publish\"\n1. If required check \"Create discussion for this release\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feffector%2Flogger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feffector%2Flogger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feffector%2Flogger/lists"}