npm install @sentry/react @sentry/node
// main.tsx — initialize FIRST
import * as Sentry from '@sentry/react';
Sentry.init({
dsn: import.meta.env.VITE_SENTRY_DSN,
environment: import.meta.env.MODE,
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration(),
],
// Sample 10% of transactions
// for performance monitoring
tracesSampleRate: 0.1,
// Record 1% of sessions
// for session replay
replaysSessionSampleRate: 0.01,
// Record 100% of sessions
// WITH errors for replay
replaysOnErrorSampleRate: 1.0,
});
// Add user context after login
function onLogin(user: User) {
Sentry.setUser({
id: user.id,
email: user.email,
username: user.name,
});
}
// Clear on logout
function onLogout() {
Sentry.setUser(null);
}
// server.ts — initialize FIRST
const Sentry = require('@sentry/node');
Sentry.init({
dsn: process.env.SENTRY_DSN,
environment: process.env.NODE_ENV,
tracesSampleRate: 0.1,
});
// Express: Sentry request handler
// (must be FIRST middleware)
app.use(Sentry.Handlers.requestHandler());
// ... all your routes here ...
// Express: Sentry error handler
// (must be LAST middleware, before
// your own error handler)
app.use(Sentry.Handlers.errorHandler());
// Your error handler after Sentry's
app.use((err, req, res, next) => {
res.status(err.statusCode || 500).json({
error: 'Internal server error',
requestId: req.requestId,
// Sentry event ID for reference
sentryId: res.sentry,
});
});
# In CI pipeline after build:
npm install -D @sentry/cli
npx sentry-cli releases new $VERSION
npx sentry-cli releases files $VERSION \
upload-sourcemaps ./dist \
--url-prefix '~/'
npx sentry-cli releases finalize $VERSION
# Now: production errors show
# ORIGINAL source code line numbers,
# not minified bundle positions.
# FilterPicker.tsx:42
# not a.js:1:4832
// Throw a test error in production:
app.get('/api/test-sentry',
(req, res) => {
throw new Error(
'Sentry test: this should appear'
+ ' in the dashboard');
});
// Visit the endpoint →
// See the error in Sentry within seconds
// Set up Slack alerts:
// Sentry → Settings → Integrations
// → Slack → Configure
// Alert rule: notify on new issues
// in #production-alerts channel
git switch -c devops/PIXELCRAFT-083-sentry
git add src/ server/
git commit -m "Integrate Sentry error tracking (PIXELCRAFT-083)"
git push origin devops/PIXELCRAFT-083-sentry
# PR → Review → Merge → Close ticket ✅
Observability = Logs + Metrics + Traces.
Sentry provides error tracking — a specialized form of logging with stack traces, breadcrumbs, and session replay. At scale, you need all three pillars.