@vigneshshanmugam
Hello vigneshshanmugam.
We have been communicating for some time, according to your feedback, we have not succeeded after testing.
I am a system administrator and don’t know the frontend code. I provide our package file. Can you help me debug it?
apmApi.ts
import { init as initApm } from '@elastic/apm-rum'
const getHeaderValue = (span: any) => {
if (span && span.traceId && span.id && span.parentId) {
const flags = span.sampled ? '01' : '00'
const id = span.sampled ? span.id : span.parentId
return '00' + '-' + span.traceId + '-' + id + '-' + flags
}
}
export class InitApm {
apm: any;
env: any;
appName: string;
distributedTracingOrigins!: string[];
serviceName!: string;
serverUrl!: string;
user = localStorage.userinfo ? JSON.parse(localStorage.userinfo) : { name: '', userName: '', userId: '', }
transaction: any = ''
httpSpan: any = ''
logLevel: 'trace' | 'debug' | 'info' | 'warn' | 'error'
constructor(appName: string, env?: any) {
this.appName = appName;
this.env = env || {
env: process.env.NODE_ENV,
Eenv: {
development: 'development',
local: 'local',
production: 'production',
}
}
this.logLevel = this.isProduction() ? "error" : "debug"
}
apmInit() {
if (this.isLocal()) {
return;
}
if (this.env.env === this.env.Eenv.development || this.env.env === this.env.Eenv.local) {
this.distributedTracingOrigins = [
'http://192.168.10.183',
]
this.serviceName = `XXXXX`
this.serverUrl = this.distributedTracingOrigins[0]
}
if (this.env.env === this.env.Eenv.production) {
this.distributedTracingOrigins = [
'https://apm.com',
]
this.serviceName = `XXXXX`
this.serverUrl = this.distributedTracingOrigins[0]
}
this.apm = initApm({
active: true,
instrument: true,
logLevel: this.logLevel,
distributedTracing: true,
distributedTracingOrigins: this.distributedTracingOrigins,
// serviceName: this.serviceName,
serviceName: `XXXXX`,
serverUrl: this.serverUrl,
serviceVersion: '0.0.1',
})
return this.apm
}
ampHanleRequest(config: any) {
if (this.isLocal()) {
return;
}
const lastIndex = config.url.lastIndexOf("/")
this.apm.setCustomContext({
name: this.user.name,
userName: this.user.name,
domainName: this.user.domainName,
userId: this.user.id,
pageName: document.title,
method: config.method,
api: config.url.substr(lastIndex + 1).split("?")[0],
data: config.data ? JSON.stringify(config.data) : config.url.split("?")[1],
})
const fullApi = (config.baseURL + config.url).split("/api/")[1].split("?")[0];
this.transaction = this.apm.startTransaction(`${this.appName} ${fullApi}`, 'custom')
this.httpSpan = this.transaction.startSpan(config.method + (config.url as string), 'external')
Object.assign(config.headers, { 'elastic-apm-traceparent': getHeaderValue(this.httpSpan) })
}
apmHandleResponse(response: any) {
if (this.isLocal()) {
return;
}
this.apm.setCustomContext({ responseStatus: response.status })
this.httpSpan.end()
this.transaction.end()
}
apmHandleResponseError(error: any) {
if (this.isLocal()) {
return;
}
this.apm.setCustomContext({
responseStatus: error.response.status,
errorMessage: error.response.data.error.message,
})
this.httpSpan.end()
this.transaction.end()
}
isLocal() {
return false; // this.env.env === this.env.Eenv.local;
}
isProduction() {
return this.env.env === this.env.Eenv.production;
}
}
axios.ts
// axios-init.js
import axios from 'axios'
import { Message } from "element-ui"
import { env, Eenv } from '@/utils'
import { getToken } from './getToken'
import { InitApm } from '@/plugins/apmApi'
const token = env.apiToken()
function serves(serve: string) {
// apm
const apm = new InitApm('masa-ms')
apm.apmInit();
const service = axios.create({
baseURL: serve,
timeout: 10000,
headers: { common: { Authorization: 'Bearer ' + token } }
});
// axios
service.interceptors.request.use(
(config) => {
config.headers.common.Authorization = 'Bearer ' + env.apiToken()
apm.ampHanleRequest(config);
return config;
},
(error) => {
return Promise.reject(error)
}
);
service.interceptors.response.use(
(response) => {
// apm
apm.apmHandleResponse(response);
return response;
},
(error) => {
// apm
apm.apmHandleResponseError(error);
if (error.message.search(/40*/g) > -1 && env.env() === Eenv.local) {
getToken()
} else {
try {
if (error.response.data.error.message) {
Message.error(error.response.data.error.message)
} else if (error.message) {
Message.error(error.message)
}
} catch (error) {
return Promise.reject(error)
}
}
return Promise.reject(error)
}
)
return service
}
export default serves
