Even Sentry Won’t Take It — Why Should I? I’m Done with This Job!
# Frontend Issues but Always “User Not Found”
*A Deep Dive into Troubleshooting with Sentry*
## Background
At a mid-sized company, our team maintained a **SaaS system** for C-end customers.
We released product updates every **two weeks** and regularly gathered feedback via customer service.
Before long, a recurring but puzzling issue emerged:
- Some customers reported: *“The page does nothing, it’s frozen.”*
- Others: *“Clicking buttons doesn’t work — frontend is dead.”*
- Still others: *“An error appears, and the page is blank.”*
---
## First Steps: Backend Check
We first checked backend API logs — everything looked normal:
- **No errors**
- **No exceptions**
- No `500` responses
Naturally, suspicion shifted to the **frontend**.
---
## Frontend’s Struggle
The frontend team reported frustrations:
- User feedback was vague (“It won’t open”) — no screenshots, reproduction steps, or OS/browser info
- These issues were isolated, **barely reproducible**
- Standard advice — clear cache, refresh, relog — **rarely worked**
Frontend devs worked overtime, testing across browsers and tweaking compatibility without knowing if fixes actually worked.
---
## Proposal: Add Frontend Monitoring
One frontend teammate suggested:
> “Let’s add a frontend monitoring service like **Sentry** — it automatically reports JS errors and makes debugging easier.”
The idea was well-received… until **Ops disagreed**.
---
## Ops Pushback: “We Already Monitor Backends”
Ops explained:
- The company already had a monitoring system — **backend-focused**
- Frontend monitoring like Sentry requires **self-hosting** (due to data privacy), needing a **dedicated 4-core / 8GB RAM server**
- Frontend issues are *“isolated user cases — no need to waste resources”*
Result: **Proposal initially rejected**.
---
## Breakthrough: Friendly Conversation
Eventually, the frontend lead had a frank conversation with Ops, stressing **the necessity of frontend monitoring**.
Outcome: The **self-hosted Sentry frontend monitoring system officially launched** 🎉.
---
## Why Monitoring Matters (From a Backend Dev’s Perspective)
As a backend dev, I knew Sentry well for:
- API error tracking
- Service anomaly reporting
Initially, I underestimated frontend monitoring — “just refresh the page if it freezes.”
After writing frontend for C-end users, I experienced firsthand **the nightmare of guessing bugs without data**.
**Lesson:** Monitoring turns *blind bug hunting* into *data-driven debugging*.
---
## Benefits of Sentry
### 1. **Error Reporting**
Automatically captures:
- Error type, message, file name, stack trace
- User navigation path
- Browser/OS info
With SourceMap, errors map back to original source files.
### 2. **Performance Monitoring**
Measures:
- First paint load time
- Route switch latency
- Resource load duration
### 3. **Custom Event Tracking**
Manually log business exceptions — e.g., failed orders, failed logins, API timeouts.
---
## Deployment Options
### **SaaS (Cloud)**
- Use [sentry.io](https://sentry.io/welcome/)
- Free tier: 5000 events/day
- Great for quick validation
### **Self-Hosted**
- Full data control, unlimited events
- Requires:
- 4-core CPU, 8GB RAM
- Redis, PostgreSQL, Cron jobs
- Higher setup/maintenance cost
---
## Vue3 Integration Guide (Example)
1. **Install Sentry SDK**
pnpm add @sentry/vue
2. **Initialize in `sentry.ts`**
import * as Sentry from "@sentry/vue";
import type { App } from "vue";
export function setupSentry(app: App) {
Sentry.init({
app,
dsn: import.meta.env.VITE_SENTRY_DSN,
environment: import.meta.env.MODE || 'development',
release: __RELEASE__,
debug: true,
tracesSampleRate: 1.0,
});
}
3. **Call in `main.ts`**
import { createApp } from 'vue'
import App from './App.vue'
import { setupSentry } from './sentry'
const app = createApp(App)
setupSentry(app)
app.mount('#app')
---
## Why Use Environment Variables?
- **Flexibility:** Different environments use different DSNs/names.
- **Security:** Avoid hardcoding sensitive info.
Example `.env.production`:
VITE_SENTRY_DSN=yourDSN
VITE_SENTRY_RELEASE=yourProject@1.0.0
---
## Enhancing Error Capture
### 1. **Vue Component-Level Errors**app.config.errorHandler = (err, vm, info) => {
Sentry.captureException(err);
};
### 2. **Unhandled Promise Rejections**window.addEventListener("unhandledrejection", e => {
Sentry.captureException(e.reason);
});
### 3. **Global JS Errors**window.addEventListener("error", e => {
Sentry.captureException(e.error || e.message);
});
---
## Manual Error Reporting
export function reportError(error: unknown, context?: string) {
Sentry.captureException(error, { tags: context ? { context } : undefined });
}
export function safeExecute(fn: () => void, context?: string) {
try {
fn();
} catch (err) {
reportError(err, context);
}
}
---
## Adding Context (User/Device Info)
Sentry.setUser({ id: "user123", username: "John Doe" });
Sentry.setContext("device", {
brand: "Apple",
model: "MacBookPro",
os: "macOS",
browser: "Safari",
});
---
## Breadcrumbs: Recording User Actions
router.afterEach((to) => {
Sentry.addBreadcrumb({
category: "navigation",
message: `Entered page: ${to.fullPath}`,
});
});
---
## SourceMap Essentials
Without `.map` files, production error stacks are unreadable.
**Upload `.map` files to Sentry** and **delete from production** afterwards.
---
## Replay Integration (Session Recording)
import { browserTracingIntegration, replayIntegration } from "@sentry/vue";
Sentry.init({
integrations: [
browserTracingIntegration({ router }),
replayIntegration({ maskAllText: false, blockAllMedia: false }),
],
replaysOnErrorSampleRate: 1.0,
});
---
## Performance Monitoring
Sentry.init({
integrations: [browserTracingIntegration({ router })],
tracesSampleRate: 1.0,
});
---
## Alerts
Set alerts for:
- First occurrence
- Repeat in short period
- Many users affected
---
## Self-Hosting Tips
- Use Docker image from [Sentry docs](https://develop.sentry.dev/self-hosted/)
- Add HTTPS via Nginx for security
---
## Conclusion
Integrating Sentry in the frontend is **absolutely worth it**:
- Faster bug localization
- Full user context + breadcrumbs
- Performance insights
- Compliance-ready via self-hosting
> Proactive monitoring reduces downtime & frustration, improves user experience, and saves countless debugging hours.
---
