Code Origins Doc - Fixed broken image and added Typescript enable source map instructions #29163

sstonehill12 · 2025-05-05T21:26:55Z

… source map enablement

What does this PR do? What is the motivation?

Fixed broken image link
Added specific instructions for Typescript applications to show code previews (enable source maps)
Broke out Troubleshooting section into separate issues
Added Live Debugger integration/entrypoint instructions with screenshots
Included references to Service Entry Spans, incl. how to filter in Trace Explorer

Merge instructions

Merge readiness:

Ready for merge

For Datadog employees:
Merge queue is enabled in this repo. Your branch name MUST follow the <name>/<description> convention and include the forward slash (/). Without this format, your pull request will not pass in CI, the GitLab pipeline will not run, and you won't get a branch preview. Getting a branch preview makes it easier for us to check any issues with your PR, such as broken links.

If your branch doesn't follow this format, rename it or create a new branch and PR.

To have your PR automatically merged after it receives the required reviews, add the following PR comment:

/merge

Additional notes

… source map enablement

sstonehill12 · 2025-05-05T21:28:29Z

content/en/tracing/code_origins/_index.md

@@ -64,6 +64,11 @@ Run your service with the following environment variable:
 export DD_CODE_ORIGIN_FOR_SPANS_ENABLED=true
 ```

+<div class="alert alert-info">
+  For TypeScript applications, run your Node.js application with the 


@watson This was basically copy/pasted from the SCI docs page, but would you mind double-checking that this instruction looks correct and doesn't require any extra steps or context?

After looking at bit closer at our current Code Origin docs, I can see that we link to the SCI docs (which also describes this flag) from the Prerequisites section.

Ideally we don't need to duplicate any information from the SCI docs on our own page when we already link to it? What do you think?

(btw, the text says linking to the SCI page says that SCI is "recommended" for code previews, I think it should say that it's "required")

I don't mind duplicating it here, since we know people are bad at reading docs - and the majority of people who will navigate to this page initially will be Node.js users, so we may as well hold their hand a bit!

Good catch on the "recommended for code previews"! Ill update it in my next commit.

If we duplicate this information, I think we need to:

Either duplicate both the information about --enable-source-maps, but also the fact that the user needs to set the DD_GIT_* environment variables (this quickly becomes verbose though).

Or at least change the text in this callout to reflect that it's not the only thing the user needs to do.

Right now it says that you need to set --enable-source-maps to see code previews without mentioning that you also need to set the DD_GIT_* environment variables.

Another thing (and I can't make up my mind about this) is that we say this is for TypeScript apps. Whereas in reality it's for all apps that does any sort of transpiling - TypeScript just being the most common situation where this is needed. However, the section quickly becomes complex if you add all sorts of conditions to it. So we might be better off not mentioning it 🤷

Here's my best attempt:

For transpiled applications, such as TypeScript, it's important to generate and publish source maps with the deployed application, and to run Node.js with the --enable-source-maps flag. Otherwise code previews will not work correctly.

For more information, see the Source Code Integration documentation for Node.js.

Note that I've changed the link Node.js docs to point to the latest docs.

(Writing this, I realized that the SCI docs doesn't mention to publish the source maps with the deployed application. It should do that)

Once this is merged, I have a PR ready to move the language specific instructions into individual tabs so that we can start to diverge the instructions. This only becomes more important in the future as we add support for new frameworks, which each will require a different tracer version (documenting these details becomes very verbose if all languages share the same table)

@watson Let me know what you think of my latest changes!

github-actions · 2025-05-05T21:40:41Z

Preview links (active after the `build_preview` check completes)

Modified Files

https://docs-staging.datadoghq.com/sarah.stonehill/code-origin-doc-fixes/tracing/code_origins/

content/en/tracing/code_origins/_index.md

watson · 2025-05-07T08:18:21Z

content/en/tracing/code_origins/_index.md

@@ -64,6 +64,11 @@ Run your service with the following environment variable:
 export DD_CODE_ORIGIN_FOR_SPANS_ENABLED=true
 ```

+<div class="alert alert-info">
+  For TypeScript applications, run your Node.js application with the 


If we duplicate this information, I think we need to:

Either duplicate both the information about --enable-source-maps, but also the fact that the user needs to set the DD_GIT_* environment variables (this quickly becomes verbose though).

Or at least change the text in this callout to reflect that it's not the only thing the user needs to do.

Right now it says that you need to set --enable-source-maps to see code previews without mentioning that you also need to set the DD_GIT_* environment variables.

