Can AI Predict Code Impact? A Cursor‑Powered Frontend Analysis Case Study

1. Introduction

"Just changed one utility function, why did five pages break?" and "I added an optional prop and the app crashed" are typical surprises when maintaining legacy front‑end code. The root cause is often not insufficient testing but a lack of pre‑test risk assessment, i.e., code impact analysis.

2. Traditional vs. AI

Common methods include global keyword search in VS Code and AST‑based tools that map call chains, but they only reveal syntactic relationships and miss semantic changes, such as altering a price unit from yuan to cents, which can cause disastrous display errors.

We wondered whether AI could fill this gap, for example, whether Cursor can understand "what exactly changed" and infer downstream effects.

3. MVP Attempt: Using Cursor for Code Impact Analysis

We built a semi‑automatic tool based on Cursor, consisting of three steps.

Step 1: Extract Code Diff

Using Node and child_process, we run Git commands to collect the diff of the current branch against origin/master:

# 1. Get changed files
git diff origin/master --name-only

# 2. Get diff content for each file
git diff origin/master <file_path> > diffs/<file_name>.diff

Step 2: Construct an "Expert" Prompt

We designed a prompt that role‑plays an experienced front‑end developer and QA engineer, providing context, tasks, and analysis focus (props, emits, mixins, routing, API calls, Vuex, shared utilities). The diff is dynamically inserted into the prompt.

# Role: You are a senior Vue2 developer & QA expert

You have 10 years of experience and need to perform strict code impact analysis.

## Task
Generate a structured impact analysis report based on the provided code diff.

## Analysis Focus
- Vue components: props, $emit, mixins, computed, watch
- Routing: navigation, guards
- API: calls, data flow
- Vuex: state, actions/mutations
- Shared components/utilities impact

## Execution Strategy
1. Parse diff for key changes
2. Parallel search: grep_search (precise) + codebase_search (semantic)
3. Deeply analyze affected files
4. Assess risk and suggest verification steps

---

Below is my Vue2 project code diff, please analyze the impact:

{Code Diff}

Step 3: Feed Prompt to Cursor

Cursor returns a Markdown‑formatted impact analysis report. An example output highlights changed files, locations, and the functional impact, such as a renamed @click event breaking avatar click navigation.

代码影响范围分析

修改内容
将头像组件（src/components/user-item/avatar.vue）点击事件的emit事件名从 click 改为 clicktest。

🔴 受影响的文件
1. src/components/user-item/index.vue (第16行) – 头像点击跳转功能失效
2. src/views/mine/index/index.vue (第23行) – 个人中心头像点击跳转设置页面功能失效
3. src/views/group-chat/apply-confirm/index.vue (第12行) – 申请确认页面头像点击跳转用户主页功能失效

✅ 不受影响的文件
... (list of files using the avatar component without @click) ...

📋 总结
受影响文件数量: 3个
影响等级: 中等 - 功能性问题
主要影响: 头像点击跳转功能失效
建议: 同时将这3个文件中的 @click 改为 @clicktest

4. Experience: Can AI "Understand" Changes?

Cursor performed better than expected. Highlights include accurate dependency recognition, semantic change understanding (e.g., high‑risk emit rename), and proactive risk warnings akin to an automated code review.

👍 Strengths

Dependency recognition : correctly maps function calls, component references, mixins, etc.

Semantic change comprehension : identifies high‑risk modifications beyond simple renames.

Pre‑emptive risk alerts : offers automatic code‑review style warnings.

👎 Issues

High token cost : large diffs (e.g., 4 files, ~380 lines) inflate the prompt to ~9,000 tokens.

Occasional over‑analysis : AI may produce redundant or inaccurate suggestions, requiring human verification.

5. Conclusion

This basic experiment demonstrates Cursor's potential for code impact analysis. While it cannot replace testing, it acts as a reliable reviewer, helping define test scopes and flagging overlooked areas, marking a promising step toward smarter development workflows.