docs:31-dịch-4-advanced-sveltekit-hooks (sveltevietnam#66)

Author: tymon3568

content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/README.md

@@ -2,13 +2,13 @@
 title: handle
 ---
 
-SvelteKit provides several _hooks_ — ways to intercept and override the framework's default behaviour.
+SvelteKit cung cấp một vài _hooks_ — là cách để chặn và ghi đè lên hành vi mặc định của framework.
 
-The most elementary hook is `handle`, which lives in `src/hooks.server.js`. It receives an `event` object along with a `resolve` function, and returns a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response).
+Hook cơ bản nhất là `handle`, nằm trong `src/hooks.server.js`. Nó nhận một đối tượng `event` cùng với một hàm `resolve`, và trả về một [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response).
 
-`resolve` is where the magic happens: SvelteKit matches the incoming request URL to a route of your app, imports the relevant code (`+page.server.js` and `+page.svelte` files and so on), loads the data needed by the route, and generates the response.
+`resolve` là nơi điều kỳ diệu xảy ra: SvelteKit so khớp URL yêu cầu đến với một route của ứng dụng, imports mã tương ứng (`+page.server.js` và các tệp `+page.svelte` vv), tải dữ liệu cần thiết bởi route và tạo ra response _(phản hồi)_.
 
-The default `handle` hook looks like this:
+`handle` hook mặc định trông như thế này:
 
 ```js
 /// file: src/hooks.server.js
@@ -17,7 +17,7 @@ export async function handle({ event, resolve }) {
 }
 ```
 
-For pages (as opposed to [API routes](get-handlers)), you can modify the generated HTML with `transformPageChunk`:
+Đối với trang (trái ngược với[API routes](get-handlers)), bạn có thể sửa đổi HTML được tạo ra bằng `transformPageChunk`:
 
 ```js
 /// file: src/hooks.server.js
@@ -31,7 +31,7 @@ export async function handle({ event, resolve }) {
 }
 ```
 
-You can also create entirely new routes:
+Bạn cũng có thể tạo ra các route hoàn toàn mới:
 
 ```js
 /// file: src/hooks.server.js

content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/app-a/src/routes/+page.svelte

@@ -1,2 +1,2 @@
-<h1>hello world</h1>
+<h1>Xin chào</h1>
 <a href="/ping">ping</a>

content/tutorial/04-advanced-sveltekit/01-hooks/02-event/README.md

@@ -2,22 +2,23 @@
 title: The RequestEvent object
 ---
 
-The `event` object passed into `handle` is the same object — an instance of a [`RequestEvent`](https://kit.svelte.dev/docs/types#public-types-requestevent) — that is passed into [API routes](get-handlers) in `+server.js` files, [form actions](the-form-element) in `+page.server.js` files, and `load` functions in `+page.server.js` and `+layout.server.js`.
+Đối tượng `event` (một instance của [`RequestEvent`](https://kit.svelte.dev/docs/types#public-types-requestevent)) được truyền vào `handle` cũng chính là `event` trong [API routes](get-handlers) ở `+server.js`, [form actions](the-form-element) ở `+page.server.js`, và các hàm `load` trong `+page.server.js` và `+layout.server.js`.
 
-It contains a number of useful properties and methods, some of which we've already encountered:
+Nó chứa một số thuộc tính hữu ích và phương thức, một số trong số đó chúng ta đã gặp:
 
-* `cookies` — the [cookies API](cookies)
-* `fetch` — the standard [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), with additional powers
-* `getClientAddress()` — a function to get the client's IP address
-* `isDataRequest` — `true` if the browser is requesting data for a page during client-side navigation, `false` if a page/route is being requested directly
-* `locals` — a place to put arbitrary data
-* `params` — the route parameters
-* `request` — the [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object
-* `route` — an object with an `id` property representing the route that was matched
-* `setHeaders(...)` — a function for [setting HTTP headers](headers) on the response
-* `url` — a [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object representing the current request
+* `cookies` — [API cookies](cookies)
+* `fetch` — [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) tiêu chuẩn, với các tính năng bổ sung
+* `getClientAddress()` — một hàm để lấy địa chỉ IP của client
+* `isDataRequest` — `true` nếu trình duyệt đang yêu cầu dữ liệu cho một trang trong quá trình điều hướng ở phía client, `false` nếu một trang/route đang được yêu cầu trực tiếp
+* `locals` — nơi để đặt dữ liệu tùy ý
+* `params` — các tham số route
+* `request` — [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object
+* `route` — một object với một thuộc tính `id` đại diện cho tuyến đường đã được khớp
+* `setHeaders(...)` — một hàm để [setting HTTP headers](headers) cho response
+* `url` — một [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object đại diện cho request hiện tại
+
+Để thuận tiện, ta có thể thêm dữ liệu vào `event.locals` trong `handle` để truy cập được trong các hàm `load` tiếp theo:
 
-A useful pattern is to add some data to `event.locals` in `handle` so that it can be read in subsequent `load` functions:
 
 ```js
 /// file: src/hooks.server.js
