Copilot/setup sentry nextjs (#58)
* Revise portfolio: warm brown theme, elegant typography, optimized analytics tracking (#55) * Initial plan * Update color theme to warm brown and off-white, add elegant fonts, fix analytics tracking Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Fix 404 page integration with warm theme, update admin console colors, fix font loading Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Address code review feedback: fix navigation, add utils, improve tracking Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Fix accessibility and memory leak issues from code review Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * chore: Code cleanup, add Sentry.io monitoring, and documentation (#56) * Initial plan * Remove unused code and clean up console statements Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Remove unused components and fix type issues Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Wrap console.warn in development check Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Integrate Sentry.io monitoring and add text editing documentation Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Initial plan * feat: Add Sentry configuration files and example pages - Add sentry.server.config.ts and sentry.edge.config.ts - Update instrumentation.ts with onRequestError export - Update instrumentation-client.ts with onRouterTransitionStart export - Update global-error.tsx to capture exceptions with Sentry - Create Sentry example page at app/sentry-example-page/page.tsx - Create Sentry example API route at app/api/sentry-example-api/route.ts Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * feat: Update middleware to allow Sentry example page and fix deprecated API - Update middleware to exclude /sentry-example-page from locale routing - Remove deprecated startTransaction API from Sentry example page - Use consistent DSN configuration with fallback values Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * refactor: Improve Sentry configuration with environment-based sampling - Add comments explaining DSN fallback values - Use environment-based tracesSampleRate (10% in production, 100% in dev) - Address code review feedback for production-safe configuration Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> --------- Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
denshooter
@@ -1,58 +1,73 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useRef, useCallback } from 'react';
|
||||
import { useWebVitals } from '@/lib/useWebVitals';
|
||||
import { trackEvent, trackPageLoad } from '@/lib/analytics';
|
||||
import { debounce } from '@/lib/utils';
|
||||
|
||||
interface AnalyticsProviderProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }) => {
|
||||
const hasTrackedInitialView = useRef(false);
|
||||
const hasTrackedPerformance = useRef(false);
|
||||
const currentPath = useRef('');
|
||||
|
||||
// Initialize Web Vitals tracking - wrapped to prevent crashes
|
||||
// Hooks must be called unconditionally, but the hook itself handles errors
|
||||
useWebVitals();
|
||||
|
||||
// Track page view - memoized to prevent recreation
|
||||
const trackPageView = useCallback(async () => {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
const path = window.location.pathname;
|
||||
|
||||
// Only track if path has changed (prevents duplicate tracking)
|
||||
if (currentPath.current === path && hasTrackedInitialView.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
currentPath.current = path;
|
||||
hasTrackedInitialView.current = true;
|
||||
|
||||
const projectMatch = path.match(/\/projects\/([^\/]+)/);
|
||||
const projectId = projectMatch ? projectMatch[1] : null;
|
||||
|
||||
// Track to Umami (if available)
|
||||
trackEvent('page-view', {
|
||||
url: path,
|
||||
referrer: document.referrer,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
|
||||
// Track to our API - single call
|
||||
try {
|
||||
await fetch('/api/analytics/track', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'pageview',
|
||||
projectId: projectId,
|
||||
page: path
|
||||
})
|
||||
});
|
||||
} catch (error) {
|
||||
// Silently fail
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error('Error tracking page view:', error);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
// Wrap entire effect in try-catch to prevent any errors from breaking the app
|
||||
try {
|
||||
|
||||
// Track page view
|
||||
const trackPageView = async () => {
|
||||
const path = window.location.pathname;
|
||||
const projectMatch = path.match(/\/projects\/([^\/]+)/);
|
||||
const projectId = projectMatch ? projectMatch[1] : null;
|
||||
|
||||
// Track to Umami (if available)
|
||||
trackEvent('page-view', {
|
||||
url: path,
|
||||
referrer: document.referrer,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
|
||||
// Track to our API
|
||||
try {
|
||||
await fetch('/api/analytics/track', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'pageview',
|
||||
projectId: projectId,
|
||||
page: path
|
||||
})
|
||||
});
|
||||
} catch (error) {
|
||||
// Silently fail
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error('Error tracking page view:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Track page load performance - wrapped in try-catch
|
||||
try {
|
||||
trackPageLoad();
|
||||
@@ -66,8 +81,12 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
// Track initial page view
|
||||
trackPageView();
|
||||
|
||||
// Track performance metrics to our API
|
||||
// Track performance metrics to our API - only once
|
||||
const trackPerformanceToAPI = async () => {
|
||||
// Prevent duplicate tracking
|
||||
if (hasTrackedPerformance.current) return;
|
||||
hasTrackedPerformance.current = true;
|
||||
|
||||
try {
|
||||
if (typeof performance === "undefined" || typeof performance.getEntriesByType !== "function") {
|
||||
return;
|
||||
@@ -98,7 +117,7 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
si: 0 // Speed Index - would need to calculate
|
||||
};
|
||||
|
||||
// Send performance data
|
||||
// Send performance data - single call
|
||||
await fetch('/api/analytics/track', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -117,7 +136,7 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
console.warn('Error collecting performance data:', error);
|
||||
}
|
||||
}
|
||||
}, 2000); // Wait 2 seconds for page to stabilize
|
||||
}, 2500); // Wait 2.5 seconds for page to stabilize
|
||||
} catch (error) {
|
||||
// Silently fail
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
@@ -130,26 +149,26 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
if (document.readyState === 'complete') {
|
||||
trackPerformanceToAPI();
|
||||
} else {
|
||||
window.addEventListener('load', trackPerformanceToAPI);
|
||||
window.addEventListener('load', trackPerformanceToAPI, { once: true });
|
||||
}
|
||||
|
||||
// Track route changes (for SPA navigation)
|
||||
const handleRouteChange = () => {
|
||||
setTimeout(() => {
|
||||
trackPageView();
|
||||
trackPageLoad();
|
||||
}, 100);
|
||||
};
|
||||
// Track route changes (for SPA navigation) - debounced
|
||||
const handleRouteChange = debounce(() => {
|
||||
// Track new page view (trackPageView will handle path change detection)
|
||||
trackPageView();
|
||||
trackPageLoad();
|
||||
}, 300);
|
||||
|
||||
// Listen for popstate events (back/forward navigation)
|
||||
window.addEventListener('popstate', handleRouteChange);
|
||||
|
||||
// Track user interactions
|
||||
const handleClick = (event: MouseEvent) => {
|
||||
// Track user interactions - debounced to prevent spam
|
||||
const handleClick = debounce((event: unknown) => {
|
||||
try {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
const target = event.target as HTMLElement | null;
|
||||
const mouseEvent = event as MouseEvent;
|
||||
const target = mouseEvent.target as HTMLElement | null;
|
||||
if (!target) return;
|
||||
|
||||
const element = target.tagName ? target.tagName.toLowerCase() : 'unknown';
|
||||
@@ -168,7 +187,7 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
console.warn('Error tracking click:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
}, 500);
|
||||
|
||||
// Track form submissions
|
||||
const handleSubmit = (event: SubmitEvent) => {
|
||||
@@ -191,10 +210,10 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
}
|
||||
};
|
||||
|
||||
// Track scroll depth
|
||||
// Track scroll depth - debounced
|
||||
let maxScrollDepth = 0;
|
||||
const firedScrollMilestones = new Set<number>();
|
||||
const handleScroll = () => {
|
||||
const handleScroll = debounce(() => {
|
||||
try {
|
||||
if (typeof window === 'undefined' || typeof document === 'undefined') return;
|
||||
|
||||
@@ -223,7 +242,7 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
console.warn('Error tracking scroll:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
}, 1000);
|
||||
|
||||
// Add event listeners
|
||||
document.addEventListener('click', handleClick);
|
||||
@@ -270,7 +289,12 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
// Cleanup
|
||||
return () => {
|
||||
try {
|
||||
// Remove load handler if we added it
|
||||
// Cancel any pending debounced calls to prevent memory leaks
|
||||
handleRouteChange.cancel();
|
||||
handleClick.cancel();
|
||||
handleScroll.cancel();
|
||||
|
||||
// Remove event listeners
|
||||
window.removeEventListener('load', trackPerformanceToAPI);
|
||||
window.removeEventListener('popstate', handleRouteChange);
|
||||
document.removeEventListener('click', handleClick);
|
||||
@@ -290,7 +314,7 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
// Return empty cleanup function
|
||||
return () => {};
|
||||
}
|
||||
}, []);
|
||||
}, [trackPageView]);
|
||||
|
||||
// Always render children, even if analytics fails
|
||||
return <>{children}</>;
|
||||
|
||||
Reference in New Issue
Block a user