处理密钥和错误
安全地管理机密信息和故障。
处理密钥和错误 是 CoddyKit 上的免费 Vibe Coding 课时。 这是第 4 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vibe Coding 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Vibe Coding 课程共包含 4 节课。
本课时的部分内容尚未翻译,以英文显示。
Keys Are Secrets
An API key proves who you are and often ties to billing. If it leaks, others can run up your bill or abuse your access. Treat it like a password.
This lesson covers storing keys safely and handling the errors that real-world calls inevitably throw, so your integrations stay secure and reliable.
Never Hardcode Keys
Pasting a key directly in your code is the most common mistake. It ends up in version control, screenshots, and shared snippets where anyone can grab it.
Instead, keep keys out of source files entirely. Ask your assistant to refactor any hardcoded key into a safer location before you commit.
I hardcoded my API key in this file. Refactor the code so the key
is read from an environment variable instead, and show me how.Environment Variables
The standard place for keys is an environment variable, often loaded from a .env file kept out of version control. Your code reads it by name at runtime.
This keeps secrets off the page and lets each environment, local or production, use its own key without changing code.
Set up a .env file for my Node project with an API_KEY entry,
and show the code that reads it. Add .env to my .gitignore.Keep Keys Off the Client
Keys placed in front-end browser code are visible to anyone who opens dev tools. For sensitive APIs, the call should happen on a server you control.
A small backend route holds the key, calls the API, and returns only the data. Your assistant can scaffold this proxy pattern for you.
My API key must stay secret but my app is front-end only. Create a
small backend proxy route that holds the key and calls the API for me.Rotating a Leaked Key
If a key ever leaks, rotate it: generate a new one in the provider's dashboard and revoke the old. Do not just delete it from code, the leaked copy still works.
Assume any key that touched public code is compromised. Rotating is fast and the only safe response.
Expect Things to Fail
Networks drop, services go down, and limits get hit. Robust integrations assume failure and handle it, rather than crashing or showing a blank screen.
Wrapping calls so errors are caught and turned into friendly messages is what separates a demo from a real app.
Wrap this API call in error handling so a network failure shows the
user a friendly message instead of crashing the app.Try, Catch, and Status Checks
In code, a try block holds the call and a catch block handles thrown errors. But fetch does not throw on a 404 or 500, so you must also check response.ok.
Checking the status code yourself catches errors the try block alone would miss. Ask your assistant to add both layers.
Add a try/catch around this fetch and also check response.ok,
throwing a clear error if the status code is not successful.Reading Error Responses
APIs often return a JSON error body explaining what went wrong, like "invalid_api_key" or "missing parameter city". This message is more useful than the status alone.
Log and surface this body during development. Your assistant can map common error codes to fixes for the specific API you use.
This API returned a 400 with this error body. Explain what it means
and how I fix my request.Handling Rate Limits
A 429 status means you exceeded the rate limit. The response often includes a Retry-After header telling you how long to wait before trying again.
Good clients back off and retry instead of hammering. Ask your assistant to add a retry with a delay that respects that header.
When my call returns a 429, read the Retry-After header and retry
automatically after waiting. Show the full code.Timeouts and Fallbacks
A call that hangs forever freezes your app. Set a timeout so slow requests fail fast, then show cached data or a retry button as a fallback.
Designing for the unhappy path keeps users in control. Describe the fallback you want and let your assistant wire it up.
Add a 5-second timeout to this fetch. If it times out, show the user
a cached result and a retry button.Putting It Together
A production-ready call hides the key on a server, checks the status, catches errors, respects rate limits, and times out gracefully. Each layer is small.
You rarely write all this by hand. You describe the requirements and your AI assistant assembles a robust, secure integration you can trust.
Quick Check
Test your understanding of keys and error handling.
Recap
Keep keys out of code in environment variables, off the client, and rotate them if leaked. Expect failures and handle them with try/catch plus status checks.
Read error bodies, back off on 429s, and add timeouts with fallbacks. With these habits and your AI assistant, your API integrations stay secure and resilient.
常见问题解答
「处理密钥和错误」课时是免费的吗?
是的 — 「处理密钥和错误」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Vibe Coding 课程的其余内容,请升级到 CoddyKit PRO。 Vibe Coding 课程共包含 4 节课。
「处理密钥和错误」这节课中我会学到什么?
安全地管理机密信息和故障。 你通过在浏览器中直接运行的动手代码来练习 Vibe Coding,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vibe Coding 需要有经验吗?
无需任何先前经验。CoddyKit 上的 Vibe Coding 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 4 节课,共 4 节。
「处理密钥和错误」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 Vibe Coding 课中编写并运行代码吗?
能。每节 Vibe Coding 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。