Search code examples
typescriptvisual-studio-codeazure-application-insights

Can’t make a small working project starting with Application Insights

I wanted to create a small, hello world, single application page web site and I keep having errors. I searched for the error, implemented the proposed changes and other issues happenend.

Could you please help me understand the issue, I don’t want server components, only typescript and html running on NodeJs as I understood Application Insights won’t work without NodeJs working with VSCode on Windows 10.

App.ts

import * as appInsights from '../node_modules/applicationinsights/out/applicationinsights.js';

function main(_t: number): void {
  appInsights.setup('***').start();
}

main(1);

package.json

{
  "main": "./js/app.js",
  "type": "module",
  "scripts": {
    "start": "set DEBUG_MODE=true && start python -m http.server 1973 && start http://localhost:1973"
  },
  "devDependencies": {
    "@types/node": "^20.8.10",
    "typescript": "^5.2.2"
  },
  "dependencies": {
    "applicationinsights": "^2.9.5"
  }
}

tsConfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES2015",
    "outDir": "./js",
    "rootDir": "./ts", 
    "moduleResolution": "Bundler",
    "baseUrl": "./",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": ["./ts/**/*.ts", "@types/**/*.d.ts"]
}

I used '../node_modules/applicationinsights/out/applicationinsights.js' as I had the message: Uncaught TypeError: Failed to resolve module specifier "applicationinsights". Relative references must start with either "/", "./", or "../".

If you can provide any help, thanks.

Solution

  • only typescript and html on NodeJs as I understood Application Insights won’t work without NodeJs in this configuration, working with VSCode on Windows 10.

    • As I provided in the previous solution. I just want to clarify some details. Firstly, please downgrade your node version to 18.0.X, if you use 20.0.X v.

    I wanted to create a small, hello world

    Please follow the below steps.

    • Initialize a New npm Project with npm init -y

    enter image description here

    enter image description here

    enter image description here

    • Create a TypeScript Configuration File npx tsc --init

    enter image description here

    • Create a app.ts file in the project directory and the below code.
    import * as appInsights from 'applicationinsights';

// Set up Application Insights
appInsights.setup('InstrumentationKey').start();

// Example: Track a custom event
const client = appInsights.defaultClient;
client.trackEvent({ name: 'MyCustomEvent', properties: { key: 'value' } });

console.log('Message logged to Application Insights.');
    • Compile TypeScript to JavaScript with npx tsc

    enter image description here

    Executed:

    enter image description here

    Result:

    enter image description here

    Package.json:

    {
  "name": "rxjsclient",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@microsoft/applicationinsights-web": "^3.1.2",
    "applicationinsights": "^3.0.0-beta.12",
    "typescript": "^5.4.4"
  },
  "devDependencies": {
    "@types/node": "^20.12.5"
  }
}