logdna / logdna-browser

A frontend browser logging and exception capturing library for LogDNA
MIT License
19 stars 14 forks source link

The plugin ConsolePlugin is already registered with LogDNA Browser #59

Open BryantDavis1986 opened 1 year ago

BryantDavis1986 commented 1 year ago

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

image

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

Error in UI(Firefox): image

Firefox Console: image

TerryMooreII commented 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.

BryantDavis1986 commented 1 year ago

@TerryMooreII that worked like a charm: image image

though it doesn't seem to be working the same way the api package does. image api using the logdna package: image image

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: in logdna

TerryMooreII commented 1 year ago

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

BryantDavis1986 commented 1 year ago

@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

image

TerryMooreII commented 1 year ago

@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.