docs:30-dịch-3-basic-sveltekit-errors-and-redirects (sveltevietnam#65)

Author: tymon3568

content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/README.md

@@ -1,21 +1,22 @@
 ---
-title: Basics
+title: Cơ bản
 ---
 
-There are two types of errors in SvelteKit — _expected_ errors and _unexpected_ errors.
+Trong SvelteKit, có hai loại lỗi — _expected_ errors và _unexpected_ errors.
+
+Expected error là một lỗi được tạo ra bằng helper [`error`](https://kit.svelte.dev/docs/modules#sveltejs-kit-error) từ `@sveltejs/kit`, như trong `src/routes/expected/+page.server.js`:
 
-An expected error is one that was created with the [`error`](https://kit.svelte.dev/docs/modules#sveltejs-kit-error) helper from `@sveltejs/kit`, as in `src/routes/expected/+page.server.js`:
 
 ```js
 /// file: src/routes/expected/+page.server.js
 import { error } from '@sveltejs/kit';
 
 export function load() {
-	throw error(420, 'Enhance your calm');
+	throw error(420, 'Bình tĩnh');
 }
 ```
 
-Any other error — such as the one in `src/routes/unexpected/+page.server.js` — is treated as unexpected:
+Bất kỳ lỗi nào khác — như trong `src/routes/unexpected/+page.server.js` — được coi là lỗi unexpected:
 
 ```js
 /// file: src/routes/unexpected/+page.server.js
@@ -24,8 +25,8 @@ export function load() {
 }
 ```
 
-When you throw an expected error, you're telling SvelteKit 'don't worry, I know what I'm doing here'. An unexpected error, by contrast, is assumed to be a bug in your app. When an unexpected error is thrown, its message and stack trace will be logged to the console.
+Khi bạn throw một lỗi expected, bạn đang bảo SvelteKit 'đừng lo, tôi biết tôi đang làm gì ở đây'. Ngược lại, một lỗi unexpected được giả định là một lỗi trong ứng dụng của bạn. Khi một lỗi unexpected xảy ra, message và stack trace của nó sẽ được ghi vào console.
 
-> In a later chapter we'll learn about how to add custom error handling using the `handleError` hook.
+> Trong chương sau, chúng ta sẽ tìm hiểu về cách sử dụng `handleError` để tùy chỉnh việc xử lý lỗi.
 
-If you click the links in this app, you'll notice an important difference: the expected error message is shown to the user, whereas the unexpected error message is redacted and replaced with a generic 'Internal Error' message and a 500 status code. That's because error messages can contain sensitive data.
+Nếu bạn nhấp vào các liên kết trong ứng dụng này, bạn sẽ thấy một khác biệt quan trọng: thông báo lỗi expected được hiển thị cho người dùng, trong khi thông báo của lỗi unexpected được thay thế bằng một thông báo tổng quát là 'Internal Error' và một mã trạng thái 500. Đây là vì thông baó lỗi có thể chứa dữ liệu nhạy cảm.

content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/app-a/src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <nav>
 	<a href="/">home</a>
-	<a href="/expected">page with expected error</a>
-	<a href="/unexpected">page with unexpected error</a>
+	<a href="/expected">trang với expected error</a>
+	<a href="/unexpected">trang với unexpected error</a>
 </nav>
 
 <slot />

content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/app-a/src/routes/emojis.js

@@ -1,5 +1,5 @@
 export const emojis = {
-	// TODO add the rest!
+	// TODO thêm phần còn lại!
 	420: '🫠',
 	500: '💥'
 };

content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/app-a/src/routes/expected/+page.server.js

@@ -1,5 +1,5 @@
 import { error } from '@sveltejs/kit';
 
 export function load() {
-	throw error(420, 'Enhance your calm');
+	throw error(420, 'Bình tĩnh');
 }

content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/app-a/src/routes/expected/+page.svelte

@@ -1 +1 @@
-<h1>This page will never be rendered</h1>
+<h1>Trang này sẽ không bao giờ được render</h1>

content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/app-a/src/routes/unexpected/+page.svelte

@@ -1 +1 @@
-<h1>This page will never be rendered</h1>
+<h1>Trang này sẽ không bao giờ được render</h1>

content/tutorial/03-sveltekit/09-errors-and-redirects/02-error-pages/README.md

@@ -1,10 +1,10 @@
 ---
-title: Error pages
+title: Trang lỗi
 ---
 
-When something goes wrong inside a `load` function, SvelteKit renders an error page.
+Khi xảy ra vấn đề trong hàm `load`, SvelteKit sẽ render một trang lỗi.
 
-The default error page is somewhat bland. We can customize it by creating a `src/routes/+error.svelte` component:
+Trang lỗi mặc định hơi nhạt nhòa. Chúng ta có thể tùy chỉnh nó bằng cách tạo một component `src/routes/+error.svelte`:
 
 ```svelte
 /// file: src/routes/+error.svelte
@@ -19,11 +19,11 @@ The default error page is somewhat bland. We can customize it by creating a `src
 </span>
 ```
 
-Notice that the `+error.svelte` component is rendered inside the root `+layout.svelte`. We can create more granular `+error.svelte` boundaries:
+Chú ý component `+error.svelte` được render bên trong root `+layout.svelte`. Chúng ta có thể tạo ra các trang lỗi `+error.svelte` cụ thể cho từng trang:
 
 ```svelte
 /// file: src/routes/expected/+error.svelte
-<h1>this error was expected</h1>
+<h1>lỗi expected</h1>
 ```
 
-This component will be rendered for `/expected`, while the root `src/routes/+error.svelte` page will be rendered for any other errors that occur.
+Component này sẽ được render cho `/expected`, trong khi trang gốc `src/routes/+error.svelte` sẽ được render cho bất kỳ lỗi nào khác xảy ra.

content/tutorial/03-sveltekit/09-errors-and-redirects/02-error-pages/app-b/src/routes/expected/+error.svelte

@@ -1 +1 @@
-<h1>this error was expected</h1>
+<h1>lỗi expected</h1>

content/tutorial/03-sveltekit/09-errors-and-redirects/03-fallback-errors/README.md

@@ -2,9 +2,9 @@
 title: Fallback errors
 ---
 
-If things go _really_ wrong — an error occurs while loading the root layout data, or while rendering the error page — SvelteKit will fall back to a static error page.
+Khi có lỗi xảy ra trong quá trình tải dữ liệu ở root layout hoăc trong khi render trang lỗi - SvelteKit sẽ chuyển sang một trang lỗi tĩnh.
 
-Add a new `src/routes/+layout.server.js` file to see this in action:
+Thêm một tệp mới `src/routes/+layout.server.js` để thấy điều này diễn ra:
 
 ```js
 /// file: src/routes/+layout.server.js
@@ -13,16 +13,16 @@ export function load() {
 }
 ```
 
-You can customise the fallback error page. Create a `src/error.html` file:
+Bạn có thể tùy chỉnh trang fallback error. Tạo một tệp `src/error.html`:
 
 ```html
 /// file: src/error.html
-<h1>Game over</h1>
+<h1>Kết thúc</h1>
 <p>Code %sveltekit.status%</p>
 <p>%sveltekit.error.message%</p>
 ```
 
-This file can include the following:
+Tệp này có thể bao gồm:
 
-- `%sveltekit.status%` — the HTTP status code
-- `%sveltekit.error.message%` — the error message
+- `%sveltekit.status%` — mã trạng thái HTTP
+- `%sveltekit.error.message%` — thông báo lỗi

content/tutorial/03-sveltekit/09-errors-and-redirects/03-fallback-errors/app-b/src/error.html

@@ -1,3 +1,3 @@
-<h1>Game over</h1>
+<h1>Kết thúc</h1>
 <p>Code %sveltekit.status%</p>
 <p>%sveltekit.error.message%</p>

content/tutorial/03-sveltekit/09-errors-and-redirects/04-redirects/README.md

@@ -1,10 +1,10 @@
 ---
-title: Redirects
+title: Chuyển hướng
 ---
 
-We can also use the `throw` mechanism to redirect from one page to another.
+Chúng ta cũng có thể sử dụng cơ chế `throw` để chuyển hướng từ một trang đến trang khác.
 
-Create a new `load` function in `src/routes/a/+page.server.js`:
+Tạo một hàm `load` mới trong `src/routes/a/+page.server.js`:
 
 ```js
 /// file: src/routes/a/+page.server.js
@@ -15,12 +15,12 @@ export function load() {
 }
 ```
 
-Navigating to `/a` will now take us straight to `/b`.
+Việc chuyển đến `/a` sẽ đưa chúng ta thẳng đến `/b`.
 
-You can `throw redirect(...)` inside `load` functions, form actions, API routes and the `handle` hook, which we'll discuss in a later chapter.
+Bạn có thể `throw redirect(...)` trong các hàm `load`, form actions, API routes và hook `handle` - chúng ta sẽ thảo luận vấn đề này trong một chương sau.
 
-The most common status codes you'll use:
+Các status codes phổ biến nhất mà bạn sẽ sử dụng:
 
-- `303` — for form actions, following a successful submission
-- `307` — for temporary redirects
-- `308` — for permanent redirects
+303 — đối với form actions, sau khi submit thành công
+307 — đối với chuyển hướng tạm thời
+308 — đối với chuyển hướng vĩnh viễn

content/tutorial/03-sveltekit/09-errors-and-redirects/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Errors and redirects"
+	"title": "Lỗi và chuyển hướng"
 }

content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/README.md

@@ -1,10 +1,10 @@
 ---
-title: Customizing the error message
+title: Tùy chỉnh thông báo lỗi
 ---
 
-The error page in the previous exercise is rather static. Maybe you want to show the error message so you can help people turning up in your support channels faster.
+Trang lỗi trong bài tập trước khá tĩnh. Có thể bạn muốn hiển thị thông báo lỗi để giúp người dùng có thể tìm đến các kênh hỗ trợ nhanh hơn.
 
-For this, SvelteKit provides you with `$page.error` and `$page.status`, which contain information about the error and the status code. Let's add it to `+error.svelte`:
+Đối với điều này, SvelteKit cung cấp cho bạn `$page.error` và `$page.status`, chứa thông tin về lỗi và status code _(mã trạng thái)_. Hãy thêm nó vào `+error.svelte`:
 
 ```svelte
 /// file: src/routes/+error.svelte
@@ -19,36 +19,36 @@ For this, SvelteKit provides you with `$page.error` and `$page.status`, which co
 +++{#if $page.status === 404}
 	<h1>Not found</h1>
 {:else +++if !online}
-	<h1>You're offline</h1>
+	<h1>Bạn đang offline</h1>
 {:else}
 	<h1>Oops!</h1>
-	---<p>Something went wrong</p>---
+	---<p>Có gì đó sai sai</p>---
 	+++<p>{$page.error.message}</p>+++
 {/if}
 ```
 
-That's better, but `$page.error.message` always contains "Internal Error" - how so? This is because SvelteKit plays it safe and prevents you from accidentally showing sensitive information as part of the error message.
+`$page.error.message` luôn chứa "Internal Error" - tại sao vậy? Điều này là do SvelteKit ưu tiên an toàn và ngăn bạn sơ ý để lộ thông tin nhạy cảm.
 
-To customize it, implement the `handleError` hook in `hooks.server.js` and `hooks.client.js` which run when an unexpected error is thrown during data loads on the server or client respectively.
+Để tùy chỉnh, triển khai hook `handleError` trong `hooks.server.js` và `hooks.client.js`, được chạy khi một lỗi unexpected xảy ra trong quá trình tải dữ liệu trên server hoặc client.
 
 ```js
 // hooks.server.js
 export function handleError(+++{ error }+++) {
-    ---return { message: 'Internal Error' }; // the default implementation of this hook---
+    ---return { message: 'Internal Error' }; // cấu hình mặc định của hook này---
     +++return { message: error instanceof Error ? error.message : 'Internal Error' };+++
 }
 ```
 
 ```js
 // hooks.client.js
 export function handleError(+++{ error }+++) {
-    ---return { message: 'Internal Error' }; // the default implementation of this hook---
+    ---return { message: 'Internal Error' }; // cấu hình mặc định của hook này---
     +++return { message: error instanceof Error ? error.message : 'Internal Error' };+++
 }
 ```
 
-You could also call your error reporting service in these hooks.
+Bạn cũng có thể gọi dịch vụ báo cáo lỗi của mình trong những hook này.
 
-Note that you can return more than an error message if you like. Whatever object shape you return will be available in `$page.error`, the only requirement is a `message` property. You can read more about this (and how to make it type-safe!) in the [error docs](https://kit.svelte.dev/docs/errors).
+Lưu ý rằng bạn có thể trả về nhiều hơn một thông báo lỗi nếu bạn muốn. Bất kỳ cấu trúc nào bạn trả về sẽ có sẵn trong `$page.error`, yêu cầu duy nhất là phải có một thuộc tính `message`. Bạn có thể đọc thêm về điều này (và cách thiết lập type-safe!) trong [error docs](https://kit.svelte.dev/docs/errors).
 
-> When handling errors, be careful to not assume it's an `Error` object, anything could be thrown. Also make sure not to expose senstive data by forwarding too much information
+> Khi xử lý lỗi, hãy cẩn thận và không nên giả định rằng đó là một đối tượng `Error` vì bất cứ thứ gì cũng có thể throw được. Ngoài ra, hãy đảm bảo bạn không để lộ dữ liệu nhạy cảm bằng cách chuyển tiếp quá nhiều thông tin.

content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/app-a/src/hooks.client.js

@@ -1,3 +1,3 @@
 export function handleError() {
-	return { message: 'Internal Error' }; // the default implementation of this hook
+	return { message: 'Internal Error' }; // implementation mặc định của hook này
 }

content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/app-a/src/hooks.server.js

@@ -1,3 +1,3 @@
 export function handleError() {
-	return { message: 'Internal Error' }; // the default implementation of this hook
+	return { message: 'Internal Error' }; // cấu hình mặc định của hook này
 }

content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/app-a/src/routes/+error.svelte

@@ -4,8 +4,8 @@
 </script>
 
 {#if !online}
-	<h1>you're offline</h1>
+	<h1>bạn đang offline</h1>
 {:else}
 	<h1>oops!</h1>
-	<p>Something went wrong</p>
+	<p>Có gì đó sai sai</p>
 {/if}

content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/app-a/src/routes/+page.svelte

@@ -1 +1 @@
-<p>Welcome</p>
+<p>Chào mừng</p>

content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/app-a/src/routes/about/+page.server.js

@@ -1,5 +1,5 @@
 export function load() {
 	throw new Error(
-		'Something went terribly wrong loading the about page'
+		'Có lỗi nghiêm trọng khi tải trang giới thiệu'
 	);
 }

content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/app-a/src/routes/about/+page.svelte

@@ -1,4 +1,4 @@
 <p>
-	This is the best about page of all time. Sad
-	that you'll never see it because of the error.
+	Đây là trang giới thiệu tốt nhất mọi thời đại. Buồn
+thay bạn sẽ không bao giờ nhìn thấy nó vì lỗi.
 </p>

content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/app-b/src/routes/+error.svelte

@@ -8,7 +8,7 @@
 {#if $page.status === 404}
 	<h1>Not found</h1>
 {:else if !online}
-	<h1>You're offline</h1>
+	<h1>Bạn đang offline</h1>
 {:else}
 	<h1>Oops!</h1>
 	<p>{$page.error.message}</p>