scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-07 02:59:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 103

[Bug Fix] JS exception in User Agent Activity: Cannot read properties of undefined (#13892)

Browse source 
* fix allMauTags, allDauTags

* fix PerUserUsage
This commit is contained in:
Ishaan Jaff 2025-08-22 09:39:11 -07:00 • committed by GitHub
parent a31842ca54
commit dcf8cf7f0c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 43 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
ui/litellm-dashboard/src/components/per_user_usage.tsx
View file

@ -51,6 +51,8 @@ const PerUserUsage: React.FC<PerUserUsageProps> = ({
selectedTags,
formatAbbreviatedNumber,
}) => {
// Maximum number of user agent categories to show in charts to prevent color palette overflow
const MAX_USER_AGENTS = 8;
const [perUserData, setPerUserData] = useState<PerUserAnalyticsResponse>({
results: [],
total_count: 0,
@ -188,6 +190,18 @@ const PerUserUsage: React.FC<PerUserUsageProps> = ({
<BarChart
data={(() => {
// Get top user agents by frequency first
const userAgentCounts = new Map<string, number>();
perUserData.results.forEach((item: PerUserMetrics) => {
const agent = item.user_agent || "Unknown";
userAgentCounts.set(agent, (userAgentCounts.get(agent) || 0) + 1);
});
const topUserAgents = Array.from(userAgentCounts.entries())
.sort(([, a], [, b]) => b - a)
.slice(0, MAX_USER_AGENTS)
.map(([agent]) => agent);
// Categorize users by successful request count and user agent
const categories = {
"1-9 requests": { range: [1, 9], agents: {} as Record<string, number> },
@ -198,34 +212,30 @@ const PerUserUsage: React.FC<PerUserUsageProps> = ({
"100K+ requests": { range: [100000, Infinity], agents: {} as Record<string, number> },
};
// Count users in each category by user agent
// Count users in each category by user agent (only for top user agents)
perUserData.results.forEach((item: PerUserMetrics) => {
const successCount = item.successful_requests;
const userAgent = item.user_agent || "Unknown";
Object.entries(categories).forEach(([categoryName, category]) => {
if (successCount >= category.range[0] && successCount <= category.range[1]) {
if (!category.agents[userAgent]) {
category.agents[userAgent] = 0;
// Only process if this is one of the top user agents
if (topUserAgents.includes(userAgent)) {
Object.entries(categories).forEach(([categoryName, category]) => {
if (successCount >= category.range[0] && successCount <= category.range[1]) {
if (!category.agents[userAgent]) {
category.agents[userAgent] = 0;
}
category.agents[userAgent]++;
}
category.agents[userAgent]++;
}
});
});
}
});
// Get all unique user agents
const allUserAgents = new Set<string>();
Object.values(categories).forEach(category => {
Object.keys(category.agents).forEach(agent => allUserAgents.add(agent));
});
const userAgentsList = Array.from(allUserAgents).sort();
// Convert to chart data format for stacked bar chart
return Object.entries(categories).map(([categoryName, category]) => {
const dataPoint: Record<string, any> = { category: categoryName };
// Add count for each user agent
userAgentsList.forEach(agent => {
// Add count for each top user agent
topUserAgents.forEach(agent => {
dataPoint[agent] = category.agents[agent] || 0;
});
@ -234,12 +244,18 @@ const PerUserUsage: React.FC<PerUserUsageProps> = ({
})()}
index="category"
categories={(() => {
// Get all unique user agents for the chart categories
const allUserAgents = new Set<string>();
// Count user agents by frequency and get top ones
const userAgentCounts = new Map<string, number>();
perUserData.results.forEach((item: PerUserMetrics) => {
allUserAgents.add(item.user_agent || "Unknown");
const agent = item.user_agent || "Unknown";
userAgentCounts.set(agent, (userAgentCounts.get(agent) || 0) + 1);
});
return Array.from(allUserAgents).sort();
// Sort by frequency (most common first) and limit to top MAX_USER_AGENTS
return Array.from(userAgentCounts.entries())
.sort(([, a], [, b]) => b - a)
.slice(0, MAX_USER_AGENTS)
.map(([agent]) => agent);
})()}
colors={["blue", "green", "orange", "red", "purple", "yellow", "pink", "indigo"]}
valueFormatter={(value: number) => `${value} users`}

9
ui/litellm-dashboard/src/components/user_agent_activity.tsx
View file

@ -74,6 +74,9 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({
accessToken,
userRole,
}) => {
// Maximum number of categories to show in charts to prevent color palette overflow
const MAX_CATEGORIES = 10;
// Separate state for each endpoint
const [dauData, setDauData] = useState<ActiveUsersAnalyticsResponse>({ results: [] });
const [wauData, setWauData] = useState<ActiveUsersAnalyticsResponse>({ results: [] });
@ -265,9 +268,9 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({
.map(([tag]) => tag);
};
const allDauTags = getAllTagsForData(dauData.results);
const allWauTags = getAllTagsForData(wauData.results);
const allMauTags = getAllTagsForData(mauData.results);
const allDauTags = getAllTagsForData(dauData.results).slice(0, MAX_CATEGORIES);
const allWauTags = getAllTagsForData(wauData.results).slice(0, MAX_CATEGORIES);
const allMauTags = getAllTagsForData(mauData.results).slice(0, MAX_CATEGORIES);
// Prepare daily chart data (DAU) - always show last 7 days
const generateDailyChartData = () => {