Debugging studio errors and schema issues in Sanity.io

Great question! Debugging Studio errors can be tricky since some errors get caught and handled by Studio's internal error boundaries before browser debuggers can intercept them. Here are some effective techniques:

Check the Browser Console

The first place to look is your browser's developer console. Studio errors are usually logged there with stack traces. Open DevTools (F12 or Cmd+Option+I on Mac) and check the Console tab for any red error messages.

Inspect the Error Overlay

When Studio encounters errors, it typically displays an error overlay with details. Look for:

• The error message and stack trace
• Which component or field is causing the issue
• Any validation errors or schema problems

Common Issues to Check

Based on this community discussion, here are frequent culprits:

Schema problems:

• Missing name property on schema types
• Incorrect schema structure when adding schemas via plugins
• Type mismatches or validation errors

Custom code issues:

• Errors in custom document actions
• Problems with custom input components
• Issues in plugin configurations

Debugging Techniques

Add console.log statements: Place them in your schema definitions, custom components, or plugin code to trace execution flow.

Check your sanity.config.ts: Make sure all schemas are properly imported and configured, especially if you're adding them via plugins.

Validate your schema: Use TypeScript to catch type errors early. If you're using defineType and defineField helpers, they provide better type checking.

Inspect the Network tab: Check if there are failed API requests that might be causing issues.

Try the Vision plugin: Use the Vision tool in Studio to test GROQ queries and verify your data structure.

Why Debugger Misses Some Errors

If your browser's "pause on exceptions" isn't catching errors, it's because Studio's error boundaries are catching them first before they bubble up to the browser's exception handler. This is intentional - it prevents the entire Studio from crashing and instead shows you a helpful error overlay.

In these cases, focus on:

1. The console output (which still logs the error)
2. The error overlay information
3. Stack traces that show file paths and line numbers

The console output should give you enough detail to track down the source. Look for the file paths and line numbers in the stack trace to identify where the error originates - often it's a schema configuration issue or a problem with how you're adding schemas through plugins.