BrainzLab JavaScript SDK - Stimulus controllers for full-stack observability
npm install @brainz_llc/jsJavaScript SDK for BrainzLab - Full-stack observability for JavaScript/TypeScript applications with Stimulus controllers.
``bash`
npm install @brainz_llc/jsor
yarn add @brainz_llc/js
Add to your config/importmap.rb:
`ruby`
pin "@brainz_llc/js", to: "https://cdn.jsdelivr.net/npm/@brainz_llc/js@0.1.1/dist/index.esm.js"
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
Then in your app/javascript/controllers/index.js:
`javascript
import { application } from "./application"
import { BrainzlabController } from "@brainz_llc/js"
application.register("brainzlab", BrainzlabController)
`
`javascript
// app/javascript/controllers/index.js
import { application } from "./application"
import { BrainzlabController } from "@brainz_llc/js"
application.register("brainzlab", BrainzlabController)
`
`erb data-brainzlab-endpoint-value="<%= ENV['BRAINZLAB_PLATFORM_URL'] %>"
data-brainzlab-api-key-value="<%= ENV['BRAINZLAB_API_KEY'] %>"
data-brainzlab-environment-value="<%= Rails.env %>"
data-brainzlab-service-value="my-app"
data-brainzlab-debug-value="<%= Rails.env.development? %>">
`
| Data Attribute | Description | Default |
|----------------|-------------|---------|
| endpoint-value | BrainzLab API endpoint | Required |api-key-value
| | Your BrainzLab API key | Required |environment-value
| | Environment name | production |service-value
| | Service/app name | - |release-value
| | Release/version | - |debug-value
| | Enable debug logging | false |sample-rate-value
| | Performance event sample rate (0-1) | 1.0 |enable-errors-value
| | Track JavaScript errors | true |enable-network-value
| | Track fetch/XHR requests | true |enable-performance-value
| | Track Web Vitals | true |enable-console-value
| | Track console output | true |
`javascript
import { init } from "@brainz_llc/js"
init({
endpoint: "https://platform.brainzlab.ai",
apiKey: "your-api-key",
environment: "production",
service: "my-app",
debug: false,
})
`
events
- Captures unhandled promise rejections
- Manual error capture with captureError(error)$3
- Intercepts fetch() requests
- Intercepts XMLHttpRequest requests
- Tracks request duration, status, and errors$3
- Core Web Vitals (LCP, FID, CLS, INP)
- Navigation timing (TTFB, FCP)
- Long task detection
- Slow resource detection$3
- Captures console.log, console.warn, console.error
- Truncates long messages automaticallyManual Event Tracking
`javascript
// Track custom events via Stimulus actions
data-brainzlab-name-param="button_click"
data-brainzlab-button-param="signup">
Sign Up
// Track page views (useful for SPA)
// Identify users
data-action="login:success->brainzlab#identify"
data-brainzlab-user-id-param="123"
data-brainzlab-traits-param='{"email":"user@example.com"}'>
MIT