Skip to content

Commit b862a02

Browse files
Sync kit docs (#1479)
sync kit docs Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
1 parent 69cb697 commit b862a02

File tree

2 files changed

+31
-19
lines changed

2 files changed

+31
-19
lines changed

apps/svelte.dev/content/docs/kit/20-core-concepts/60-remote-functions.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,25 @@ Remote functions are a tool for type-safe communication between client and serve
1111

1212
Combined with Svelte's experimental support for [`await`](/docs/svelte/await-expressions), it allows you to load and manipulate data directly inside your components.
1313

14-
This feature is currently experimental, meaning it is likely to contain bugs and is subject to change without notice. You must opt in by adding the `kit.experimental.remoteFunctions` option in your `svelte.config.js`:
14+
This feature is currently experimental, meaning it is likely to contain bugs and is subject to change without notice. You must opt in by adding the `kit.experimental.remoteFunctions` option in your `svelte.config.js` and optionally, the `compilerOptions.experimental.async` option to use `await` in components:
1515

1616
```js
1717
/// file: svelte.config.js
18-
export default {
18+
/** @type {import('@sveltejs/kit').Config} */
19+
const config = {
1920
kit: {
2021
experimental: {
2122
+++remoteFunctions: true+++
2223
}
24+
},
25+
compilerOptions: {
26+
experimental: {
27+
+++async: true+++
28+
}
2329
}
2430
};
31+
32+
export default config;
2533
```
2634

2735
## Overview
@@ -88,6 +96,8 @@ While using `await` is recommended, as an alternative the query also has `loadin
8896
const query = getPosts();
8997
</script>
9098

99+
<h1>Recent posts</h1>
100+
91101
{#if query.error}
92102
<p>oops!</p>
93103
{:else if query.loading}

apps/svelte.dev/content/docs/kit/30-advanced/68-observability.md

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,39 @@ title: Observability
77
<p>Available since 2.29</p>
88
</blockquote>
99

10-
> [!NOTE] This feature is experimental. Expect bugs and breaking changes in minor versions (though we'll do our best to keep those to an absolute minimum). Please provide feedback!
11-
1210
Sometimes, you may need to observe how your application is behaving in order to improve performance or find the root cause of a pesky bug. To help with this, SvelteKit can emit server-side [OpenTelemetry](https://opentelemetry.io) spans for the following:
1311

14-
- [`handle`](hooks#Server-hooks-handle) hook (`handle` functions running in a [`sequence`](@sveltejs-kit-hooks#sequence) will show up as children of each other and the root handle hook)
15-
- [`load`](load) functions (includes universal `load` functions when they're run on the server)
12+
- The [`handle`](hooks#Server-hooks-handle) hook and `handle` functions running in a [`sequence`](@sveltejs-kit-hooks#sequence) (these will show up as children of each other and the root `handle` hook)
13+
- Server [`load`](load) functions and universal `load` functions when they're run on the server
1614
- [Form actions](form-actions)
1715
- [Remote functions](remote-functions)
1816

1917
Just telling SvelteKit to emit spans won't get you far, though — you need to actually collect them somewhere to be able to view them. SvelteKit provides `src/instrumentation.server.ts` as a place to write your tracing setup and instrumentation code. It's guaranteed to be run prior to your application code being imported, providing your deployment platform supports it and your adapter is aware of it.
2018

21-
To enable both of these features, add the following to your `svelte.config.js`:
19+
Both of these features are currently experimental, meaning they are likely to contain bugs and are subject to change without notice. You must opt in by adding the `kit.experimental.tracing.server` and `kit.experimental.instrumentation.server` option in your `svelte.config.js`:
2220

2321
```js
2422
/// file: svelte.config.js
25-
export default {
23+
/** @type {import('@sveltejs/kit').Config} */
24+
const config = {
2625
kit: {
27-
+++experimental: {
28-
tracing: {
26+
experimental: {
27+
+++tracing: {
2928
server: true
3029
},
3130
instrumentation: {
3231
server: true
33-
}
34-
}+++
32+
}+++
33+
}
3534
}
3635
};
36+
37+
export default config;
3738
```
3839

3940
> [!NOTE] Tracing — and more significantly, observability instrumentation — can have a nontrivial overhead. Before you go all-in on tracing, consider whether or not you really need it, or if it might be more appropriate to turn it on in development and preview environments only.
4041
41-
## Agumenting SvelteKit's builtin tracing
42+
## Augmenting the built-in tracing
4243

4344
SvelteKit provides access to the `root` span and the `current` span on the request event. The root span is the one associated with your root `handle` function, and the current span could be associated with `handle`, `load`, a form action, or a remote function, depending on the context. You can annotate these spans with any attributes you wish to record:
4445

@@ -66,19 +67,20 @@ async function authenticate() {
6667

6768
To view your first trace, you'll need to set up a local collector. We'll use [Jaeger](https://www.jaegertracing.io/docs/getting-started/) in this example, as they provide an easy-to-use quickstart command. Once your collector is running locally:
6869

69-
- Turn on the experimental flag mentioned above in your `svelte.config.js` file
70-
- Use your package manager to install the dependencies you'll need
70+
- Turn on the experimental flags mentioned earlier in your `svelte.config.js` file
71+
- Use your package manager to install the dependencies you'll need:
7172
```sh
7273
npm i @opentelemetry/sdk-node @opentelemetry/auto-instrumentations-node @opentelemetry/exporter-trace-oltp-proto import-in-the-middle
7374
```
74-
- Create `src/instrumentation.server.ts` with the following:
75+
- Create `src/instrumentation.server.js` with the following:
7576

76-
```ts
77+
```js
78+
/// file: src/instrumentation.server.js
7779
import { NodeSDK } from '@opentelemetry/sdk-node';
7880
import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';
7981
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
8082
import { createAddHookMessageChannel } from 'import-in-the-middle';
81-
import { register } from 'module';
83+
import { register } from 'node:module';
8284

8385
const { registerOptions } = createAddHookMessageChannel();
8486
register('import-in-the-middle/hook.mjs', import.meta.url, registerOptions);
@@ -92,4 +94,4 @@ const sdk = new NodeSDK({
9294
sdk.start();
9395
```
9496
95-
Any server-side requests will now begin generating traces, which you can view in Jaeger's web console at [localhost:16686](http://localhost:16686).
97+
Now, server-side requests will begin generating traces, which you can view in Jaeger's web console at [localhost:16686](http://localhost:16686).

0 commit comments

Comments
 (0)