error-tracking

Configure Sentry for error tracking and performance monitoring in JavaScript applications.

1|Updated Jul 4, 2023
One-click install
npx skills add https://github.com/alkalisummer/nextjs-keylog --skill error-tracking-alkalisummer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: error-tracking
Source: https://github.com/alkalisummer/nextjs-keylog/tree/main/.claude/skills/error-tracking
Command: npx skills add https://github.com/alkalisummer/nextjs-keylog --skill error-tracking-alkalisummer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @sentry/nextjs, @sentry/react, @sentry/react-native, @sentry/vite-plugin, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers proactively identify, track, and fix errors in their applications, improving stability and user experience.

Core Features & Use Cases

  • Error Monitoring: Capture and aggregate errors from various platforms (Next.js, React, React Native).
  • Debugging Assistance: Provides context, source maps, and custom tags to pinpoint issues.
  • Alerting: Notifies teams of critical errors to enable rapid response.
  • Use Case: A production React Native app starts crashing for a subset of users. This Skill can be used to set up Sentry, capture the crash reports, and provide developers with the necessary information to deploy a fix.

Quick Start

Use the error-tracking skill to set up Sentry for a new Next.js project by running the wizard command.

Frequently Asked Questions about error-tracking

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Sentry error tracking in a Next.js application?

To set up Sentry error tracking in a Next.js application, you can use the provided wizard command to configure the @sentry/nextjs package. This enables automatic capturing of exceptions, performance monitoring, and source map uploads for debugging.

Can I monitor React Native crashes and capture user context with error tracking?

Yes, you can monitor React Native crashes and capture user context using the @sentry/react-native package. It allows you to attach custom tags and user context to crash reports, helping pinpoint issues affecting specific subsets of users.

What is the best way to track production errors across React and Next.js platforms?

The best way to track production errors across React and Next.js is by configuring Sentry to capture and aggregate exceptions. This approach provides debugging context, source maps, and alerting to notify teams of critical errors for rapid response.

Does Sentry error tracking support Vite plugin source map uploads for debugging?

Yes, Sentry error tracking supports Vite plugin source map uploads through the @sentry/vite-plugin dependency. This integration helps pinpoint issues by mapping minified production code back to your original source code.

How do I add custom tags and messages to Sentry exceptions for better debugging?

You can add custom tags and messages to Sentry exceptions by configuring the capture functions within your JavaScript application. This provides additional context for debugging and helps aggregate errors effectively.

Why do I need source map uploads when monitoring React production errors?

You need source map uploads when monitoring React production errors because minified code is unreadable. Uploading source maps translates the minified code back to original source, providing accurate context to pinpoint issues.