Skip to content

Wrapping Up!

What We’ve Covered

Throughout this workshop, you’ve gained hands-on experience with Sentry’s powerful error monitoring and debugging capabilities. Let’s recap what we’ve learned:

1. Setting Up Sentry in Laravel and React

We began by integrating Sentry into both our Laravel backend and React frontend:

  • Laravel Integration:

    • Added Sentry using Composer: composer require sentry/sentry-laravel
    • Configured the bootstrap/app.php file with Sentry integration
    • Set up the DSN and sample rates in the .env file
    • Verified the configuration using php artisan sentry:test

  • React Integration:

    • Installed the Sentry SDK for React
    • Configured tracing and replays
    • Set up source maps for better error tracking

  • Core Features Setup:

    • Real-time error monitoring with events enriched with debugging information
    • Performance monitoring using Web Vitals and Traces
    • Set up Session Replay for user interaction recording
    • Implemented custom spans for detailed performance analysis

2. Performance Monitoring and Optimization

We started by investigating performance issues in our Laravel application:

  • Route Performance Analysis: We identified that our main route was taking over 1.5 seconds to load, which is unacceptable for a marketplace application.
  • Trace View Implementation: We learned how to use Sentry’s trace view to break down performance bottlenecks.
  • Performance Insights: We discovered that 80% of the slowdown was coming from a /render call, while database queries were performing well.

3. Debugging Frontend Issues

We tackled a challenging frontend issue with the Add to Cart functionality:

  • Error Context Enrichment: We learned how to add meaningful context to errors by using Sentry.setContext().
  • Error Handling Best Practices: We implemented proper error handling with descriptive messages and user feedback.
  • UI/UX Improvements: We fixed the size selection logic to prevent users from selecting unavailable options.

4. Complex Checkout Issues

We solved a complex checkout problem using multiple Sentry features:

  • Seer AI Integration: We leveraged Sentry’s AI-powered debugging to identify root causes.
  • Session Replay: We used pixel-perfect session recordings to understand user interactions.
  • Breadcrumbs: We implemented event tracking to trace the sequence of actions leading to errors.
  • Cross-Project Debugging: We learned how Sentry can connect issues across different parts of your application (frontend and backend).

Advanced Debugging Techniques

Throughout these exercises, you’ve mastered several advanced debugging techniques:

  • Using custom spans to track performance bottlenecks
  • Implementing breadcrumbs to track user journeys
  • Leveraging AI-powered debugging with Seer
  • Using session replay to understand user interactions
  • Adding contextual information to errors
  • Debugging across multiple services and platforms

What’s Next?

Sentry offers many more features beyond what we’ve covered in this workshop. Here are some areas you might want to explore next:

Replays

See exactly what users experienced when errors occurred with pixel-perfect recreations of user sessions. Explore Session Replay

Seer AI

Leverage AI-powered debugging to automatically identify and fix issues in your codebase. Learn about Seer

Breadcrumbs

Track user journeys and system events leading up to errors for better context. Learn about Breadcrumbs

More Monitoring Solutions

  • Custom Spans: Create custom performance measurements for specific parts of your application.

  • Trace View: Get a complete picture of transactions as they propagate through your system.

Additional Resources

  • Sentry Documentation: Comprehensive guides and API references for all Sentry features.

  • Sentry Blog: Stay updated with the latest features, use cases, and best practices.

  • Sentry on GitHub: Explore Sentry’s open-source repositories and contribute to the project.

Final Thoughts

By implementing proper error monitoring and debugging practices as demonstrated in this workshop, you’re now equipped to build more resilient applications and provide better experiences for your users. Remember that the most effective debugging strategy combines multiple Sentry features:

  • Use performance monitoring to identify bottlenecks
  • Implement proper error handling with rich context
  • Leverage AI-powered debugging for complex issues
  • Track user journeys with breadcrumbs and session replay
  • Monitor cross-service interactions

We hope you found this workshop valuable and that you’ll continue exploring Sentry’s capabilities to enhance your application development workflow. Happy debugging!