@@ -31,7 +32,7 @@ export async function handle({ event, resolve }) {
 /// file: src/routes/+page.server.js
 export function load(+++event+++) {
 	return {
-		message: `the answer is ${+++event.locals.answer+++}`
+		message: `Câu trả lời là ${+++event.locals.answer+++}`
 	};
 }
 ```

content/tutorial/04-advanced-sveltekit/01-hooks/02-event/app-a/src/routes/+page.server.js

@@ -1,5 +1,5 @@
 export function load() {
 	return {
-		message: `the answer is ???`
+		message: `câu trả lời là ???`
 	};
 }

content/tutorial/04-advanced-sveltekit/01-hooks/02-event/app-b/src/routes/+page.server.js

@@ -1,5 +1,5 @@
 export function load(event) {
 	return {
-		message: `the answer is ${event.locals.answer}`
+		message: `câu trả lời là ${event.locals.answer}`
 	};
 }

content/tutorial/04-advanced-sveltekit/01-hooks/03-handlefetch/README.md

@@ -2,13 +2,14 @@
 title: handleFetch
 ---
 
-The `event` object has a `fetch` method that behaves like the standard [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), but with superpowers:
+Đối tượng `event` chứa phương thức `fetch` hoạt động giống như [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) tiêu chuẩn, nhưng với những tính năng đặc biệt:
 
-- it can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers from the incoming request
-- it can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context)
-- internal requests (e.g. for `+server.js` routes) go directly to the handler function when running on the server, without the overhead of an HTTP call
+- có thể thực hiện các yêu cầu có chứng thực trên server, vì nó kế thừa các header `cookie` và `authorization` từ yêu cầu đầu vào.
+- có thể thực hiện các yêu cầu với đường dẫn tương đối (relative requests) trên server (thông thường, `fetch` chỉ nhận URL có gốc (origin) khi sử dụng trong bối cảnh server).
+- internal requests _(yêu cầu nội bộ)_ (ví dụ: đối với route `+server.js`) được chuyển trực tiếp đến hàm handler khi chạy trên server, mà không phải cấu hình gọi HTTP.
+
+Hành vi của nó có thể được sửa đổi bằng `handleFetch` hook, mặc định nó trông như thế này:
 
-Its behaviour can be modified with the `handleFetch` hook, which by default looks like this:
 
 ```js
 /// file: src/hooks.server.js
@@ -17,7 +18,7 @@ export async function handleFetch({ event, request, fetch }) {
 }
 ```
 
-For example, we could respond to requests for `src/routes/a/+server.js` with responses from `src/routes/b/+server.js` instead:
+Ví dụ, thay vì phản hồi các yêu cầu đến `src/routes/a/+server.js` chúng ta có thể sử dụng phản hồi từ `src/routes/b/+server.js`:
 
 ```js
 /// file: src/hooks.server.js
@@ -31,4 +32,4 @@ export async function handleFetch({ event, request, fetch }) {
 }
 ```
 
-Later, when we cover [universal `load` functions](universal-load-functions), we'll see that `event.fetch` can also be called from the browser. In that scenario, `handleFetch` is useful if you have requests to a public URL like `https://api.yourapp.com` from the browser, that should be redirected to an internal URL (bypassing whatever proxies and load balancers sit between the API server and the public internet) when running on the server.
+Sau này, khi đề cập đến [universal `load` functions](universal-load-functions), chúng ta sẽ thấy rằng `event.fetch` cũng có thể được gọi từ trình duyệt. Trong tình huống đó, `handleFetch` sẽ hữu ích nếu bạn gởi yêu cầu từ trình duyệt đến một URL công khai như `https://api.yourapp.com` và các yêu cầu này cần được chuyển hướng đến một URL nội bộ (bypass qua bất kỳ proxy và load balancer nào đứng giữa server API và internet công cộng) khi chạy trên server.

content/tutorial/04-advanced-sveltekit/01-hooks/03-handlefetch/app-a/src/routes/a/+server.js

@@ -1,3 +1,3 @@
 export function GET() {
-	return new Response('hello from a');
+	return new Response('xin chào từ a');
 }

content/tutorial/04-advanced-sveltekit/01-hooks/03-handlefetch/app-a/src/routes/b/+server.js

@@ -1,3 +1,3 @@
 export function GET() {
-	return new Response('hello from b');
+	return new Response('xin chào từ b');
 }

content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/README.md

@@ -2,9 +2,10 @@
 title: handleError
 ---
 
-The `handleError` hook lets you intercept unexpected errors and trigger some behaviour, like pinging a Slack channel or sending data to an error logging service.
+Hook `handleError` giúp bạn chặn các lỗi không mong muốn _(unexpected errors)_ và kích hoạt một số hành vi, như gửi ping tới một kênh Slack hoặc gửi dữ liệu đến một dịch vụ theo dõi lỗi.
+
+Như bạn nhớ từ [bài tập trước đó](error-basics), một lỗi là _unexpected_  nếu nó không được tạo ra với helper `error` từ `@sveltejs/kit`. Thông thường, điều này có nghĩa là có điều gì đó trong ứng dụng của bạn cần sửa. Hành vi mặc định là ghi lại lỗi:
 
-As you'll recall from an [earlier exercise](error-basics), an error is _unexpected_ if it wasn't created with the `error` helper from `@sveltejs/kit`. It generally means something in your app needs fixing. The default behaviour is to log the error:
 
 ```js
 /// file: src/hooks.server.js
@@ -13,32 +14,32 @@ export function handleError({ event, error }) {
 }
 ```
 
-If you navigate to `/the-bad-place`, you'll see this in action — the error page is shown, and if you open the terminal (using the button to the right of the URL bar), you'll see the message from `src/routes/the-bad-place/+page.server.js`.
+Nếu bạn chuyển đến `/the-bad-place`, bạn sẽ thấy điều này diễn ra - trang lỗi được hiển thị, và nếu bạn mở terminal (sử dụng nút ở bên phải của thanh URL), bạn sẽ thấy thông báo từ `src/routes/the-bad-place/+page.server.js`.
 
-Notice that we're _not_ showing the error message to the user. That's because error messages can include sensitive information that at best will confuse your users, and at worst could benefit evildoers. Instead, the error object available to your application — represented as `$page.error` in your `+error.svelte` pages, or `%sveltekit.error%` in your `src/error.html` fallback — is just this:
+Lưu ý rằng chúng ta không hiển thị thông báo lỗi cho người dùng. Lý do là thông báo lỗi có thể bao gồm thông tin nhạy cảm,làm người dùng bối rối, và trong tình huống xấu có thể bị lợi dụng bởi kẻ xấu. Thay vào đó, đối tượng error sẵn có từ `$page.error` trong các trang `+error.svelte`, hoặc `%sveltekit.error%` trong tệp `src/error.html` dự phòng - chỉ là như thế này:
 
 ```js
 /// no-file
 {
-	message: 'Internal Error' // or 'Not Found' for a 404
+	message: 'Internal Error' // hoặc 'Not Found' cho 404
 }
 ```
 
-In some situations you may want to customise this object. To do so, you can return an object from `handleError`:
+Trong một số tình huống, bạn có thể muốn tùy chỉnh đối tượng này. Để làm điều đó, bạn có thể trả về một đối tượng từ `handleError`:
 
 ```js
 /// file: src/hooks.server.js
 export function handleError({ event, error }) {
 	console.error(error.stack);
 
 	return {
-		message: 'everything is fine',
+		message: 'mọi thứ đều ổn',
 		code: 'JEREMYBEARIMY'
 	};
 }
 ```
 
-You can now reference properties other than `message` in a custom error page. Create `src/routes/+error.svelte`:
+Bây giờ bạn có thể tìm hiểu các thuộc tính khác ngoài `message` trong trang lỗi tùy chỉnh. Tạo `src/routes/+error.svelte`:
 
 ```svelte
 /// file: src/routes/+error.svelte

content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/app-a/src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <nav>
 	<a href="/">home</a>
-	<a href="/the-good-place">the good place</a>
-	<a href="/the-bad-place">the bad place</a>
+	<a href="/the-good-place">nơi tốt</a>
+	<a href="/the-bad-place">nơi xấu</a>
 </nav>
 
 <slot />

content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/app-a/src/routes/the-bad-place/+page.server.js

@@ -1,3 +1,3 @@
 export function load() {
-	throw new Error('this is the bad place!');
+	throw new Error('đây là nơi xấu!');
 }

content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/app-a/src/routes/the-bad-place/+page.svelte

@@ -1 +1 @@
-<h1>you are in the bad place</h1>
+<h1>bạn đang ở nơi xấu</h1>

content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/app-a/src/routes/the-good-place/+page.svelte

@@ -1 +1 @@
-<h1>you are in the good place</h1>
+<h1>bạn đang ở nơi tốt</h1>

content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/app-b/src/hooks.server.js

@@ -2,7 +2,7 @@ export function handleError({ event, error }) {
 	console.error(error.stack);
 
 	return {
-		message: 'everything is fine',
+		message: 'mọi thứ đều ổn',
 		code: 'JEREMYBEARIMY'
 	};
 }