Open BryantDavis1986 opened 1 year ago
I am not a react expert but I am guessing that adding the logger init function in useState
is causing the logger to get initialize more than once. Here is simplified example of using logger with react.
@TerryMooreII that worked like a charm:
though it doesn't seem to be working the same way the api package does.
api using the logdna package:
i'm unsure how to get the env to show up in the metadata so i can use filters in the logdna UI like env:dev for my UI app.
the typescript shows that the 2nd thing to pass is line context but i presume that is different than line identifiers? i am trying to get the behavior to match so i can have all my apps be able to be filtered in one view using env:
you will probably need to add the env
to the logdna.addContext({})
method. https://github.com/logdna/logdna-browser#add-custom-metadata-for-log-lines
@TerryMooreII that only makes it appear under context and not under the line identifiers. which does not allow for you to do env:dev in LogDNA to filter by the environment
@BryantDavis1986 I just browsed through our logs and noticed that its not there either. I have a feeling the logger doesnt currently support this. I will make a ticket to get this added.
Framework:
Created a brand new LogDNA key in the portal and am using that in the UI to connect to LogDNA.
Implementation:
typescript const [legger] = useState( logdna.init((process.env.config as unknown as Config).logDnaApiKey, { hostname: 'al-ui-2', app: 'al-ui-3', console: true, }) );
package json dependencies
Webpack common
`javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { entry: path.resolve(__dirname, '..', './src/index.tsx'), resolve: { extensions: ['.tsx', '.ts', '.js'], }, module: { rules: [ { test: /.(ts|js)x?$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', }, ], }, { test: /.css$/, use: ['style-loader', 'css-loader'], }, { test: /.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', }, { test: /.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', }, ], }, output: { path: path.resolve(dirname, '..', './build'), filename: 'bundle.js', }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(dirname, '..', './src/index.html'), }), ], stats: 'errors-only', }; `
env specific Webpack:![image](https://user-images.githubusercontent.com/62255879/202048133-36d8a7e0-3928-4d0d-8658-c6d2270acf21.png)
Error in UI(Firefox):![image](https://user-images.githubusercontent.com/62255879/202048217-8b06230d-c9cc-43cd-8721-c494d0707f0c.png)
Firefox Console:![image](https://user-images.githubusercontent.com/62255879/202049184-9437f37f-5a92-4a4b-a988-be6a186f1d4a.png)