Bill/obsidian-mcp-server
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

debug: add diagnostic logging to settings UI rendering

Browse Source 
Add try-catch blocks and console logging to identify where settings UI
stops rendering. This will help diagnose why API key and config sections
are not appearing after authentication was made mandatory.

Diagnostic additions:
- Wrap auth description section in try-catch
- Wrap API key section in try-catch
- Log encryption availability status
- Log API key length
- Log successful section rendering
- Display user-friendly error messages if rendering fails
This commit is contained in:
Bill Ballou
2025-10-25 23:43:23 -04:00
parent 1a42f0f88e
commit f6234c54b0
1 changed files with 80 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/settings.ts
View File

@@ -61,70 +61,94 @@ export class MCPServerSettingTab extends PluginSettingTab {
// Authentication (Always Enabled) // Authentication (Always Enabled)
containerEl.createEl('h3', {text: 'Authentication'}); containerEl.createEl('h3', {text: 'Authentication'});
const authDesc = containerEl.createEl('p', { try {
text: 'Authentication is required for all requests. Your API key is encrypted and stored securely using your system\'s credential storage.' const authDesc = containerEl.createEl('p', {
}); text: 'Authentication is required for all requests. Your API key is encrypted and stored securely using your system\'s credential storage.'
authDesc.style.fontSize = '0.9em'; });
authDesc.style.color = 'var(--text-muted)'; authDesc.style.fontSize = '0.9em';
authDesc.style.marginBottom = '16px'; authDesc.style.color = 'var(--text-muted)';
authDesc.style.marginBottom = '16px';
// Show encryption status // Show encryption status
const encryptionStatus = containerEl.createEl('p', { const encryptionAvailable = isEncryptionAvailable();
text: isEncryptionAvailable() console.log('[Settings] Encryption available:', encryptionAvailable);
? '🔒 Encryption: Available (using system keychain)'
: '⚠️ Encryption: Unavailable (API key stored in plaintext)' const encryptionStatus = containerEl.createEl('p', {
}); text: encryptionAvailable
encryptionStatus.style.fontSize = '0.85em'; ? '🔒 Encryption: Available (using system keychain)'
encryptionStatus.style.marginBottom = '12px'; : '⚠️ Encryption: Unavailable (API key stored in plaintext)'
encryptionStatus.style.fontStyle = 'italic'; });
encryptionStatus.style.fontSize = '0.85em';
encryptionStatus.style.marginBottom = '12px';
encryptionStatus.style.fontStyle = 'italic';
} catch (error) {
console.error('[Settings] Error in auth description section:', error);
containerEl.createEl('p', {
text: '⚠️ Error displaying authentication section: ' + (error instanceof Error ? error.message : String(error)),
cls: 'mod-error'
});
}
// API Key Display (always show - auth is always enabled) // API Key Display (always show - auth is always enabled)
new Setting(containerEl) console.log('[Settings] About to render API key section');
.setName('API Key Management') console.log('[Settings] API key length:', (this.plugin.settings.apiKey || '').length);
.setDesc('Use this key in the Authorization header as Bearer token');
// Create a full-width container for buttons and key display try {
const apiKeyContainer = containerEl.createDiv({cls: 'mcp-api-key-section'}); new Setting(containerEl)
apiKeyContainer.style.marginBottom = '20px'; .setName('API Key Management')
apiKeyContainer.style.marginLeft = '0'; .setDesc('Use this key in the Authorization header as Bearer token');
// Create button container // Create a full-width container for buttons and key display
const apiKeyButtonContainer = apiKeyContainer.createDiv({cls: 'mcp-api-key-buttons'}); const apiKeyContainer = containerEl.createDiv({cls: 'mcp-api-key-section'});
apiKeyButtonContainer.style.display = 'flex'; apiKeyContainer.style.marginBottom = '20px';
apiKeyButtonContainer.style.gap = '8px'; apiKeyContainer.style.marginLeft = '0';
apiKeyButtonContainer.style.marginBottom = '12px';
// Copy button // Create button container
const copyButton = apiKeyButtonContainer.createEl('button', {text: '📋 Copy Key'}); const apiKeyButtonContainer = apiKeyContainer.createDiv({cls: 'mcp-api-key-buttons'});
copyButton.addEventListener('click', async () => { apiKeyButtonContainer.style.display = 'flex';
await navigator.clipboard.writeText(this.plugin.settings.apiKey || ''); apiKeyButtonContainer.style.gap = '8px';
new Notice('✅ API key copied to clipboard'); apiKeyButtonContainer.style.marginBottom = '12px';
});
// Regenerate button // Copy button
const regenButton = apiKeyButtonContainer.createEl('button', {text: '🔄 Regenerate Key'}); const copyButton = apiKeyButtonContainer.createEl('button', {text: '📋 Copy Key'});
regenButton.addEventListener('click', async () => { copyButton.addEventListener('click', async () => {
this.plugin.settings.apiKey = generateApiKey(); await navigator.clipboard.writeText(this.plugin.settings.apiKey || '');
await this.plugin.saveSettings(); new Notice('✅ API key copied to clipboard');
new Notice('✅ New API key generated'); });
if (this.plugin.mcpServer?.isRunning()) {
new Notice('⚠️ Server restart required for API key changes to take effect');
}
this.display();
});
// API Key display (static, copyable text) // Regenerate button
const keyDisplayContainer = apiKeyContainer.createDiv({cls: 'mcp-api-key-display'}); const regenButton = apiKeyButtonContainer.createEl('button', {text: '🔄 Regenerate Key'});
keyDisplayContainer.style.padding = '12px'; regenButton.addEventListener('click', async () => {
keyDisplayContainer.style.backgroundColor = 'var(--background-secondary)'; this.plugin.settings.apiKey = generateApiKey();
keyDisplayContainer.style.borderRadius = '4px'; await this.plugin.saveSettings();
keyDisplayContainer.style.fontFamily = 'monospace'; new Notice('✅ New API key generated');
keyDisplayContainer.style.fontSize = '0.9em'; if (this.plugin.mcpServer?.isRunning()) {
keyDisplayContainer.style.wordBreak = 'break-all'; new Notice('⚠️ Server restart required for API key changes to take effect');
keyDisplayContainer.style.userSelect = 'all'; }
keyDisplayContainer.style.cursor = 'text'; this.display();
keyDisplayContainer.style.marginBottom = '16px'; });
keyDisplayContainer.textContent = this.plugin.settings.apiKey || '';
// API Key display (static, copyable text)
const keyDisplayContainer = apiKeyContainer.createDiv({cls: 'mcp-api-key-display'});
keyDisplayContainer.style.padding = '12px';
keyDisplayContainer.style.backgroundColor = 'var(--background-secondary)';
keyDisplayContainer.style.borderRadius = '4px';
keyDisplayContainer.style.fontFamily = 'monospace';
keyDisplayContainer.style.fontSize = '0.9em';
keyDisplayContainer.style.wordBreak = 'break-all';
keyDisplayContainer.style.userSelect = 'all';
keyDisplayContainer.style.cursor = 'text';
keyDisplayContainer.style.marginBottom = '16px';
keyDisplayContainer.textContent = this.plugin.settings.apiKey || '';
console.log('[Settings] API key section rendered successfully');
} catch (error) {
console.error('[Settings] Error rendering API key section:', error);
containerEl.createEl('p', {
text: '⚠️ Error displaying API key: ' + (error instanceof Error ? error.message : String(error)),
cls: 'mod-error'
});
}
// MCP Client Configuration (show always, regardless of auth) // MCP Client Configuration (show always, regardless of auth)
containerEl.createEl('h3', {text: 'MCP Client Configuration'}); containerEl.createEl('h3', {text: 'MCP Client Configuration'});