Our review
Uses ProviderObserver to log or debug Riverpod provider lifecycle events.
Strengths
- Enables centralized logging of provider state changes
- Works with any Riverpod provider
- Supports custom analytics integration
- Named providers provide clearer logs
Limitations
- May not capture in-place mutations accurately
- Requires manual setup for code-generated providers
- Performance impact if logging is verbose in production
When you need to track provider state changes for debugging, analytics, or monitoring in a Riverpod application.
For simple apps where provider state is trivial and logging is unnecessary.
Security analysis
SafeNo execution risk; skill only describes a debugging pattern in Dart.
No concerns found
Examples
Show me how to create a ProviderObserver that logs provider state changes in Riverpod.How can I debug changes to a specific Riverpod provider using ProviderObserver?I want to use Riverpod ProviderObserver to send analytics events when providers update. Give me an example.name: riverpod-observers description: Use ProviderObserver to log or debug Riverpod provider lifecycle; didUpdateProvider, ProviderScope observers, naming providers. Use when adding logging, analytics, or debugging for provider state changes. Use this skill when the user asks about ProviderObserver, logging Riverpod, or debugging provider updates.
Riverpod — ProviderObservers
Instructions
A ProviderObserver receives lifecycle events for providers (e.g. when a provider's value changes). Use it for logging, analytics, or debugging.
Implementing an observer
Extend ProviderObserver and override the methods you need (e.g. didUpdateProvider). Pass instances to ProviderScope or ProviderContainer via the observers parameter.
Example: logger
final class Logger extends ProviderObserver {
@override
void didUpdateProvider(
ProviderObserverContext context,
Object? previousValue,
Object? newValue,
) {
print('{"provider": "${context.provider}", "newValue": "$newValue"}');
}
}
void main() {
runApp(
ProviderScope(
observers: [Logger()],
child: const MyApp(),
),
);
}
Naming providers
For clearer logs, give providers a name:
final myProvider = Provider<int>((ref) => 0, name: 'MyProvider');
With code generation, a name is usually assigned automatically.
Note on mutations
If state is mutated in place (e.g. a List with ref.notifyListeners), previousValue and newValue in didUpdateProvider may be the same reference. For distinct values, clone before mutating.
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.