Local Telemetry with tunnel

Deno's tunnel feature allows you to expose your local development server to the internet securely. This is particularly useful for sending Open Telemetry data from your local server to Deno Deploy's telemetry monitoring services to help you debug and monitor your applications during development.

In this tutorial, we'll show you how to see span and log data in your local projects with minimal setup using the --tunnel flag and Deno Deploy.

Set up an app Jump to heading#

You can use any application that runs a local server. For this tutorial, we'll use a simple Svelte app. If you already have a local server application, you can skip to #Run your local app with the --tunnel flag.

First, set up a new Svelte project:

npx sv create svelte-app

Select the default options for the prompts, then navigate into your new project directory:

cd svelte-app
deno run dev

You should now have a Svelte app running locally at http://localhost:5173 (or another port if 5173 is already in use).

Set up Vite to allow tunneling Jump to heading#

The Vite server used by Svelte is restricted to localhost by default, so to make it more widely available we'll make a small change to our vite.config.js file. Open vite.config.js and add a server section to set allowedHosts: true:

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    allowedHosts: true,
  },
});

Deploy your app with the Deno Deploy subcommand Jump to heading#

To use the tunnel feature, you'll need a deployed application so that Deno can provide you a url to tunnel to. You can deploy your app using the Deno Deploy subcommand:

deno deploy

Follow the prompts to create a new project or select an existing one. Once deployed, you'll receive a project URL.

Run your local app with the --tunnel flag Jump to heading#

Now you can run your local development server with the --tunnel flag, which will expose your local server to the internet via a secure tunnel.

deno run --tunnel dev

Open the returned tunnel URL in your browser, and you should see your local Svelte app being served. Any telemetry data generated by your local server will now be sent to Deno Deploy's telemetry monitoring services.

Example telemetry data Jump to heading#

In your +page.server.ts file, you can add some example telemetry data to see it in action. Add a fetch request to https://example.com and some console logs:

console.log("This is the server-side page module.");

export const load = async ({ fetch }) => {
  // Basic server-side fetch used for demonstration purposes
  const response = await fetch("https://example.com");
  const exampleHtml = await response.text();

  return {
    exampleHtml,
  };
};

When you access your app through the tunnel URL, this fetch request will be made and we should be able to see it in the telemetry data in Deno Deploy. To do so:

1. Open the network tab of your browser's developer tools and look for the GET request to your tunnel URL.
2. Look at the response headers to find the x-deno-trace-id header, which contains the trace ID for this request.
3. Copy the trace ID.
4. Go to your Deno Deploy console, navigate to your app and click on the Traces tab.
5. Paste the trace ID into the search bar to find the specific trace for your request.

Now you can drill down into the trace details to see the telemetry data, you should be able to see the GET request to your tunnel URL and the fetch request to https://example.com as part of the trace. These are all being captured from your local development server without any additional setup!

You can also view the logs generate by a specific request by clicking on the view logs button next to a trace. If you see a trace at / you should see the "This is the server-side page module." which we logged to the console in the logs for that trace.

🦕 JavaScript has a single event loop and asynchronous functions, it is very possible that your project is a busy JavaScript server with lots of logs and traces. The telemetry tooling in Deno Deploy is designed to help you explore and debug exceptions or performance issues, so don't be discouraged if you see a lot of data! Use the filtering and search features to help you find what you're looking for.