Skip to main content
Glama
error-scenarios.ts2.88 kB
// TypeScript file with Vue-specific error scenarios console.log('Vue error scenarios starting...'); // 1. Vue compilation errors interface User { name: string; age: number; } // TypeScript error: Type 'string' is not assignable to type 'number' const invalidUser: User = { name: "John", age: "thirty" as any // This will cause runtime issues }; // 2. Reactive system errors import { ref, reactive, computed } from 'vue'; const userData = ref<User | null>(null); // Error: Trying to access properties of null try { console.log(userData.value!.name); } catch (error) { console.error('Vue Ref Error:', error); } // 3. Computed property errors const computedValue = computed(() => { // Error: Accessing undefined property return (userData.value as any).profile.details.email; }); try { console.log(computedValue.value); } catch (error) { console.error('Vue Computed Error:', error); } // 4. Watchers with errors import { watch } from 'vue'; watch(() => userData.value, (newValue) => { // Error: Accessing properties without null check console.log(newValue!.name.toUpperCase()); }, { immediate: true }); // 5. Async component errors async function loadUserData() { try { const response = await fetch('https://invalid-vue-api.nonexistent/users'); const data = await response.json(); userData.value = data; } catch (error) { console.error('Vue Async Error:', error); throw new Error('Failed to load user data in Vue component'); } } loadUserData().catch(error => { console.error('Unhandled Vue async error:', error); }); // 6. Event handler errors export function handleUserClick() { try { // Error: Method call on undefined (userData.value as any).save(); } catch (error) { console.error('Vue Event Handler Error:', error); } } // 7. Template compilation errors (would show during build) // These would cause compilation failures: // - Missing closing tags // - Invalid directive names // - Incorrect v-for syntax // 8. Router errors try { // Simulating router navigation error throw new Error('NavigationDuplicated: Avoided redundant navigation to current location'); } catch (error) { console.error('Vue Router Error:', error); } // 9. Store/Pinia errors const invalidStoreAction = () => { try { // Error: Accessing store before initialization const store = null; (store as any).dispatch('nonexistentAction'); } catch (error) { console.error('Vue Store Error:', error); } }; invalidStoreAction(); // 10. Lifecycle hook errors export function simulateLifecycleError() { try { // Error: Calling lifecycle hook outside component (null as any).onMounted(() => { console.log('This will fail'); }); } catch (error) { console.error('Vue Lifecycle Error:', error); } } simulateLifecycleError(); console.log('Vue error scenarios completed.');

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/standardbeagle/brummer'

If you have feedback or need assistance with the MCP directory API, please join our Discord server