Another thing (and I can't make up my mind about this) is that we say this is for TypeScript apps. Whereas in reality it's for all apps that does any sort of transpiling - TypeScript just being the most common situation where this is needed. However, the section quickly becomes complex if you add all sorts of conditions to it. So we might be better off not mentioning it 🤷

Here's my best attempt:

For transpiled applications, such as TypeScript, it's important to generate and publish source maps with the deployed application, and to run Node.js with the --enable-source-maps flag. Otherwise code previews will not work correctly.

For more information, see the Source Code Integration documentation for Node.js.

Note that I've changed the link Node.js docs to point to the latest docs.

(Writing this, I realized that the SCI docs doesn't mention to publish the source maps with the deployed application. It should do that)

…on, and added Live Debugger actions

content/en/tracing/code_origins/_index.md

Co-authored-by: Ursula Chen <58821586+urseberry@users.noreply.github.com>

watson · 2025-05-08T06:59:49Z

content/en/tracing/code_origins/_index.md

@@ -64,19 +66,33 @@ Run your service with the following environment variable:
 export DD_CODE_ORIGIN_FOR_SPANS_ENABLED=true
 ```

+<div class="alert alert-info">
+  For transpiled Node.js applications (for example, Typescript), make sure to generate and publish source maps with the deployed application, and to run Node.js with the <a href="https://nodejs.org/dist/v12.22.12/docs/api/cli.html#cli_enable_source_maps"><code>--enable-source-maps</code></a> flag. Otherwise, code previews do not work. See the Node.js <a href="/integrations/guide/source-code-integration/?tab=nodejs#setup">Source Code Integration</a> documentation for more details.


Are you sure using numbered links doesn't work inside this div? If it does, we should just write the content like so:

Suggested change

For transpiled Node.js applications (for example, Typescript), make sure to generate and publish source maps with the deployed application, and to run Node.js with the <a href="https://nodejs.org/dist/v12.22.12/docs/api/cli.html#cli_enable_source_maps"><code>--enable-source-maps</code></a> flag. Otherwise, code previews do not work. See the Node.js <a href="/integrations/guide/source-code-integration/?tab=nodejs#setup">Source Code Integration</a> documentation for more details.

For transpiled Node.js applications (for example, TypeScript), make sure to generate and publish source maps with the deployed application, and to run Node.js with the [`--enable-source-maps`][10] flag. Otherwise, code previews do not work. See the Node.js [Source Code Integration][9] documentation for more details.

Otherwise, just make these changes:

Suggested change

For transpiled Node.js applications (for example, Typescript), make sure to generate and publish source maps with the deployed application, and to run Node.js with the <a href="https://nodejs.org/dist/v12.22.12/docs/api/cli.html#cli_enable_source_maps"><code>--enable-source-maps</code></a> flag. Otherwise, code previews do not work. See the Node.js <a href="/integrations/guide/source-code-integration/?tab=nodejs#setup">Source Code Integration</a> documentation for more details.

For transpiled Node.js applications (for example, TypeScript), make sure to generate and publish source maps with the deployed application, and to run Node.js with the <a href="https://nodejs.org/docs/latest/api/cli.html#--enable-source-maps"><code>--enable-source-maps</code></a> flag. Otherwise, code previews do not work. See the Node.js <a href="/integrations/guide/source-code-integration/?tab=nodejs#setup">Source Code Integration</a> documentation for more details.

👋 from the docs team. Numbered links don't work within divs, so yes, you do have to use HTML links as above.

watson · 2025-05-08T07:02:40Z

content/en/tracing/code_origins/_index.md

+
+- To search for all spans that include Code Origins, use the query `@_dd.code_origin.type:*` in the [APM Trace Explorer][1].
+
+### Code preview is not visible ###


Suggested change

### Code preview is not visible ###

### Code preview is not visible ###

Please remove the trailing "#" from this line also.

watson · 2025-05-08T07:03:19Z

content/en/tracing/code_origins/_index.md

+
+### Code preview is not visible ###
+- Ensure that all [Source Code Integration][7] setup requirements are met.
+- For transpiled Node.js applications (for example, Typescript), make sure to generate and publish source maps with the deployed application, and to run Node.js with the [`--enable-source-maps`][10] flag. Otherwise, code previews do not work. See the Node.js [Source Code Integration][9] documentation for more details. 


Suggested change

- For transpiled Node.js applications (for example, Typescript), make sure to generate and publish source maps with the deployed application, and to run Node.js with the [`--enable-source-maps`][10] flag. Otherwise, code previews do not work. See the Node.js [Source Code Integration][9] documentation for more details.

- For transpiled Node.js applications (for example, TypeScript), make sure to generate and publish source maps with the deployed application, and to run Node.js with the [`--enable-source-maps`][10] flag. Otherwise, code previews do not work. See the Node.js [Source Code Integration][9] documentation for more details.

watson · 2025-05-08T07:03:51Z

content/en/tracing/code_origins/_index.md

@@ -110,3 +133,7 @@ If Code Origin information is missing:
 [6]: /tracing/trace_collection/
 [7]: /integrations/guide/source-code-integration/
 [8]: /tracing/trace_collection/compatibility/nodejs#web-framework-compatibility
+[9]: /integrations/guide/source-code-integration/?tab=nodejs#setup
+[10]: https://nodejs.org/dist/v12.22.12/docs/api/cli.html#cli_enable_source_maps


Suggested change

[10]: https://nodejs.org/dist/v12.22.12/docs/api/cli.html#cli_enable_source_maps

[10]: https://nodejs.org/docs/latest/api/cli.html#--enable-source-maps

urseberry · 2025-05-08T16:28:33Z

content/en/tracing/code_origins/_index.md

@@ -64,19 +66,33 @@ Run your service with the following environment variable:
 export DD_CODE_ORIGIN_FOR_SPANS_ENABLED=true
 ```

+<div class="alert alert-info">
+  For transpiled Node.js applications (for example, Typescript), make sure to generate and publish source maps with the deployed application, and to run Node.js with the <a href="https://nodejs.org/dist/v12.22.12/docs/api/cli.html#cli_enable_source_maps"><code>--enable-source-maps</code></a> flag. Otherwise, code previews do not work. See the Node.js <a href="/integrations/guide/source-code-integration/?tab=nodejs#setup">Source Code Integration</a> documentation for more details.


👋 from the docs team. Numbered links don't work within divs, so yes, you do have to use HTML links as above.

urseberry · 2025-05-08T16:30:08Z

content/en/tracing/code_origins/_index.md

@@ -89,13 +105,20 @@ export DD_CODE_ORIGIN_FOR_SPANS_ENABLED=true

 ## Troubleshooting

-If Code Origin information is missing:
+### Code Origin section is missing ###


Suggested change

### Code Origin section is missing ###

### Code Origin section is missing

urseberry · 2025-05-08T16:30:27Z

content/en/tracing/code_origins/_index.md

+
+- To search for all spans that include Code Origins, use the query `@_dd.code_origin.type:*` in the [APM Trace Explorer][1].
+
+### Code preview is not visible ###


Please remove the trailing "#" from this line also.

Fixed broken image and added specific instructions for Typescript app…

39654c3

… source map enablement

sstonehill12 requested a review from watson May 5, 2025 21:27

sstonehill12 commented May 5, 2025

View reviewed changes

sstonehill12 requested a review from shatzi May 6, 2025 13:12

Updated wording to say SCI is required for code previews

79cf4de

sstonehill12 marked this pull request as ready for review May 6, 2025 21:33

sstonehill12 requested a review from a team as a code owner May 6, 2025 21:33

watson reviewed May 7, 2025

View reviewed changes

Updated Node.js instructions wording, organized troubleshooting secti…

dfebd41

…on, and added Live Debugger actions

github-actions bot added the Images Images are added/removed with this PR label May 7, 2025

urseberry reviewed May 7, 2025

View reviewed changes

sstonehill12 and others added 2 commits May 7, 2025 20:26

Apply suggestions from code review

1686c45

Co-authored-by: Ursula Chen <58821586+urseberry@users.noreply.github.com>

Add Live Debugger as further reading link

15fe26e

sstonehill12 requested review from watson and urseberry May 8, 2025 00:34

watson reviewed May 8, 2025

View reviewed changes

urseberry reviewed May 8, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Code Origins Doc - Fixed broken image and added Typescript enable source map instructions #29163

Code Origins Doc - Fixed broken image and added Typescript enable source map instructions #29163

sstonehill12 commented May 5, 2025 •

edited

Loading

sstonehill12 May 5, 2025

watson May 6, 2025

sstonehill12 May 6, 2025

watson May 7, 2025

watson May 7, 2025

sstonehill12 May 7, 2025

github-actions bot commented May 5, 2025

watson May 7, 2025

watson May 8, 2025

urseberry May 8, 2025 •

edited

Loading

watson May 8, 2025

urseberry May 8, 2025

watson May 8, 2025

watson May 8, 2025

urseberry May 8, 2025 •

edited

Loading

urseberry May 8, 2025

urseberry May 8, 2025


		- To search for all spans that include Code Origins, use the query `@_dd.code_origin.type:*` in the [APM Trace Explorer][1].

		### Code preview is not visible ###

	- For transpiled Node.js applications (for example, Typescript), make sure to generate and publish source maps with the deployed application, and to run Node.js with the [`--enable-source-maps`][10] flag. Otherwise, code previews do not work. See the Node.js [Source Code Integration][9] documentation for more details.
	- For transpiled Node.js applications (for example, TypeScript), make sure to generate and publish source maps with the deployed application, and to run Node.js with the [`--enable-source-maps`][10] flag. Otherwise, code previews do not work. See the Node.js [Source Code Integration][9] documentation for more details.

	[10]: https://nodejs.org/dist/v12.22.12/docs/api/cli.html#cli_enable_source_maps
	[10]: https://nodejs.org/docs/latest/api/cli.html#--enable-source-maps

	### Code Origin section is missing ###
	### Code Origin section is missing

Code Origins Doc - Fixed broken image and added Typescript enable source map instructions #29163

Are you sure you want to change the base?

Code Origins Doc - Fixed broken image and added Typescript enable source map instructions #29163

Conversation

sstonehill12 commented May 5, 2025 • edited Loading

What does this PR do? What is the motivation?

Merge instructions

Additional notes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented May 5, 2025

Preview links (active after the build_preview check completes)

Modified Files

Choose a reason for hiding this comment

Choose a reason for hiding this comment

urseberry May 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

urseberry May 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sstonehill12 commented May 5, 2025 •

edited

Loading

Preview links (active after the `build_preview` check completes)

urseberry May 8, 2025 •

edited

Loading

urseberry May 8, 2025 •

edited

Loading