-
-
Notifications
You must be signed in to change notification settings - Fork 187
feat: Blog post for Observability launch #1475
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
elliott-with-the-longest-name-on-github
merged 13 commits into
main
from
elliott/observability-blog
Aug 18, 2025
Merged
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
2987c97
feat: Blog post for Observability launch
elliott-with-the-longest-name-on-github cdf5f13
fix
elliott-with-the-longest-name-on-github d1a5cdc
Merge branch 'main' into elliott/observability-blog
Rich-Harris 1edb8d4
oops
elliott-with-the-longest-name-on-github ecff079
oops
elliott-with-the-longest-name-on-github de32dfa
Update apps/svelte.dev/content/blog/2025-08-14-sveltekit-integrated-o…
elliott-with-the-longest-name-on-github b58ce46
paragraph
elliott-with-the-longest-name-on-github a18549f
change file
elliott-with-the-longest-name-on-github 2ee301b
Merge branch 'elliott/observability-blog' of github.com:sveltejs/svel…
elliott-with-the-longest-name-on-github e0e6616
em dashes
Rich-Harris a0a7c00
Apply suggestions from code review
elliott-with-the-longest-name-on-github 5e13df9
Apply suggestions from code review
elliott-with-the-longest-name-on-github 4284efc
fixes
elliott-with-the-longest-name-on-github File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
90 changes: 90 additions & 0 deletions
90
apps/svelte.dev/content/blog/2025-18-14-sveltekit-integrated-observability.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
--- | ||
title: 'Introducing integrated observability in SvelteKit' | ||
description: 'SvelteKit apps can now emit OpenTelemetry traces and reliably set up observability instrumentation using instrumentation.server.ts' | ||
author: Elliott Johnson | ||
authorURL: https://bsky.app/profile/gruntled.bsky.social | ||
--- | ||
|
||
Understanding how your SvelteKit application behaves in production — from request flows to performance bottlenecks — is crucial for building reliable user experiences. We're excited to introduce two new experimental features that bring integrated observability directly into SvelteKit: built-in OpenTelemetry tracing and a dedicated instrumentation setup file that ensures your monitoring tools work seamlessly from day one. | ||
|
||
## First-party OpenTelemetry traces | ||
|
||
SvelteKit can now emit [OpenTelemetry](https://opentelemetry.io) traces for the following: | ||
|
||
- [`handle`](/docs/kit/hooks#Server-hooks-handle) hook (`handle` functions running in a [`sequence`](/docs/kit/@sveltejs-kit-hooks#sequence) will show up as children of each other and the root handle hook) | ||
- [`load`](/docs/kit/load) functions (includes universal `load` functions when they're run on the server) | ||
elliott-with-the-longest-name-on-github marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
- [Form actions](/docs/kit/form-actions) | ||
- [Remote functions](/docs/kit/remote-functions) | ||
|
||
To enable trace emission, add the following to `svelte.config.js`: | ||
elliott-with-the-longest-name-on-github marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
||
```js | ||
/// file: svelte.config.js | ||
export default { | ||
kit: { | ||
+++experimental: { | ||
tracing: { | ||
server: true | ||
} | ||
}+++ | ||
} | ||
}; | ||
``` | ||
|
||
If there are additional attributes you think might be useful, please file an issue on the [SvelteKit GitHub issue tracker](https://github.com/sveltejs/kit/issues). | ||
elliott-with-the-longest-name-on-github marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
||
## A convenient home for all of your instrumentation | ||
|
||
Emitting traces alone is not enough: You also need to collect them and send them somewhere. Under normal circumstances, this can be a bit challenging. Because of the nature of observability instrumentation, it needs to be loaded prior to loading any of the code from your app. To aid in this, SvelteKit now supports a `src/instrumentation.server.ts` file which, assuming your adapter supports it, is guaranteed to be loaded prior to your application code. | ||
|
||
To enable `instrumentation.server.ts`, add the following to your `svelte.config.js`: | ||
|
||
```js | ||
/// file: svelte.config.js | ||
export default { | ||
kit: { | ||
+++experimental: { | ||
instrumentation: { | ||
server: true | ||
} | ||
}+++ | ||
} | ||
}; | ||
``` | ||
|
||
In Node, your instrumentation might look something like this: | ||
|
||
```ts | ||
import { NodeSDK } from '@opentelemetry/sdk-node'; | ||
import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node'; | ||
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto'; | ||
import { createAddHookMessageChannel } from 'import-in-the-middle'; | ||
import { register } from 'module'; | ||
|
||
const { registerOptions } = createAddHookMessageChannel(); | ||
register('import-in-the-middle/hook.mjs', import.meta.url, registerOptions); | ||
|
||
const sdk = new NodeSDK({ | ||
serviceName: 'test-sveltekit-tracing', | ||
traceExporter: new OTLPTraceExporter(), | ||
instrumentations: [getNodeAutoInstrumentations()] | ||
}); | ||
|
||
sdk.start(); | ||
``` | ||
|
||
...and on Vercel, it would look something like this: | ||
elliott-with-the-longest-name-on-github marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
||
```ts | ||
import { registerOTel } from '@vercel/otel'; | ||
|
||
registerOTel({ | ||
serviceName: 'test-sveltekit-tracing' | ||
elliott-with-the-longest-name-on-github marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
}); | ||
``` | ||
|
||
Consult your platform's documentation for specific instrumentation instructions. As of now, all of the official SvelteKit adapters with a server component (sorry, `adapter-static`) support `instrumentation.server.ts`. | ||
|
||
## Acknowledgements | ||
|
||
A huge thank-you to Lukas Stracke, who kicked us off on this adventure with his excellent [talk at Svelte Summit 2025](https://www.youtube.com/watch?v=hFVmFAyB_YA) and his initial draft PR for `instrumentation.server.ts`. Another thank-you to [Sentry](https://sentry.io/welcome/) for allowing him to spend his working hours reviewing and testing our work. |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.