Performance Monitoring - Sentry/Analytics

Monitoring errors and performance in production.

Sentry Setup 🐛

1npm install @sentry/nextjs

1// sentry.client.config.ts
2import * as Sentry from "@sentry/nextjs";
3
4Sentry.init({
5  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
6  tracesSampleRate: 1.0,
7  environment: process.env.NODE_ENV
8});

Error Boundaries

1'use client';
2
3import { Component, ReactNode } from 'react';
4import * as Sentry from '@sentry/nextjs';
5
6class ErrorBoundary extends Component<
7  { children: ReactNode },
8  { hasError: boolean }
9> {
10  state = { hasError: false };
11
12  static getDerivedStateFromError() {
13    return { hasError: true };
14  }
15
16  componentDidCatch(error: Error, errorInfo: any) {
17    Sentry.captureException(error, { contexts: { react: errorInfo } });
18  }
19
20  render() {
21    if (this.state.hasError) {
22      return <div>Something went wrong</div>;
23    }
24    return this.props.children;
25  }
26}

See you soon! 🚀